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

配置文件package.json:

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

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

 "scripts": {
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",
     "lint": "eslint --ext .js,.vue src"
   }

可以知道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 两个环境的各种参数，如下结构：

 module.exports = {
   build: {
     env: require('./prod.env'),
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     productionSourceMap: true,
     productionGzip: false,
     productionGzipExtensions: ['js', 'css'],
   },
   dev: {
     env: require('./dev.env'),
     port: 8888,
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {},
     cssSourceMap: false
   }
 }

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

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

 let webpackConfig = {
   entry: {
     app: './src/main.js'
   },....
 }

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

 //webpack.dev.conf.js
 new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true
 })

 //webpack.prod.conf.js
 new HtmlWebpackPlugin({
   filename: config.build.index,
   template: 'index.html',
   inject: true,
   minify: {
     ...
   },
   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
   chunksSortMode: 'dependency'
 })

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 = false

Vue.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中

 import Vue from 'vue'
 import Router from 'vue-router'
 import login from '@/components/login/login'
 import index from '@/components/index/index'
 import platelist from '@/components/platelist/platelist'
 import choosecars from '@/components/choosecars/choosecars'
 import vehiclemonitor from '@/components/vehiclemonitor/vehiclemonitor'

 // 插件
 // 安装 <router-view> and <router-link> 组件
 // 且给当前应用下所有的组件都注入 $router and $route 对象
 Vue.use(Router)

 //实例化Router
 export default new Router({
   mode: 'history',
   routes: [
     {
       path: '/',
       name: 'login',
       component: login
     },
     {
       path: '/index',
       name: 'index',
       component: index
     },
     {
       path: '/platelist',
       name: 'platelist',
       component: platelist
     },
     {
       path: '/choosecars',
       name: 'choosecars',
       component: choosecars
     },
     {
       path: '/vehiclemonitor',
       name: 'vehiclemonitor',
       component: vehiclemonitor
     }
   ]
 })