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