vue项目工程中执行npm run dev 命令之后执行了哪些操作

1.

npm run dev是执行配置在package.json中的脚本，比如：

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
}

2.

build/dev-server.js里var webpackConfig = require('./webpack.dev.conf') 调用了webpack.dev.conf配置文件。

var config = require('../config')
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
 
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')

webpack.dev.conf文件通过merge引用了webpack.base.conf.js文件

 

 在webpack.base.conf.js文件中调用了./src/main.js

 

main.js用到了一个html元素#app。

import Vue from 'vue'
import App from './App'
import router from './router'
import Mint from 'mint-ui'
 
var jquery = require('jquery');
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
}

再次回到webpack.dev.conf.js文件的结尾处

 new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })

这里就指定了输出的模板文件 

后续就是因为调用了main.js  所以就去去调取路由 最后填充到App.Vue 中