一、使用vue-cli腳手架創(chuàng)建一個(gè)最簡單項(xiàng)目
我們通過vue的腳手架工具，執(zhí)行vue create vue-demo 可以生成最初項(xiàng)目。從最初的腳手架初始化項(xiàng)目中，我們可以看到項(xiàng)目根目錄下主要有一個(gè)public目錄和src目錄，其中public目錄下主要就是一個(gè)index.html文件，這個(gè)index.html文件的作用就是為當(dāng)前vue項(xiàng)目提供一個(gè)html模板，因?yàn)?strong>Vue實(shí)例要想掛載，即要想顯示到html模板上，必須給其提供一個(gè)掛載點(diǎn)，所以模板中必須存在一個(gè)<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兩個(gè)文件，其中main.js就是整個(gè)Vue項(xiàng)目的入口文件，App.vue就是整個(gè)Vue項(xiàng)目的首頁，即當(dāng)前單頁面應(yīng)用的首頁。整個(gè)Vue項(xiàng)目是通過webpack打包來啟動項(xiàng)目，但是我們發(fā)現(xiàn)，整個(gè)項(xiàng)目中并沒有webpack的配置文件。因?yàn)槠洳]有對外暴露webpack的配置文件，如果我們需要修改webpack的配置文件，那么可以在項(xiàng)目根目錄下新建一個(gè)vue.config.js文件, 然后在configureWebpack中進(jìn)行配置文件的修改，內(nèi)容如下:
// vue.config.jsmodule.exports = { configureWebpack: { mode: "development", plugins: [ new MyAwesomeWebpackPlugin() ] }}
當(dāng)然，如果想要查看默認(rèn)的webpack文件到底給我們配置了什么，我們可以通過在項(xiàng)目根目錄下執(zhí)行 vue inspect > output.txt來大體查看webpack配置文件內(nèi)容。
二、vue項(xiàng)目的啟動過程
vue項(xiàng)目的啟動過程就是，首先以src目錄下的main.js為項(xiàng)目入口進(jìn)行打包，然后將打包后的js文件，自動插入到public目錄下的index.html模板中，然后加載index.html文件并執(zhí)行打包后的js文件。首先看一下main.js中的具體內(nèi)容，如:
// vue.config.jsimport Vue from 'vue'import App from './App.vue'Vue.config.productionTip = false // 禁用生產(chǎn)模式下的提示信息new Vue({ render: (h) => { return h(App) },}).$mount('#app')
我們可以看到main.js中就是引入了一下vue.js并創(chuàng)建一個(gè)Vue實(shí)例對象，然后調(diào)用$mount()方法進(jìn)行了一下mount。
需要注意的是，傳入$mount()方法的參數(shù)，必須和public目錄下的index.html中的id值一致，否則Vue實(shí)例將找不到掛載點(diǎn)掛載。
那么Vue實(shí)例掛載到頁面后顯示什么內(nèi)容呢？答案就是，創(chuàng)建Vue實(shí)例的時(shí)候配置的render()函數(shù)，當(dāng)Vue實(shí)例創(chuàng)建完成后，通過調(diào)用$mount()函數(shù)開始Vue實(shí)例的掛載，掛載的過程中，會執(zhí)行render()函數(shù)，render()函數(shù)執(zhí)行會產(chǎn)生一個(gè)虛擬節(jié)點(diǎn)，然后將虛擬節(jié)點(diǎn)轉(zhuǎn)換為真實(shí)DOM節(jié)點(diǎn)并掛載到頁面中。需要注意的時(shí)候，Vue實(shí)例掛載后，public目錄下的index.html文件中的<div id="app"></div>會被渲染結(jié)果替換掉，即覆蓋掉。
其中有一行Vue.config.productionTip = false，該行代碼的作用就是禁用生產(chǎn)模式下的提示警告，簡單說就是，如果當(dāng)前項(xiàng)目是在production模式下，那么就禁用一些無用的警告信息提示；如果當(dāng)前項(xiàng)目是在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就是一個(gè)Vue的組件，其會被vue-loader處理，然后交給render()渲染函數(shù)處理并渲染。
// App.vue<template> <div id="app"> {{msg}} </div></template><script>export default { data() { return { msg: "hello msg" } }}</script>
項(xiàng)目中通過import Vue from "vue"引入的其實(shí)是運(yùn)行時(shí)的vue，因?yàn)槲覀兛梢酝ㄟ^查看vue的webpack配置文件，我們可以看到，其配置了一個(gè)alias別名，所以當(dāng)引入vue的時(shí)候，找的是vue/dist/vue.runtime.esm.js，這是一個(gè)runtime運(yùn)行時(shí)的版本，而運(yùn)行時(shí)的vue版本，是不支持template配置的，因?yàn)?strong>運(yùn)行時(shí)的版本沒有編譯器，所以無法將template模板內(nèi)容編譯為渲染函數(shù)。
resolve: { vue$: 'vue/dist/vue.runtime.esm.js' // $表示精確匹配}
如果使用的是運(yùn)行時(shí)的版本，那么當(dāng)配置了template的時(shí)候，項(xiàng)目運(yùn)行就會輸出如下警告信息，即你當(dāng)前使用的是運(yùn)行時(shí)的vue，此時(shí)編譯器不可用，即不包含編譯器，因?yàn)榫幾g器的作用就是，將template模板編譯為渲染函數(shù)，所以你可以自己手動配置一個(gè)render渲染函數(shù)或者使用帶編譯器的vue進(jìn)行構(gòu)建。
[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"。這里有點(diǎn)比較難于理解的地方就是，我們引入的App.vue可以直接交給渲染函數(shù)的createElement(App)函數(shù)進(jìn)行處理，因?yàn)関ue-loader對.vue文件進(jìn)行了轉(zhuǎn)換，我們可以以下面的方式理解，如:
import Vue from "vue";// App.vue startconst _vm = new Vue({ data() { return { msg: "hello msg." } }});// import App from "./App.vue"; 引入后等價(jià)于如下const App = ["div", {attrs: {"id":"app"}},_vm.msg];// App.vue endlet vm = new Vue({ render: (h) => { return h(...App); }});vm.$mount("#app")
當(dāng)然，我們不需要知道vue-loader具體是怎么轉(zhuǎn)換的，為什么轉(zhuǎn)換后的內(nèi)容可以直接被createElement()函數(shù)直接渲染。我們只需要知道vue-loader會對.vue文件中的<template></template>模板進(jìn)行預(yù)編譯即可。
三、自己配置webpack
為了更好的理解vue-cli生成的項(xiàng)目，我們可以自己配置webpack，然后實(shí)現(xiàn)vue-cli生成項(xiàng)目的運(yùn)行，即自己創(chuàng)建一個(gè)新的項(xiàng)目，然后在src目錄下加入main.js和App.vue以及在public目錄下加入index.html文件，然后通過自己配置的webpack讓項(xiàng)目運(yùn)行起來，其webpack.config.js內(nèi)容如下
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監(jiān)聽3000端口 contentBase: "./dist", // 將當(dāng)前項(xiàng)目的dist目錄作為devServer的根目錄 progress: true, // 顯示打包進(jìn)度條 compress: true // 是否啟用Gzip壓縮，默認(rèn)為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文件 ]}
