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 文件。

index.html

　　index.html ，是前端入门基础，就不再赘述。

main.js

main.js 文件最简单的代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

今天先不说 use ，先只说 createApp() 和 mount() 函数。往下看，除开vue-cli ，来做一个最简单的应用。

声明式渲染

  {{ message }}

?

createApp()  函数

　　用法：

const app = Vue.createApp({ /* 选项 */ })

　　作用：创建应用。传递给 createApp 的选项用于配置根组件

　　实现：

mount() 函数

　　用法：

Vue.createApp(HelloVueApp).mount('#hello-vue')

　　作用：挂载应用。在使用 mount() 挂载应用时，该组件被用作渲染的起点。