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
    }
  ]
})