一、使用vue-cli腳手架創(chuàng)建一個最簡單項目
我們通過vue的腳手架工具，執(zhí)行vue create vue-demo 可以生成最初項目。從最初的腳手架初始化項目中，我們可以看到項目根目錄下主要有一個public目錄和src目錄，其中public目錄下主要就是一個index.html文件，這個index.html文件的作用就是為當(dāng)前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項目的首頁，即當(dāng)前單頁面應(yīng)用的首頁。整個Vue項目是通過webpack打包來啟動項目，但是我們發(fā)現(xiàn)，整個項目中并沒有webpack的配置文件。因為其并沒有對外暴露webpack的配置文件，如果我們需要修改webpack的配置文件，那么可以在項目根目錄下新建一個vue.config.js文件, 然后在configureWebpack中進行配置文件的修改，內(nèi)容如下:
// vue.config.js
module.exports = {
configureWebpack: {
mode: "development",
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
當(dāng)然，如果想要查看默認的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.js
import 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ù)，當(dāng)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)模式下的提示警告，簡單說就是，如果當(dāng)前項目是在production模式下，那么就禁用一些無用的警告信息提示；如果當(dā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:///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別名，所以當(dāng)引入vue的時候，找的是vue/dist/vue.runtime.esm.js，這是一個runtime運行時的版本，而運行時的vue版本，是不支持template配置的，因為運行時的版本沒有編譯器，所以無法將template模板內(nèi)容編譯為渲染函數(shù)。
resolve: {
vue$: 'vue/dist/vue.runtime.esm.js' // $表示精確匹配
}
如果使用的是運行時的版本，那么當(dāng)配置了template的時候，項目運行就會輸出如下警告信息，即你當(dāng)前使用的是運行時的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 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")
當(dāng)然，我們不需要知道vue-loader具體是怎么轉(zhuǎn)換的，為什么轉(zhuǎn)換后的內(nèi)容可以直接被createElement()函數(shù)直接渲染。我們只需要知道vue-loader會對.vue文件中的<template></template>模板進行預(yù)編譯即可。
三、自己配置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", // 將當(dāng)前項目的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文件
]
}
|
