vue-cli脚手架初始化项目简要分析

时间 2019-12-21

标签 vue cli 脚手架初始化项目简要分析繁體版

原文原文链接

1、使用vue-cli脚手架建立一个最简单项目

咱们经过vue的脚手架工具，执行 vue create vue-demo 能够生成最初项目。从最初的脚手架初始化项目中，咱们能够看到项目根目录下主要有一个 public目录和 src目录，其中public目录下主要就是一个 index.html文件，这个index.html文件的做用就是 为当前vue项目提供一个html模板，由于 Vue实例要想挂载，即要想显示到html模板上，必须给其提供一个挂载点，因此模板中必须存在一个<div id="app"></div>，如:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-webpack</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

接下来，看一下src目录，该目录下主要有 main.js和 App.vue两个文件，其中 main.js就是整个Vue项目的入口文件， App.vue就是整个Vue项目的首页，即当前单页面应用的首页。整个Vue项目是经过webpack打包来启动项目，可是咱们发现， 整个项目中并无webpack的配置文件。由于其并无对外暴露webpack的配置文件，若是咱们须要修改webpack的配置文件，那么能够 在项目根目录下新建一个vue.config.js文件, 而后在configureWebpack中进行配置文件的修改，内容以下:

// vue.config.js
module.exports = {
  configureWebpack: {
    mode: "development",
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

固然，若是想要查看默认的webpack文件到底给咱们配置了什么，咱们能够经过 在项目根目录下执行 vue inspect > output.txt来大致查看webpack配置文件内容。

2、vue项目的启动过程

vue项目的启动过程就是，首先以src目录下的main.js为项目入口进行打包，而后将打包后的js文件，自动插入到public目录下的index.html模板中，而后加载index.html文件并执行打包后的js文件。首先看一下main.js中的具体内容，如:

// vue.config.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false // 禁用生产模式下的提示信息

new Vue({
  render: (h) => {
    return h(App)
  },
}).$mount('#app')

咱们能够看到main.js中就是 引入了一下vue.js并建立一个Vue实例对象，而后调用$mount()方法进行了一下mount。
须要注意的是， 传入$mount()方法的参数，必须和public目录下的index.html中的id值一致，不然Vue实例将找不到挂载点挂载。
那么Vue实例挂载到页面后显示什么内容呢？答案就是， 建立Vue实例的时候配置的render()函数，当Vue实例建立完成后，经过 调用$mount()函数开始Vue实例的挂载，挂载的过程当中，会执行render()函数， render()函数执行会产生一个虚拟节点，而后 将虚拟节点转换为真实DOM节点并挂载到页面中。须要注意的时候， Vue实例挂载后，public目录下的index.html文件中的<div id="app"></div>会被渲染结果替换掉，即覆盖掉。

其中有一行 Vue.config.productionTip = false，该行代码的做用就是 禁用生产模式下的提示警告，简单说就是，若是当前项目是在 production模式下，那么就 禁用一些无用的警告信息提示；若是当前项目是在 development模式下，那么就不由用，而是 正常提示警告信息，一般就是禁用以下提示，如:

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

再看一下App.vue，App.vue就是一个Vue的组件， 其会被vue-loader处理，而后交给render()渲染函数处理并渲染。

// App.vue
<template>
  <div id="app">
    {{msg}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello msg"
    }
  }
}
</script>

项目中经过 import Vue from "vue"引入的实际上是 运行时的vue，由于咱们能够经过查看vue的webpack配置文件，咱们能够看到，其配置了一个alias别名，因此当引入vue的时候，找的是vue/dist/vue.runtime.esm.js，这是一个runtime运行时的版本，而运行时的vue版本，是 不支持template配置的，由于 运行时的版本没有编译器，因此没法将template模板内容编译为渲染函数。

resolve: {
    vue$: 'vue/dist/vue.runtime.esm.js' // $表示精确匹配
}

若是使用的是 运行时的版本，那么当 配置了template的时候，项目运行就会输出以下警告信息，即你当前使用的是运行时的vue，此时编译器不可用，即 不包含编译器，由于编译器的做用就是， 将template模板编译为渲染函数，因此你能够本身 手动配置一个render渲染函数或者 使用带编译器的vue进行构建。

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build

若是想要使用带编译器的版本，咱们能够引入 " vue.esm.js"。这里有点比较难于理解的地方就是，咱们引入的App.vue能够直接交给渲染函数的createElement(App)函数进行处理，由于vue-loader对.vue文件进行了转换，咱们能够如下面的方式理解，如:

import Vue from "vue";
// App.vue start
const _vm = new Vue({
    data() {
        return {
            msg: "hello msg."
        }
    }
});
// import App from "./App.vue"; 引入后等价于以下
const App = ["div", {attrs: {"id":"app"}},_vm.msg];
// App.vue end
let vm = new Vue({
    render: (h) => {
        return h(...App);
    }
});
vm.$mount("#app")

固然，咱们不须要知道vue-loader具体是怎么转换的，为何转换后的内容能够直接被createElement()函数直接渲染。咱们只须要知道vue-loader会对.vue文件中的 <template></template>模板进行预编译便可。

3、本身配置webpack

为了更好的理解vue-cli生成的项目，咱们能够本身配置webpack，而后实现vue-cli生成项目的运行，即本身建立一个新的项目，而后在src目录下加入main.js和App.vue以及在public目录下加入index.html文件，而后经过本身配置的webpack让项目运行起来，其webpack.config.js内容以下

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    mode: "development",
    target: "web",
    entry: {
        main: "./src/main.js"
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "[name].js"
    },
    devServer: {
        port: 3000, // 让devServer监听3000端口
        contentBase: "./dist", // 将当前项目的dist目录做为devServer的根目录
        progress: true, // 显示打包进度条
        compress: true // 是否启用Gzip压缩，默认为false
    },
    module: {
        rules: [
            {
                test: /\.vue$/, // 处理.vue文件
                use: [
                    {
                        loader: "vue-loader"
                    }
                ]
            },
            {
                test: /\.css$/, // 处理.css文件，包括.vue文件中的<style></style>部分
                use: [
                  'style-loader',
                  'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ // 将打包后的js文件自动注入到public目录下的index.html文件中
            template: "./public/index.html",
            filename: "index.html"
        }),
        new VueLoaderPlugin() // 处理.vue文件
    ]
}