一、模塊化
1.什么是模塊化
模塊化就是把系統分離成獨立功能的方法，這樣我們需要什么功能，就加載什么功能
- 每個模塊都是獨立的，良好設計的模塊會盡量與外部的代碼撇清關系，以便於獨立對其進行改進和維護
- 可以重復利用，而不用經常復制自己之前寫過的代碼
模塊化主要解決兩個問題，"命名沖突"、"文件依賴"。
1）命名沖突
在一個js文件中，如果我們的兩個變量名字相同，則前面的會被覆蓋，而在不同的js模塊，就可以解決命名沖突問題。
2）文件依賴
例如在我們使用vue-router.js插件時，他依賴vue.js，所以我們必須先導入vue.js，然后才能導入vue-router.js：
// b.js依賴a.js，標簽的書寫順序必須是： <script src='a.js' type='text/javascript'></script> <script src='b.js' type='text/javascript'></script>
這種按依賴順序導入的方式是同步導入。如果某個js文件很大，或者導入的時候出錯，則可能整個頁面被阻塞。
2.Commonjs（nodejs服務端）
CommonJs是服務器端模塊的規范，Node.js采用了這個規范。
根據CommonJS規范，一個單獨的文件就是一個模塊。
模塊導出使用module.exports：
// math.js
var math = { add:function(a,b){ return a+b; } } module.exports = math
加載模塊使用require方法，該方法讀取一個文件並執行，最后返回文件內部的exports對象：
var math = require('./math.js'); math.add(2, 3); // 輸出5
第二行math.add(2, 3)，在第一行require('math')之后運行，因此必須等math.js加載完成。也就是說，如果加載時間很長，整個應用就會停在那里等。您會注意到 require 是同步的。
CommonJS 加載模塊是同步的，所以只有加載完成才能執行后面的操作。像Node.js主要用於服務器的編程，加載的模塊文件一般都已經存在本地硬盤，所以加載起來比較快，不用考慮異步加載的方式，所以CommonJS規范比較適用。但如果是瀏覽器環境，要從服務器加載模塊，這是就必須采用異步模式。所以就有了AMD（Async module define）解決方案。
3.AMD
AMD 即 Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發的規范。
AMD也采用require()語句加載模塊，但是不同於CommonJS，它要求兩個參數：
require([module], callback);
第一個參數[module]，是一個數組，里面的成員就是要加載的模塊；第二個參數callback，則是加載成功之后的回調函數。如果將前面的代碼改寫成AMD形式，就是下面這樣：
require(['math'], function (math) { math.add(2, 3); });
math.add()與math模塊加載不是同步的，瀏覽器不會發生假死。所以很顯然，AMD比較適合瀏覽器環境。
4.ES6 Module（瀏覽器客戶端）
Vue使用ES6 Module。
二、webpack介紹和使用
由於webpack依賴node.js服務器環境，我們需要先安裝node.js，再安裝webpack。
1.安裝node.js和webpack
1）下載安裝node.js
下載地址：http://nodejs.cn/download/
安裝：windows下安裝很簡單
安裝完畢后，cmd中執行：
C:\Users\Administrator>node -v v12.15.0
node.js安裝完，默認npm包管理器也被安裝好了。
2）安裝webpack
執行命令：
npm i webpack@3.12.0 -g
3）使用國內淘寶npm鏡像
如果npm安裝軟件很慢，則安裝一個cnpm工具，這是淘寶提供的和npm類似的命名，的源在國內。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完畢后，就可以使用cnpm命名了，使用方法和npm基本一致。
2.ES6 Module的問題
例如，有如下場景。
我們有兩個js文件，main.js依賴module.js：
// module.js var person = { name:'Leokale', fav:function(){ alert('我是person對象下的fav函數'); } } export default person;
// main.js import person from './module' console.log(person.name); console.log(person.fav());
此時，我們如何在index.html中使用ES6 Module的語法import導入main.js：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>INDEX</title> </head> <body> <script src="./main.js"></script> </body> </html>
使用瀏覽器F12查看控制台，發現報錯：
3.使用webpack打包js模塊
鑒於2.中我們無法直接使用js模塊。我們使用webpack先對js文件進行打包：
進入windows的cmd或者pycharm的terminal，進入目錄（main.js入口js文件所在目錄），執行打包命令：
(venv) D:\pycharm_workspace\vue_learn\es6module>webpack -v 3.12.0 (venv) D:\pycharm_workspace\vue_learn\es6module>webpack ./main.js ./bundle.js Hash: 7407b3b8c075c448fd75 Version: webpack 3.12.0 Time: 44ms Asset Size Chunks Chunk Names bundle.js 3.13 kB 0 [emitted] main [0] ./main.js 86 bytes {0} [built] [1] ./module.js 145 bytes {0} [built]
main.js是入口js模塊，bundle.js是我們指定的輸出js文件名。
執行完畢后，我們可以看到目錄中生成了bundle.js文件：
這個bundle.js文件就是webpack幫我們將main.js和module.js捆綁打包好的js文件。
此時，我們就可以在index.html中去引用了：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>INDEX</title> </head> <body> <script src="./bundle.js"></script> </body> </html>
此時，頁面彈出alert框，說明main.js中的console.log(fav())運行成功：
三、ES6 module的使用
1.js模塊拋出多個對象
// module.js var person = { name:'Leokale', fav:function(){ alert('我是person對象下的fav函數'); } } var name = 'myname'; var age = 32; // 拋出多個對象或變量 export {name,age}; // 拋出name和age export var address = 'NO1.street'; export default person;
在module.js中，同時拋出了name、age、address變量以及person對象。
// main.js import * as objs from './module' console.log(objs);
在main.js中導入module.js中拋出的所有對象和變量。注意，這里使用"*"表示全部，但是必須使用as取一個別名。
打印結果：
2.模塊化引入vue.js
vue.js默認就是支持ES6Module模塊化的。所以我們可以在我們的js文件中引入vue.js。
為了方便，現將vue.js拷貝到和入口js文件同目錄：
然后在main.js中引入：
// main.js import Vue from './vue.js' new Vue({ el: "#app", data() { return { msg: '我是vue實例' } }, template: ` ` })
3.實現模塊解耦
在main.js中，我們引入了vue.js，並且創建了Vue的實例。
如果我們想要在vue中使用組件，我們不要在main.js中實現組件，而是利用模塊解耦的方式，在其他的js文件中實現App組件（例如App.js）：
// App.js let App = { data(){ return {} }, template:` <div>我是App組件</div> ` } export default App;
然后，再在main.js中引入App.js：
// main.js import Vue from './vue.js' import App from './App.js' new Vue({ el: "#app", data() { return { msg: '我是vue實例' } }, // 掛載App組件 components:{ App }, // 在這里是用App組件 template: ` <div> <App></App> </div> ` })
然后使用webpack打包：
webpack ./main.js ./bundle.js
打包完畢后，在index.html中使用bundle.js：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>INDEX</title> </head> <body> <div id="app"></div> <script src="./bundle.js"></script> </body> </html>
特別注意 <div id='app'></div> 一定不要忘了，因為最終渲染的地方是在這里。
運行結果：
四、實現webpack自動編譯打包
在前面的章節中，我們每次修改了js模塊代碼，都需要手工使用webpack工具（是安裝在我們機器上的一個軟件）來進行打包。下面，我們使用webpack模塊來實現自動打包。
1.生成package.json配置文件
在我們的項目中，先使用npm命令生成項目的配置文件package.json（類似於django中的settings.py）。
在命令行中項目目錄下執行：
(venv) D:\pycharm_workspace\vue_learn\es6module>npm init --yes Wrote to D:\pycharm_workspace\vue_learn\es6module\package.json: { "name": "es6module", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
注意： --yes 選項的意思是默認交互確認都選擇yes。如果不使用 --yes ，則自定義信息。
執行完畢后，可以看到項目目錄中產生了package.json文件：
package.json中的內容，就是命令執行后打印出來的json數據（綠色背景部分）。
2.安裝webpack開發環境依賴
安裝webpack的開發環境依賴。
(venv) D:\pycharm_workspace\vue_learn\es6module>cnpm i webpack@3.12.0 -D - [0/1] Installing path-parse@^1.0.6platform unsupported webpack@3.12.0 › watchpack@1.6.0 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform (win32) [fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32) √ Installed 1 packages √ Linked 272 latest versions [1/1] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "D:\\pycharm_workspace\\vue_learn\\es6module\\node_modules\\_uglifyjs-web pack-plugin@0.4.6@uglifyjs-webpack-plugin" [1/1] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finished in 61ms √ Run 1 scripts Recently updated (since 2020-02-02): 1 packages (detail see file D:\pycharm_workspace\vue_learn\es6module\node_modules\.recently_updates.txt) √ All packages installed (308 packages installed from npm registry, used 9s(network 9s), speed 552.74kB/s, json 273(526.93kB), tarball 4.49MB)
當然，使用npm也可以（如果不怕慢的話）。
安裝完畢后，我們可以看到package.json發生了變化：
{ "name": "es6module", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.12.0" } }
內容多出了"devDependencies"，其中指明了我們剛剛安裝的webpack開發環境依賴，版本是3.12.0。
3.修改執行腳本-1
package.json文件是通過 npm init 命令產生的。npm還有另外一個命令：
npm run
執行這個命令的時候，npm會自動去package.json中找"scripts"字段：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
此時，這個字段中是一個測試腳本，沒什么用。我們對其進行修改：
"scripts": { "dev": "webpack ./main.js ./bundle.js" },
然后使用npm run來執行：
(venv) D:\pycharm_workspace\vue_learn\es6module>npm run dev > es6module@1.0.0 dev D:\pycharm_workspace\vue_learn\es6module > webpack ./main.js ./bundle.js Hash: c7aa55741952b4a92b17 Version: webpack 3.12.0 Time: 375ms Asset Size Chunks Chunk Names bundle.js 373 kB 0 [emitted] [big] main [0] (webpack)/buildin/global.js 509 bytes {0} [built] [1] ./main.js 367 bytes {0} [built] [2] ./vue.js 354 kB {0} [built] [6] ./App.js 136 bytes {0} [built] + 3 hidden modules
可以看到，使用 npm run dev 相當於執行了 webpack ./main.js ./bundle.js 命令，生成了bundle.js出口文件。
4.修改執行腳本-2
我們再次修改scripts字段的腳本：
"scripts": { "dev": "webpack" },
我們刪除了入口js文件和出口js文件。如果此時直接使用 npm run dev ，一定會報錯。
那是因為，我們缺少一個webpack的配置文件，webpack.config.js文件（注意，一定要是這個名字）：
那么，這個配置文件要怎么寫，可以參考官方文檔：https://www.webpackjs.com/concepts/
// webpack.config.js module.exports = { entry: './main.js', output: { filename:'./bundle.js' } };
或者：
// webpack.config.js module.exports = { entry: { main:'./main.js' }, output: { filename: './bundle.js' } };
此時，再執行 npm run dev ：
(venv) D:\pycharm_workspace\vue_learn\es6module>npm run dev > es6module@1.0.0 dev D:\pycharm_workspace\vue_learn\es6module > webpack Hash: c2b0ee0bf652740d4483 Version: webpack 3.12.0 Time: 327ms Asset Size Chunks Chunk Names ./bundle.js 373 kB 0 [emitted] [big] main [0] (webpack)/buildin/global.js 509 bytes {0} [built] [1] ./main.js 367 bytes {0} [built] [2] ./vue.js 354 kB {0} [built] [6] ./App.js 136 bytes {0} [built] + 3 hidden modules
可以成功打包。
5.實現監聽代碼變化自動打包
在webpack.config.js配置文件中，添加一行代碼：
module.exports = { entry: './main.js', output: { filename:'./bundle.js' }, watch:true };
然后執行一次 npm run dev ，讓其讀一次配置文件：
npm run dev
可以看到，終端一直阻塞着：
至此以后，我們修改js代碼時，例如在main.js的vue實例中，template多使用一個App組件：
// main.js import Vue from './vue.js' import App from './App.js' new Vue({ el: "#app", data() { return { msg: '我是vue實例' } }, // 掛載App組件 components:{ App }, // 在這里是用App組件 template: ` <div> <App></App> 新加一個App組件：<App></App> </div> ` })
保存后，看實現效果：
可以看到，bundle.js已經自動打包重新生成了。
6.開發環境和生產環境分別使用不同配置文件
在開發環境中，我們希望webpack幫我們監聽文件的改變，然后自動打包。
而在生成環境中，我們希望手工運行命令打包全部。
我們可以自定義兩個配置文件，來分別對應開發環境和生產環境：
然后，我們在package.json中的scripts字段中配置：
"scripts": { "dev": "webpack --config ./webpack.dev.config.js", "build": "webpack --config ./webpack.prod.config.js" },
其中"dev"對應開發環境，使用 npm run dev 來開啟webpack監聽，並自動打包。
// webpack.dev.config.js module.exports = { entry: './main.js', output: { filename:'./bundle.js' }, watch:true };
"build"對應生產環境，使用 npm run build 來打包。
// webpack.prod.config.js module.exports = { entry: './main.js', output: { filename:'./bundle.js' } };
注意：這里的"dev"和"build"都是我們自定義的名字，我們可以隨意更改。
五、webpack打包css文件
在前面的章節中，我們利用webpack實現了js的打包，以及開發環境下的自動打包。
那么，我們想利用webpack幫我們打包除js文件以外的靜態資源，例如css樣式文件，該如何使用呢？
1.引子
創建一個css文件，index.css：
/* index.css */ body{ background-color: antiquewhite; }
我們在main.js入口js文件中直接導入css文件：
import './index.css'
我們發現，webpack報錯：
ERROR in ./index.css Module parse failed: Unexpected token (1:4) You may need an appropriate loader to handle this file type. | body{ | background-color: antiquewhite; | }
錯誤信息中提示我們需要一個loader去處理css文件類型。
在webpack的官方文檔中https://www.webpackjs.com/concepts/，提到了4個核心概念：
先理解四個核心概念：
入口(entry)
輸出(output)
loader
插件(plugins)
其中就有所需要的loader。
2.webpack的loader
首先安裝css-loader和style-loader的開發環境依賴：
(venv) D:\pycharm_workspace\vue_learn\es6module>cnpm i css-loader style-loader -D √ Installed 2 packages √ Linked 34 latest versions √ Run 0 scripts peerDependencies WARNING style-loader@* requires a peer of webpack@^4.0.0 || ^5.0.0 but none was installed peerDependencies WARNING css-loader@* requires a peer of webpack@^4.0.0 || ^5.0.0 but none was installed √ All packages installed (37 packages installed from npm registry, used 2s(network 2s), speed 230.62kB/s, json 37(170.77kB), tarball 353.43kB)
安裝完畢后，可以看到package.json中的"devDependencies"變為：
"devDependencies": { "css-loader": "^3.4.2", "style-loader": "^1.1.3", "webpack": "^3.12.0" }
3.配置使用loader
在webpack的開發環境配置文件webpack.dev.config.js中進行配置：
module.exports = { entry: './main.js', output: { filename:'./bundle.js' }, watch:true, module:{ loaders:[ { // 正則表達式，找所有.css結尾的文件 test:/\.css$/, // 'style-loader!css-loader'的意思是，先使用css-loader解析css文件 // 然后再使用style-loader將其生成<style>標簽或<link>插入index.html的header中 loader:'style-loader!css-loader' } ] } };
同樣的，生產環境的配置文件webpack.prod.config.js也加上上述標黃部分的配置即可。
配合完畢后重新運行：
npm run dev
訪問頁面，得到結果：
可以看到，body的背景色已經變為css中指定的 antiquewhite 色。
4.其他loader（babel-loader）
webpack除了打包js和css，還可以打包很多靜態資源，例如圖片、json文件、ts文件、等。對應的是xxx-loader。
圖片--->url-loader less文件--->less-loader json文件--->json-loader ...
webpack為我們提供了一部分默認的loader，我們也可以自定義loader。
在webpack的loader中，還有一個叫babel-loader。
babel是一個將下一代JS語法翻譯成瀏覽器兼容的JS代碼的一個編譯器。
當瀏覽器版本過低時，可能不支持ES6，這是可以使用babel來將ES6的代碼翻譯成ES5的JS代碼。瀏覽器就能兼容了。
babel官方網站：https://www.babeljs.cn/
其他loader可以參照官方文檔：https://www.webpackjs.com/concepts/loaders/
六、調整項目目錄結構
1.調整目錄結構，並修改配置文件
我們項目的當前目錄結構如下：
所有的文件都在根目錄下，顯得很亂。我們進行一些調整：
我們將所有的源碼放入根目錄下的src目錄。這些文件都是與我們開發有關的。
目錄結構變化了，我們要修改相應的配置文件，主要包含webpack.dev.config.js和webpack.prod.config.js：
// wecpack.dev.config.js // 引入path let path=require('path'); module.exports = { entry: './src/main.js', output: { // path為dist目錄的絕對路徑，這里利用path.resolve將./dist相對路徑轉為絕對路徑 path: path.resolve('./dist'), filename:'bundle.js' }, watch:true, module:{ loaders:[ { // 正則表達式，找所有.css結尾的文件 test:/\.css$/, // 'style-loader!css-loader'的意思是，先使用css-loader解析css文件 // 然后再使用style-loader將其生成<style>標簽或<link>插入index.html的header中 loader:'style-loader!css-loader' } ] } };
主要是修改入口js文件main.js的路徑，以及出口js文件bundle.js的存放路徑，我們添加了一個文件夾./dist（並且path后面的路徑被轉換成了絕對路徑），並配置將bundle.js生成在其中。
同理，wecpack.prod.config.js生產環境配置文件也是修改main.js和bundle.js的路徑。
修改完配置后，重新執行 npm run dev ，可以看到dist目錄已生成，並且bundle.js也被生成在其中：
2.webpack的html插件
在1.中，我們已經自動創建了dist目錄，並且在其中生成了bundle.js。我們希望index.html這種需要發布的文件也在dist目錄中。
我們當然可以使用復制的方式將其放入dist目錄，但是webpack為我們提供了自動化插件。
安裝html插件：
cnpm i html-webpack-plugin -D
官方網站的命令中使用了一個叫 --save-dev 的選項，其簡寫就是 -D 。
在webpack.dev.config.js（以及webpack.prod.config.js）中配置plugins：
// 引入path let path=require('path'); // 引入HtmlWebpackPlugin，我們使用npm或cnpm安裝的包，直接require包名即可導入。如果是我們自己定義的包，則需要寫路徑 let HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.js', output: { // path為dist目錄的絕對路徑，這里利用path.resolve將./dist相對路徑轉為絕對路徑 path: path.resolve('./dist'), filename:'bundle.js' }, watch:true, module:{ loaders:[ { // 正則表達式，找所有.css結尾的文件 test:/\.css$/, // 'style-loader!css-loader'的意思是，先使用css-loader解析css文件 // 然后再使用style-loader將其生成<style>標簽或<link>插入index.html的header中 loader:'style-loader!css-loader' } ] }, plugins:[ new HtmlWebpackPlugin({ template:'./index.html' // 參照物，最終會被放到output指定的dist目錄中去 }) ] };
配置完后，重新運行 npm run dev ，報錯：
Module not found: Error: Can't resolve 'index.css'
重新安裝css-loader和style-loader，問題解決：
cnpm i css-loader -D
cnpm i style-loader -D
再次運行 npm run dev ，發現在dist目錄中生成了index.html和bundle.js文件：
打開生成的index.html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>INDEX</title> </head> <body> <div id="app"></div> <script src="./bundle.js"></script> <script type="text/javascript" src="bundle.js"></script></body> </html>
發現bundle.js被導入了兩次，第一次是我們自己在index.html中引入的，這就說明，我們在打開index.html的時候，無需自己引入bundle.js，而由webpack來自動引入即可。
3.發布所需的目錄
在前面自動生成的dist目錄中包含了index.html文件以及bundle.js文件，這些文件就是我們發布項目所需要的文件。
所以，我們希望把所有發布所需的文件都放在dist目錄中（目錄名自己取），然后在發布的時候，直接將該目錄交給運維人員即可。
七、使用vue后綴文件
1.將js修改為vue文件
安裝vue-loader和vue-template-compiler：
(venv) D:\pycharm_workspace\vue_learn\es6module>cnpm i vue-loader@14.1.1 vue-template-compiler@2.5.17 -D √ Installed 2 packages √ Linked 35 latest versions √ Run 0 scripts √ All packages installed (24 packages installed from npm registry, used 5s(network 5s), speed 577.42kB/s, json 37(146.78kB), tarball 2.87MB)
其中vue-loader是用來解析*.vue文件的。vue-template-compiler是用來解析vue文件中的tempalte模板的。
此時，我們將我們開發的組件js文件全部修改為vue文件：
// App.js修改為App.vue <template> <div>我是App組件</div> </template> <script> export default { name:'App', data(){ return {} }, methods:{ } } </script> <style> </style>
vue文件中的<template>標簽相當於組件中的template屬性的內容，<script>中export default的對象，就相當於組件對象（除去template的部分）。
2.再次修改項目目錄
當我們的組件都是vue文件后。我們修改src中的目錄結構：
這樣，我們所有的組件都以vue格式文件的形式分門別類的存放在對應的目錄中。
當然，在main.js中導入vue文件的路徑也要相應變化：
// main.js import Vue from './vue.js' import App from './components/App/App.vue' import Home from './components/Home/Home.vue' import './index.css' new Vue({ el: "#app", data() { return { msg: '我是vue實例' } }, // 掛載App組件 components:{ App }, // 在這里是用App組件 template: ` <div> <App></App> 新加一個App組件：<App></App> </div> ` })
5.在項目中安裝vue.js和vue-router.js
之前我們使用vue.js和vue-router.js都是我們手工下載的js文件，然后手工導入使用。
我們也可以使用npm或cnpm來直接安裝：
(venv) D:\pycharm_workspace\vue_learn\es6module>cnpm i vue vue-router -S √ Installed 2 packages √ Linked 0 latest versions √ Run 0 scripts √ All packages installed (2 packages installed from npm registry, used 2s(network 2s), speed 463.89kB/s, json 2(35.84kB), tarball 942.5kB)
注意，這里的 -S 表示這兩個包是項目的依賴，缺少就運行不起來。而之前我們安裝為webpack的時候使用 -D 表示開發環境依賴，他們是不同的。
安裝完畢后，我們可以在package.json配置文件中看到如下內容：
"dependencies": { "vue": "^2.6.11", "vue-router": "^3.1.5" }
區別於devDependencies，這里是項目的dependencise。可以看到，vue版本為2.6.11（需要重新安裝 vue-template-compiler@2.6.11，和vue版本一致，否則會報錯），vue-router版本為3.1.5。可以在項目中的node_modules文件夾下找到安裝的包。
此時，我們在main.js中使用vue.js和vue-router.js就需要改變一下：
//import Vue from './vue.js' //import VueRouter from './vue-router.js' //變為： import Vue from 'vue' import VueRouter from 'vue-router'
6.使用vue-router
我們安裝好了vue-router，嘗試使用一下（基本和我們以前使用vue-router是一樣的）：
// main.js import Vue from 'vue' import VueRouter from 'vue-router' import App from './components/App/App.vue' import Home from './components/Home/Home.vue' import './index.css' // 如果基於模塊化機制，這里只用要使用Vue.use(VueRouter) Vue.user(VueRouter) const router = new VueRouter({ routes:[ { path:'/', name:'Home', component:Home } ] }) new Vue({ el: "#app", router, data() { return { msg: '我是vue實例' } }, // 掛載App組件 components:{ App }, // 在這里是用App組件 template: ` <div> <App></App> 新加一個App組件：<App></App> </div> ` })
我們應該在App組件中使用<router-link>和<router-view>：
// App.vue <template> <div> <div>我是App組件</div> <router-link :to="{name:'Home'}">首頁</router-link> <router-view></router-view> </div> </template> <script> export default { name:'App', data(){ return {} }, methods:{ } } </script> <style> </style>
運行 npm run dev ，可能會在控制台打印的內容中發現有如下內容：
No parser and no filepath given, using 'babel'
如果發現有這句內容，則重新安裝一下vue-loader，版本為14.2.4：
cnpm i vue-loader@14.2.4 -D
OK，再次運行 npm run dev ，成功編譯。
此時，訪問頁面：
發現，背景顏色已渲染，但是標簽內容沒有渲染。
F12檢查，發現報錯：
bundle.js:1440 [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. (found in <Root>)
如何解決這個問題：
在main.js的vue實例中，掛載App組件和使用App組件時，我們使用的是components和template屬性，我們將其修改為render屬性：
// main.js import Vue from 'vue' import VueRouter from 'vue-router' import App from './components/App/App.vue' import Home from './components/Home/Home.vue' import './index.css' Vue.use(VueRouter) const router = new VueRouter({ routes:[ { path:'/home', name:'Home', component:Home } ] }) new Vue({ el: "#app", router, data() { return { msg: '我是vue實例' } }, render:c=>c(App) // // 掛載App組件 // components:{ // App // }, // // 在這里是用App組件 // template: ` // <div> // <App></App> // 新加一個App組件：<App></App> // </div> // ` })
使用render來代替components+template。
執行結果：
八、搭建開發環境的webpack-dev-server
1.安裝webpack-dev-server
webpack-dev-server是一個前端的nodejs服務器，方面我們開發調試。
安裝webpack-dev-server：
cnpm i webpack-dev-server@2 -D
這里安裝webpack-dev-server的2.x版本中的最新版。默認安裝3.x，會報錯。
2.配置webpack-dev-server
修改package.json配置文件：
{ "name": "es6module", "version": "1.0.0", "description": "", "main": "src/main.js", "scripts": { "dev": "webpack-dev-server --open --hot --inline --port 9999 --config ./webpack.dev.config.js", "build": "webpack --config ./webpack.prod.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^3.4.2", "html-webpack-plugin": "^3.2.0", "style-loader": "^1.1.3", "vue-loader": "^14.2.4", "vue-template-compiler": "^2.6.11", "webpack": "^3.12.0", "webpack-dev-server": "^2.11.5" }, "dependencies": { "vue": "^2.6.11", "vue-router": "^3.1.5" } }
可以看到devDependencies中多了webpack-dev-server項，版本是2.11.5。
將原本使用的webpack命令更新為webpack-dev-server，並加上參數。
常用配置參數：
--open //自動打開瀏覽器 --hot //熱更新，修改了css、html等文件，自動更新頁面 --inline //自動刷新 --port 9999 //指定監聽端口 --process //顯示編譯進度
運行 npm run dev ，瀏覽器自動打開，並正確顯示頁面：
≧◠◡◠≦✌