Vue-cli开发笔记一----------项目的结构

发布时间:2017-7-1 10:57:21编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"Vue-cli开发笔记一----------项目的结构 ",主要涉及到Vue-cli开发笔记一----------项目的结构 方面的内容,对于Vue-cli开发笔记一----------项目的结构 感兴趣的同学可以参考一下。

配置文件package.json:

搜索了配置的原理:https://segmentfault.com/a/1190000000344102

里面讲到:npm会在package.json文件中找script区域,可以使用npm run 命令来运行scripts的任何条目

1 "scripts": {2     "dev": "node build/dev-server.js",3     "build": "node build/build.js",4     "lint": "eslint --ext .js,.vue src"5   }

可以知道npm run dev及npm run build是运行了相应的哪些文件:

(1)dev-server.js 和 build.js 分别引入了build文件下的 webpack.dev.conf 和 webpack.prod.conf 配置文件,而webpack.dev.conf.js 及 webpack.prod.conf.js文件都引入并整合了 webpack.base.conf.js 文件;

(2)dev-server.js和build.js也都引入了 config/index.js 文件,cinfig/index文件定义了build 和 dev 两个环境的各种参数,如下结构:
 1 module.exports = { 2   build: { 3     env: require('./prod.env'), 4     index: path.resolve(__dirname, '../dist/index.html'), 5     assetsRoot: path.resolve(__dirname, '../dist'), 6     assetsSubDirectory: 'static', 7     assetsPublicPath: '/', 8     productionSourceMap: true, 9     productionGzip: false,10     productionGzipExtensions: ['js', 'css'],11   },12   dev: {13     env: require('./dev.env'),14     port: 8888,15     autoOpenBrowser: true,16     assetsSubDirectory: 'static',17     assetsPublicPath: '/',18     proxyTable: {},19     cssSourceMap: false20   }21 }

 引入进去后,分别使用build模块和dev模块里的各种参数

能够在webpack.base.conf.js文件(如下)中看到主入口js文件是main.js

1 let webpackConfig = {2   entry: {3     app: './src/main.js'4   },....5 }

另外在webpack.dev.conf.js 及 webpack.prod.conf.js 中能看到主入口页面的设置:HtmlWebpackPlugin

 1 //webpack.dev.conf.js 2 new HtmlWebpackPlugin({ 3   filename: 'index.html', 4   template: 'index.html', 5   inject: true 6 }) 7  8  9 //webpack.prod.conf.js10 new HtmlWebpackPlugin({11   filename: config.build.index,12   template: 'index.html',13   inject: true,14   minify: {15     ...16   },17   // necessary to consistently work with multiple chunks via CommonsChunkPlugin18   chunksSortMode: 'dependency'19 })

main.js文件很重要,如下,它引入了需要引入的项目中的js、css文件(index.js、base.css),引入了依赖的模块(jsonp、vue、App、router),

新建了vue实例,将模块App挂载在id为app的元素上:

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import '@/common/js/index.js'import '@/common/stylus/base.css'import jsonp from 'jsonp'import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = falseVue.prototype.URL_PREFIX = 'http://139.196.7.54'Vue.prototype.jsonp = jsonp// 创建 启动应用// 一定要确认注入了 router // 在 <router-view> 中将会渲染路由组件new Vue({  el: '#app',  router,  template: '<App/>',  components: { App }})

router/index.js中

 1 import Vue from 'vue' 2 import Router from 'vue-router' 3 import login from '@/components/login/login' 4 import index from '@/components/index/index' 5 import platelist from '@/components/platelist/platelist' 6 import choosecars from '@/components/choosecars/choosecars' 7 import vehiclemonitor from '@/components/vehiclemonitor/vehiclemonitor' 8  9 // 插件10 // 安装 <router-view> and <router-link> 组件11 // 且给当前应用下所有的组件都注入 $router and $route 对象12 Vue.use(Router)13 14 //实例化Router15 export default new Router({16   mode: 'history',17   routes: [18     {19       path: '/',20       name: 'login',21       component: login22     },23     {24       path: '/index',25       name: 'index',26       component: index27     },28     {29       path: '/platelist',30       name: 'platelist',31       component: platelist32     },33     {34       path: '/choosecars',35       name: 'choosecars',36       component: choosecars37     },38     {39       path: '/vehiclemonitor',40       name: 'vehiclemonitor',41       component: vehiclemonitor42     }43   ]44 })


上一篇:Windows 10 升级软件 Windows 10 易升
下一篇:VS2017 不能创建 vsto Excel 工作簿程序的问题

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款