by yugasun from https://yugasun.com/post/you-may-not-know-vuejs-5.html
本文可全文轉(zhuǎn)載海渊，但需要保留原作者和出處彰居。
開發(fā)環(huán)境
既然是實戰(zhàn)，怎離不開項目開發(fā)的環(huán)境呢趣些？先給大家推薦下我的個人開發(fā)環(huán)境：
硬件設(shè)備：Mac OSX
編譯器：Visual Studio Code
命令行工具：iTerm2
調(diào)試工具：Chrome Dev tool + vue-devtools
版本管理：Git
具體工具的操作界面和如何使用，這里就不展示了荒揣。隨便用搜索引擎搜索剧浸，就是相關(guān)介紹。大家可以根據(jù)個人喜好盛卡，來選擇適合你的開發(fā)環(huán)境助隧。
模塊化開發(fā)
前面的文章中使用 Vue，都是直接引入源碼方式來使用滑沧，但是實際開發(fā)中項目一般很復(fù)雜并村，并且會涉及到很多頁面模板，不可能所有的功能我們都寫在同一個js文件滓技，然后在通過 script 標(biāo)簽引入哩牍，這樣項目大了會越來越不易維護(hù)，所以項目需要模塊化開發(fā)令漂。
關(guān)于什么事模塊化膝昆，具體如何模塊化構(gòu)架我們的項目丸边，推薦閱讀 JavaScript 模塊化入門Ⅰ：理解模塊 和 JavaScript 模塊化入門Ⅱ：模塊打包構(gòu)建。
當(dāng)項目代碼多了荚孵，我們的模塊文件越來越多妹窖，就需要工具來幫助我們更好的管理和打包這些模塊，讓我們能更好的關(guān)注模塊化開發(fā)处窥，而不是這些瑣碎的事情嘱吗。于是 webpack 類似的工具就應(yīng)運而生，當(dāng)然除了 webpack 還有很多類似的工具滔驾，他們各有各的優(yōu)點谒麦，比如：rollup、parcel...哆致。
今后文章所有的實例將用到 webpack 的 3.x 版本工具來結(jié)合Vue 完成開發(fā)工作绕德。
初始 webpack
這里不得不說一下，很多朋友在開發(fā) Vue 項目的時候摊阀，一上來就使用 vue-cli 腳手架工具開發(fā)項目耻蛇，雖然可以很快的構(gòu)建項目模板，不用關(guān)注初始化配置問題胞此。但是我不建議這么做臣咖，因為一上來就是 vuejs + webpack + es6 + babel + eslint... 等各種工具，有人都還不知道他們是什么漱牵，就開始用夺蛇。出了問題，就不知道如何是好酣胀。雖然借助搜索引擎可以幫助我們解決80%的難題刁赦，但還是需要花費大量的精力去搜索查詢，不斷的嘗試闻镶，等問題解決了甚脉，一天就過去了，得不償失啊铆农。
所以我建議先從學(xué)會使用 webpack 開始牺氨，一步一步的引入進(jìn)來，會容易接受一些顿涣。畢竟這世界上大多數(shù)人都不是天才波闹，要學(xué)會跑，得先學(xué)會走路涛碑。
雖然當(dāng)前社會比較浮躁精堕，但是擁有一顆寧靜的心，腳踏實地蒲障，才是成功之道啊~
好了廢話不多說歹篓，直接進(jìn)入今天的正題瘫证，使用 webpack 愉快的進(jìn)行 Vuejs 項目開發(fā)。
在閱讀下面代碼之前庄撮，請?zhí)崆笆煜?nodejs 模塊的使用背捌，包括基本的通過 npm 安裝模塊依賴和如何引入第三方模塊使用，這里雖然會提到洞斯，但不會詳細(xì)解釋毡庆。
我們先新建一個項目文件夾，在根目錄下新建 index.html烙如，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue webpack demo</title>
</head>
<body>
<div id="app"></div>
<script src="./build.js"></script>
</body>
</html>
命令行運行 npm init么抗，按照交互提示，填寫項目相關(guān)信息（當(dāng)然都是英文亚铁，不懂得直接翻一下就明白了）蝇刀，填寫完成后，項目根目錄下會出現(xiàn) package.json 文件（關(guān)于package.json文件內(nèi)容具體介紹徘溢，可以閱讀這篇文章：package.json文件）吞琐。然后通過 npm 安裝我們需要的 vue 庫：
# 添加 --save 參數(shù)，會將 vue 依賴添加到 package.json 文件中
npm install vue --save
然后新建一個 src 目錄然爆，在 src 目錄下創(chuàng)建一個 app.js 入口文件站粟，代碼如下：
// 模塊化的引入 vue，并將其賦值給 Vue 變量
var Vue = require('vue')
new Vue({
el: "#app",
template: "<h1>{{ msg }}</h1>",
data () {
return {
msg: 'Hello Vue.js'
}
}
})
當(dāng)然 require 函數(shù)瀏覽器是無法識別的曾雕，這是就需要通過 webpack 幫我們實現(xiàn)編譯打包工作卒蘸，轉(zhuǎn)化為主流瀏覽器可是別的 ES5 代碼。
先安裝 webpack 包依賴：
# 添加 --save-dev 參數(shù)翻默，會將 webpack 開發(fā)依賴添加到 package.json 文件中
npm install webpack --save-dev
然后在項目根目錄下創(chuàng)建 webpack.config.js 文件，代碼如下：
module.exports = {
// 入口文件
entry: './src/app.js',
// 編譯輸出文件
output: {
filename: 'build.js'
},
resolve: {
alias: {
// 因為我們這里用的是 require 引入方式恰起，所以應(yīng)該使用vue.common.js/vue.js/vue.min.js
'vue$': 'vue/dist/vue.common.js'
}
}
}
因為上面的 index.html 中引入的是編譯后的 build.js 文件修械，要看到開發(fā)效果，就需要手動運行 webpack 打包命令：
./node_modules/.bin/webpack
這里如果你想直接運行
webpack检盼，那么就需要你的電腦全局安裝 webpack肯污，可以通過運行npm install webpack -g命令來全局安裝。
然后你會看到輸出以下結(jié)果：
$ webpack
Hash: 8a61c2605578f38f46cd
Version: webpack 3.10.0
Time: 386ms
Asset Size Chunks Chunk Names
build.js 104 kB 0 [emitted] main
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[1] ./src/app.js 148 bytes {0} [built]
+ 4 hidden modules
此時根目錄下就會出現(xiàn) build.js 文件吨枉，我們再通過瀏覽器打開 index.html 文件蹦渣，熟悉的畫面出現(xiàn)了，Hello Vue.js貌亭。
到這里一個簡單的基于 vue + webpack 的項目就構(gòu)建完成了柬唯，是不是很簡單，迫不及待想自己動手試試呢圃庭？當(dāng)然 webpack 的功能遠(yuǎn)不止如此更詳細(xì)的功能锄奢，請閱讀 官方文檔失晴，全面的了解下 webpack 的強大。
實時重新加載(live reloading)
上面的例子還有個問題拘央，就是每次我們更新了代碼涂屁，就需要重新進(jìn)行打包編譯，并手動刷新瀏覽器灰伟，才能看到我們更改的效果拆又，實在是太麻煩了。webpack 作者也考慮到了這個問題栏账，于是同時開發(fā)了 webpack-dev-server 工具帖族，來幫助我們實現(xiàn) live reloading 的功能，也就是當(dāng)我們更新代碼時发笔，瀏覽器會實時刷新盟萨，呈現(xiàn)更新后的效果。
趕緊用起來~ 先安裝下依賴：
npm install webpack-dev-server --save-dev
然后修改 webpack.config.js 配置文件如下：
module.exports = {
// 入口文件
entry: './src/app.js',
// 編譯輸出文件
output: {
filename: 'build.js'
},
resolve: {
alias: {
// 因為我們這里用的是 require 引入方式了讨，所以應(yīng)該使用vue.common.js/vue.js/vue.min.js
'vue$': 'vue/dist/vue.common.js'
}
},
// 這里添加的是有關(guān) webpack-dev-server 的配置
devServer: {
// 這里定義 webpack-dev-server 開啟的web服務(wù)的根目錄
contentBase: './'
}
}
然后執(zhí)行命令：
./node_modules/.bin/webpack-dev-server
控制臺會輸出一下內(nèi)容：
$ ./node_modules/.bin/webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./
Hash: d33155f6797f2c78c448
Version: webpack 3.10.0
Time: 903ms
Asset Size Chunks Chunk Names
build.js 627 kB 0 [emitted] [big] main
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js 40 bytes {0} [built]
[4] (webpack)-dev-server/client?http://localhost:8080 7.91 kB {0} [built]
...
[28] ./node_modules/timers-browserify/main.js 1.9 kB {0} [built]
+ 15 hidden modules
webpack: Compiled successfully.
打開瀏覽器捻激，訪問： http://localhost:8080，此時我們熟悉的畫面又出現(xiàn)了前计，O(∩_∩)O~~胞谭。我們再嘗試修改 app.js 中 msg 內(nèi)容，瀏覽器的內(nèi)容也會跟著變化男杈，是不是很酷丈屹，趕緊動手試試吧。
使用 npm 腳本
針對上面的打包命令 ./node_modules/.bin/webpack 和實時開發(fā)命令 ./node_modules/.bin/webpack-dev-server伶棒，雖然你可以很快的在命令行復(fù)制粘貼輸入旺垒，但是第一次還是免不了動手輸入。作為一個懶惰的程序員肤无，怎么能接受敲擊這么多多余的字符呢先蒋？正好package.json 文件中 scripts 字段就可以幫助我們解決這個煩惱。
先來看下介紹：
scripts 是用來指定運行腳本命令的npm命令行縮寫的宛渐，比如 start 指定了運行
npm run start時竞漾，所要執(zhí)行的相關(guān)命令。
好的窥翩，既然明白了它的作用业岁，我們就來嘗試改寫 package.json 文件，修改 scripts 字段為如下內(nèi)容：
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
}
然后寇蚊，在命令行輸入：
npm run dev
你會發(fā)現(xiàn)跟執(zhí)行 ./node_modules/.bin/webpack-dev-server 是一樣的效果笔时。
注意：這里在
scripts中指定webpack-dev-server命令是，省去了命令路徑幔荒，這是因為糊闽，npm 在執(zhí)行腳本時梳玫，會默認(rèn)優(yōu)先執(zhí)行當(dāng)前目錄下./node_modules/.bin/中的命令，如果找不到該命令右犹，則會執(zhí)行全局命令提澎。
同理，執(zhí)行 npm run build 就是打包輸出我們想要的 build.js 文件念链。
CSS預(yù)處理器
雖然 css 已經(jīng)足夠強大盼忌，但是在程序員眼里，它一直是個很麻煩的東西掂墓，它沒有變量谦纱，也沒有條件語句，只是單純的一行行的描述君编，寫起來相當(dāng)麻煩跨嘉。于是各種 CSS預(yù)處理器 應(yīng)運而生，其中我最喜歡的是 SASS吃嘿，使用 sass 語法編寫我們的樣式文件祠乃，會大大提高我們的開發(fā)效率，使得 css 工程化變得容易了很多兑燥。
接下來介紹下亮瓷，如何集成到我們的項目中。
對于 webpack 來說 一切皆模塊降瞳，所有的文件通過模塊引入的方式形成依賴關(guān)系嘱支，而對于每個模塊的引入或預(yù)處理，都是通過 loader 來實現(xiàn)了挣饥。因為我們的 sass 語法瀏覽器是無法識別的除师，所以在引入時需要使用相關(guān) loader 對其進(jìn)項預(yù)處理，轉(zhuǎn)化為相應(yīng)的 css扔枫。雖然 css 瀏覽器可以識別的馍盟，但是 webpack 本質(zhì)上是一個 javascript 應(yīng)用程序的靜態(tài)模塊打包器，一切文件內(nèi)容都將處理為 javascript茧吊，然后進(jìn)行后期的處理。所以這里除了需要預(yù)處理 sass 的 loader八毯，還需要加載 css 的 loader搓侄，最后還需要通過 style-loader 來轉(zhuǎn)化為通過 js 的方式動態(tài)創(chuàng)建 style 標(biāo)簽到 index.html 中。
知道了這點话速，我們就知道要怎么做了讶踪，首先安裝所需的 loader:
# 因為 `sass-loader` 需要依賴 `node-sass`, 所以這里一并安裝
npm install style-loader css-loader sass-loader node-sass --save-dev
修改 webpack.config.js 配置文件，添加相關(guān) loader 配置：
module.exports = {
//...
module: {
// 這里用來配置處理不同后綴文件所使用的loader
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
}
]
}
}
webpack 的 loader 是支持鏈?zhǔn)絺鬟f的泊交，它能夠?qū)Y源使用流水線(pipline)式處理乳讥，一組鏈?zhǔn)降?loader 將按照相反順序依次處理柱查，這里的處理流程就是：
sass-loader -> css-loader => style-loader
配置好了，我們現(xiàn)在來測試下云石，在 src 目錄下創(chuàng)建一個 app.scss 文件唉工，內(nèi)容如下：
$red: rgb(218, 42, 42);
h1 {
color: $red;
}
然后在 src/app.js 文件中引入：
require('./app.scss');
var Vue = require('vue');
new Vue({
el: "#app",
template: "<h1>{{ msg }}</h1>",
data () {
return {
msg: 'Hello Vue.js'
}
}
});
此時再運行 npm run dev，你會發(fā)現(xiàn)我們的 h1 標(biāo)簽顏色變了汹忠。通過審核元素淋硝，可以發(fā)現(xiàn) index.html 的 head 標(biāo)簽中新增了一個 style 標(biāo)簽，內(nèi)容就是宽菜，app.scss 編譯輸出的內(nèi)容：
h1 {
color: #da2a2a;
}
如果還不清楚 sass 用法的谣膳，建議去看看這篇基礎(chǔ)介紹文檔：SASS用法指南
圖片加載
既然說到了 css 靜態(tài)資源，自然免不了對于圖片的加載了铅乡。上文說過继谚，在 webpack 中，一切皆模塊阵幸，圖片當(dāng)然也是以模塊的方式引入的花履。既然是模塊，自然少不了相關(guān)引入的 loader侨嘀，這里圖片引入我們使用到的是 url-loader臭挽，先安裝下：
npm install url-loader --save-dev
添加 url-loader 配置：
module.exports = {
// ...
module: {
// 這里用來配置處理不同后綴文件所使用的loader
rules: [
// ...
{
test: /\.(jpe?g|gif|png)$/,
use: 'url-loader'
}
]
}
}
然后再 app.js 中引入：
require('./app.scss');
var Vue = require('vue');
var logoSrc = require('./logo.jpg')
new Vue({
el: "#app",
data () {
return {
msg: 'Hello Vue.js'
}
},
render (h) {
return (
h('div', [
h('img', {
domProps: {
src: logoSrc,
alt: 'logo',
className: 'logo'
}
}),
h('h1', this.msg)
])
)
}
});
這里我們用
render函數(shù)來自定義渲染我們的節(jié)點，它含有默認(rèn)參數(shù)h就是我們 花式渲染目標(biāo)元素 講到的createElement參數(shù)的別名而已咬腕，這里為了書寫簡單欢峰。h函數(shù)的第一個參數(shù)為dom名稱，第二個參數(shù)為創(chuàng)建時配置對象涨共，通過domProps來添加 DOM 相關(guān)的屬性值纽帖。這里將我們引入的logoSrc賦值給它的src屬性。
然后再重新運行 npm run dev举反，頁面中就出現(xiàn)了我們想要的 logo 圖片了懊直。
總結(jié)
知己知彼，百戰(zhàn)不殆火鼻，我們只有真正了解了 webpack 的使用技巧室囊，在實際開發(fā)中，我們才會更加的得心應(yīng)手魁索。不至于被一個莫名其妙的錯誤個嚇到融撞。程序員有三寶：多學(xué)習(xí)，多編寫粗蔚，多總結(jié)尝偎，我們的編程技巧才能才會不斷提高。
