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文件
    ]
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。