vue 重学笔记三：起步

　　上文介绍了 安装和项目的创建，至于项目的打包，这里不再赘述，后期有空会出篇文章说下 项目的打包方面的优化。

　　重学笔记，并不适用于刚刚开始学 vue 的朋友，这中间我会在使用的基础上，去解读源码，所以会穿插源码，不过如果有兴趣学源码的朋友，也可以继续往下看。

　　要看一个项目，第一点肯定是去找它的入口。

 

入口：为什么 执行 npm run dev 后，执行了 index.html 和 main.js 文件

　　我们知道，启动 vue 项目，用的是 npm run dev ，那这行命令究竟做了什么？又是如何经由 index.html 文件，然后运行 main.js 文件的？

　　这里以 vue-cli2 创建(第二种创建方式)的项目为例，vue-cli3 创建的项目配置文件都被隐藏了，而 vue-cli2 中创建的项目配置文件是可以直接查看的。 　

　　先来看下 package.json 中配置了哪些命令：

"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",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },

 　　由以上命令可以看出来，npm run dev ，执行的是 package.json 中的 dev 那条命令，命令指向的是 build/webpack.dev.conf.js，如下图：

// webpack.dev.conf.js
...
const baseWebpackConfig = require('./webpack.base.conf') 
...

const devWebpackConfig = merge(baseWebpackConfig, {
    ...
    plugins: [
        ...
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
        }),
        ...
    ]
})

// webpack.base.conf.js
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
}

 　　先执行的是 webpack.dev.conf.js 文件，其中又引入了 webpack.base.conf.js 基础配置文件，同时在 dev.conf.js 文件中配置了 入口 index.html 文件，在 base.conf.js 基础文件中 配置了 入口 main.js 文件。

 

　　所以，在命令行中输入 npm run dev  后，会分别经由 webpack.dev.conf.js 文件，和 webpack.base.conf.js 文件 执行  index.html 文件和  ./src/main.js 文件。

 

标签：起步,vue,run,dev,js,webpack,笔记,conf
来源： https://www.cnblogs.com/bala/p/16035139.html