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

Posted 2020-09-25 胖了个胖胖

配置文件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: false
20   }
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.js
10 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 CommonsChunkPlugin
18   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 = 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中

 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 //实例化Router
15 export default new Router({
16   mode: ‘history‘,
17   routes: [
18     {
19       path: ‘/‘,
20       name: ‘login‘,
21       component: login
22     },
23     {
24       path: ‘/index‘,
25       name: ‘index‘,
26       component: index
27     },
28     {
29       path: ‘/platelist‘,
30       name: ‘platelist‘,
31       component: platelist
32     },
33     {
34       path: ‘/choosecars‘,
35       name: ‘choosecars‘,
36       component: choosecars
37     },
38     {
39       path: ‘/vehiclemonitor‘,
40       name: ‘vehiclemonitor‘,
41       component: vehiclemonitor
42     }
43   ]
44 })