Vue-cli项目运行流程

Vue-cli项目的运行流程

1、package.json

package.json是整个项目的配置文件，运行时首先读取里面的配置信息，定义了该项目的基本信息，项目依赖信息，和npm run …的脚本配置

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build:lib": "node build/build-lib.js",
    "build-lib": "vue-cli-service build --target lib --name auto-form ./package/auto-form/index.js",
    "build": "node build/build.js"
  }

这里我们也可以制作一些自定义的脚本，其中build:lib和build-lib就是我自定义的。
这里以运行npm run dev为例，即运行webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
这里读取了webpack.dev.conf.js

2、webpack.dev.conf.js和webpack.base.conf

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')//配置合并模块
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

//这里和合并该配置文件和webpack.base.conf配置文件
const devWebpackConfig = merge(baseWebpackConfig, {
...
	new HtmlWebpackPlugin({//把全部解析好的js合并到该html中
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
  	//这里配置了需要绑定到index。html的解析后的js的入口
    app: './examples/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',		//这里配置了输出文件名
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {					//下面是一些分解和解析规则
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [...

3、mian.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// 这里是程序的入口，开发组件流程：
//1、在packages里开发好组件
//2、把‘组件’和‘依赖的组件’在这里导入并use（在组件里导入应该也可以），例如elementui
//3、在views里写好测试的页面
//4、在路由里导入views里的测试页面，并添加路由路径
//5、入口运行的是路由页面，在主机域名后‘#’后加上你路由的路径就可以测试访问了，例：http://localhost:8079/#/test1
import Vue from 'vue'
import App from './App'
import router from './router'

//测试页面
import Test from '../packages/test/index'
Vue.use(Test)

import Axios from 'axios'
Vue.prototype.$axios = Axios
//Vue.use(Axios)

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

//自动表格开发
import AutoTable from '../packages/auto-table/index'
Vue.use(AutoTable)

import AutoForm from '../packages/auto-form/index'
Vue.use(AutoForm)

import AutoBGManagement from '../packages/auto-bg-management/index'
Vue.use(AutoBGManagement)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  //el: '#app',
  router,
  //components: { App },
  //template: '<App/>'
  render: h => h(App)
}).$mount('#app')

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

可以看到这个主程序入口也是一个vue组件，并在该组件内部引入了vue-route路由，使得该组件具有跳转功能。