前言

本篇隨筆主要寫了手動搭建一個webpack+Vue項目，掌握相關loader的安裝與使用，包括css-loader、style-loader、vue-loader、url-loader、sass-loader等，熟悉webpack的配置、文件的打包，以及路由的配置及使用。

作為自己對Vwebpack+Vue項目搭建知識的總結與筆記。

因內容有案例解讀，代碼實現，導致篇幅稍長，大約3分鐘可以瀏覽完，如有需要的話（請筆友耐心看完，也可按目錄查找所需內容）

百度網盤鏈接，案例源碼獲取地址：

 鏈接：https://pan.baidu.com/s/1JCKEn8gQl6sbSz7JERoKFQ?pwd=1234
提取碼：1234

隨筆目錄結構：

PS: 點擊上述標題後 -->  這個標誌可以瀏覽目錄結構，以便快速定位需要的內容

用戶登錄註冊案例動圖展示：

案例視圖展示：

登錄頁面

註冊頁面

一、搭建項目開發環境（建議使用Node 8.12.0 版本）

1。開發工具

最主要的是Node 8.12.0 版本，版本衝突最少，當然最好是8.12.0 版本，其他版本也可以，不過需要調試錯誤。

這裡隨筆基於Node 8.12.0 版本，可以無衝突安裝，一路Next到最後運行。

1.1 VScode 任意版本即可

1.2 Node多版本管理工具gnvm （也可不裝）

 此工具是管理Node版本的，方便開發，誰用誰爽，前端工程師都知道它

建議安裝，因為項目搭建需要更改node版本，以便與解決node和npm、webpack等工具的版本衝突，具體的安裝步驟請參考如下博文：

Node多版本管理工具gnvm的安裝：https://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html

1.3 Node 8.12.0 版本（未使用gnvm版本管理工具的，如有其他版本可能需要卸載掉，再安裝8.12.0版本）

（1）如果參考上一步驟下載了gnvm,並且安裝了Node 8.12.0 版本，可跳到下一步驟

Node多版本管理工具gnvm的安裝：https://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html

（2）如果未安裝Node多版本管理工具gnvm，可以直接從以下地址獲取（推薦安裝gnvm）：

百度網盤鏈接，案例源碼獲取地址：

 鏈接：https://pan.baidu.com/s/1JCKEn8gQl6sbSz7JERoKFQ?pwd=1234
提取碼：1234

2。案例分析

1.1案例的目錄結構如下圖所示。

二、快速搭建項目（在我給的login項目框架進行測試）

1。準備工作

1.1  先獲取login項目文件夾（地址如下）

百度網盤鏈接，案例源碼獲取地址：

 鏈接：https://pan.baidu.com/s/1JCKEn8gQl6sbSz7JERoKFQ?pwd=1234
提取碼：1234

1.2 將login項目文件放在一個新建文件夾里（例如：D:\allcode\classcode\vuecode\testcode\test1\test506）

1.3 瀏覽login文件夾目錄

1.4 使用VScode編譯工具打開login文件所在目錄（如下圖）

2。執行命令，開啟配置運行環境

註：以下配置，不出意外的話，較為舒適，一路綠燈，直接到項目運行成功，有著極大的自豪感（敬請期待！）

1.1 打開新建終端（這裡我的終端改成  gitbash 格式了 但方法環境相同 不影響）

 查看node 版本是否正確

輸入命令 

node -v 

1.2 切換到login目錄下

輸入命令 (註意查看自己的login文件夾目錄)

cd test506

cd login

1.3 初始化項目

輸入命令 

npm init -y

1.4 安裝vue和vue-router

輸入命令 

npm install [email protected] [email protected]

1.5 安裝webpack

輸入命令 

npm install [email protected] [email protected] [email protected] [email protected] -D

1.6 安裝vue-loader和vue-template-compiler

輸入命令 

npm install [email protected] [email protected] -D

1.7 安裝css-loader和style-loader

輸入命令 

npm install [email protected] [email protected] -D

1.8 安裝Less

輸入命令 

npm install less less-loader -D

1.9 安裝Sass/SCSS

輸入命令 

npm install [email protected] [email protected] -D

1.10 安裝Stylus

輸入命令 

npm install stylus stylus-loader -D

1.11 安裝file-loader和url-loader 做圖片和字體文件處理

輸入命令 

npm install [email protected] [email protected] -D

1.12 運行項目

輸入命令 

npm run dev

1.13 瀏覽器輸入訪問地址

輸入命令 

http://localhost:8088

登錄頁面

註冊頁面

至此，先恭喜你了！項目運行成功，如詳細源碼分析和步驟詳解，請繼續往下看

三、login項目源碼分析和步驟詳解（建議參考login文件夾進行分析）

1。案例分析

提前學習：Vue框架中路由地址：https://www.cnblogs.com/zbcxy506/p/note_1vue-06.html

學習了vue-router的基礎知識後，接著學習如何將vue-router應用到項目開發中。

通過此次的學習，筆友將會掌握如何自己動手搭建一個webpack+Vue項目，掌握相關loader的安裝與使用，包括css-loader、style-loader、vue-loader、url-loader、sass-loader等，熟悉webpack的配置、文件的打包，以及路由的配置及使用。

1.1 功能需求分析

 登錄和註冊是項目開發中經常遇到的功能需求，在網頁中需要用戶登錄後才可以使用某些功能，如中國移動APP，在用戶登錄成功後才可以查看流量和話費餘額等信息。

1.2 頁面效果展示

 登錄頁面

註冊頁面

1.3 目錄結構

2。準備工作

1.1 初始化項目

 創建D:\vuecode\testcode\login目錄，在命令行中切換到該目錄，執行以下命令。

npm init –y // 選項“-y”表示全部使用預設

執行完上述代碼，會在login目錄下自動生成一個package.json工程文件（項目依賴、名稱、配置），會記錄需要的依賴包。另外，讀者也可以省略選項“-y”，此時程式會提示輸入項目的一些基本信息。

1.2 安裝vue和vue-router

 在login目錄下執行如下命令，安裝vue和vue-router。

npm install [email protected] [email protected]

安裝完成之後，會在當前目錄下自動生成一個package-lock.json文件。

1.3 安裝webpack

 項目中需要打包文件，所以需要用到webpack打包工具，實現自動打包編譯功能。為了更方便地使用webpack，還需要安裝webpack-cli工具、webpack-dev-server伺服器和html-webpack-plugin插件。具體安裝命令如下：

npm install [email protected] [email protected] [email protected] [email protected] -D

 上述命令中，-D表示安裝到本地開發依賴，也可以使用--save-dev來代替。

1.4 修改package.json文件

 在scripts中添加dev，使用webpack-dev-server來啟動項目，具體代碼如下。

"scripts": {
……（原有代碼）
"dev": "webpack-dev-server --inline --hot --port 8088"
},

 添加上述代碼後，當需要運行項目時，可以執行npmrun dev命令。

1.5 編寫webpack.config.js文件

 創建webpack.config.js文件，在文件中配置webpack的選項，設置入口文件、出口文件以及一些規則配置，具體代碼如下。

consthtmlWebpackPlugin= require('html-webpack-plugin')
module.exports= {
entry: './main.js', // 配置入口文件
output: { // 配置輸出文件
path: __dirname, // 輸出文件的路徑，此處設為當前路徑
filename: 'bundle.js',// 指定輸出的文件名稱
},
resolve: {}, // 其他的配置選項
module: { rules: [] } , // 模塊規則
plugins: []// 插件
}

1.6 安裝vue-loader和vue-template-compiler

 vue-loader作用是解析和轉換vue文件，提取出其中的script、style、HTML、template，然後分別把它們交給各自相對應的loader去處理。vue-template-compiler的作用是把vue-loader提取出的HTML模板編譯成對應的可執行的JavaScript代碼。

具體命令如下。

npm install [email protected] [email protected] -D

 安裝後，將vue-loader插件添加到webpack.config.js文件中，示例代碼如下。

constVueLoaderPlugin= require('vue-loader/lib/plugin')
module.exports= {
……
plugins: [
……
new VueLoaderPlugin()
]

 然後在module.exports中找到module，在rules數組中配置loader載入依賴。

輸入命令 

module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
// 在此處可以添加更多rules
]
},

1.7 安裝css-loader和style-loader

 css-loader和style-loader用來處理樣式文件。css-loader用於載入由vue-loader提取出的CSS文件，再用style-loader添加到頁面中。具體安裝命令如下。

輸入命令 

npm install [email protected] [email protected] -D

 安裝後，在webpack.config.js文件中添加rules規則，具體代碼如下。

1.8 安裝CSS預處理器

通過CSS預處理器可以使用專門的編程語言來編寫頁面的樣式，然後編譯成正常的CSS文件，供項目使用。CSS預處理器為CSS增加了一些編程的特性，用戶無須考慮瀏覽器的相容性問題，可以使CSS更加簡潔、更具有適用性和可讀性，更易於代碼的維護。

Vue中常用的CSS預處理器包括Less、Sass/SCSS和Stylus，下麵我們分別講解如何進行安裝。需要註意的是，在本項目中只用到了Sass/SCSS，必須進行安裝，而另外兩個CSS預處理器讀者可根據自己的需要來決定是否安裝。

安裝Less，具體命令如下。

npm install less less-loader -D

 然後在webpack.config.js文件中添加rules規則，具體代碼如下。

{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},

安裝後，在頁面中使用Less的地方給<style>添加lang屬性即可，示例代碼如下。

<style lang="less"></style>

 1.9 安裝Sass/SCSS

安裝Sass/SCSS，具體命令如下。

npm install [email protected] [email protected] -D

然後在webpack.config.js文件中添加rules規則，具體代碼如下。

{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},

安裝後，在頁面中使用SCSS的地方給<style>添加lang屬性即可，示例代碼如下。

<style lang="scss"></style>

 1.10 安裝Stylus

安裝Stylus，具體命令如下。

npm install stylus stylus-loader -D

Stylus安裝完成之後，在Vue 2.x中不需要配置就可以直接使用，在頁面中使用Stylus的地方給<style>添加lang屬性即可，示例代碼如下。

<style lang="stylus"></style>

1.11 安裝MUI

MUI是由DCloud（數字天堂）推出的一款接近原生APP體驗的高性能前端框架，在本項目中主要用來快速搭建登錄和註冊頁面。讀者需要從官方網站下載MUI，本書使用的版本是mui-3.7.1.zip。下載後，將文件解壓出來，然後把dist目錄下的所有文件複製到項目的lib\mui目錄中。

將MUI安裝後，可以在main.js文件中使用如下代碼引入。

import './lib/mui/css/mui.css'

1.12 圖片和字體文件處理

 考慮到項目中使用了外部的MUI樣式庫，其中包含尾碼名為ttf的文件，webpack無法處理該類文件，所以需要安裝相應的loader去處理。

file-loader和url-loader都可以在webpack中處理圖片、字體圖標等文件，後者可以將圖片轉為base64字元串，能更快地去載入圖片，並且可以通過limit屬性對圖片分情況處理，當圖片小於limit（單位byte）大小時轉為base64，大於limit時調用file-loader對圖片進行處理。

安裝file-loader和url-loader，具體命令如下。

npm install [email protected] [email protected] -D

然後在webpack.config.js文件中添加rules規則，具體代碼如下。

{
test: /\.(jpg|png|gif|bmp|jpeg)$/,
use: 'url-loader'
},
{
test: /\.(ttf|eot|svg|woff|woff2)$/,
use: 'url-loader'
},

3。代碼實現

1.1 編寫首頁

創建首頁index.html文件，用來展示頁面，具體代碼如下。

<body>
<div id="app"></div>
</body>

1.2 編寫邏輯入口

創建邏輯入口main.js文件，主要用來初始化Vue實例並載入需要的插件及各種公共組件，如vue-router、mui、App.vue等，具體代碼如下。

import Vuefrom 'vue' // 引入vue.js
import app from './App.vue' // 引入App.vue組件
import VueRouterfrom 'vue-router' // 引入router. js組件
Vue.use(VueRouter) // 安裝vue-router路由模塊
import router from './router.js' // 將路由放到單獨的文件中
import './lib/mui/css/mui.css'
new Vue({ // 初始化Vue實例
el: '#app', // 將el掛載到index.html文件的<div id="app">
render: c => c(app), // 使用render函數渲染App.vue組件
router // 將router.js文件中導出的router對象註冊到Vue實例上
})

1.3 編寫路由文件

 創建router.js文件，該文件是一個單獨的路由文件。在後面的步驟中將會創建Login.vue（登錄）和Register.vue（註冊）兩個組件，所以需要在路由文件中導入這兩個組件，並配置相應的路由規則。具體代碼如下。

import VueRouterfrom 'vue-router'
// 導入登錄和註冊對應的路由組件
import Login from './components/Login.vue'
import Register from './components/Register.vue'
varrouter = new VueRouter({// 創建路由對象
routes: [// 配置路由規則
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{ path: '/register', component: Register }
]
})
export default router

1.4 渲染路由組件

創建App.vue文件，該文件是項目的根組件（或者叫作主組件），所有頁面都是在App.vue下進行切換的。例如，可以定義公共的樣式或者動畫等。具體代碼如下。

<template>
<div id="app">
<div class="login-container">
<router-link to="/login" tag="span">登錄</router-link>
<router-link to="/register" tag="span">註冊</router-link>
</div>
<router-view></router-view>
</div>
</template>
<style lang="scss" scoped></style>
// scoped表示CSS樣式只能作用於當前的組件

1.5 編寫登錄頁面

創建components\Login.vue文件，該文件是登錄頁面，在頁面中提供一個用戶登錄的表單。具體代碼如下。

<template>
<div class="login">
<div class="content">
<form class="mui-input-group login-form">
<div class="mui-input-row"><label>賬號</label><input></div>
<div class="mui-input-row"><label>密碼</label><input></div>
</form>
<div><button type="button">登錄</button></div>
</div>
</div>
</template>
<style scoped></style>

 註意：上述代碼可以看出，一個單獨的組件文件通常應包含<template>模板、<script>邏輯以及<style>樣式3部分代碼。其中，<script>和<style>可以省略，但<template>不要省略，否則Vue會出現警告。

1.6 編寫註冊頁面

創建components\Register.vue文件，該文件是註冊頁面，在頁面中提供一個用戶註冊的表單。具體代碼如下。

<template>
<div class="register">
<div class="content">
<form class="mui-input-group login-form">
<div class="mui-input-row"><label>賬號</label><input></div>
<div class="mui-input-row"><label>密碼</label><input></div>
…
</form>
<div><button type="button">註冊</button></div>
</div>
</div>
</template>

1.7 運行項目

在命令行中切換到項目根目錄下，執行如下命令運行程式

npm run dev

 當控制臺中出現Compiled successfully時表示編譯完成，項目已經啟動了，然後在瀏覽器中打開http://localhost:8088，頁面效果如下圖所示。

1.8 設置導航欄的高亮效果

在上圖中，單擊頂部的“登錄”和“註冊”可以在兩個頁面之間切換，但由於此時還沒有設置樣式，導航欄並沒有高亮效果。預設情況下，路由的導航菜單會自動添加router-link-exact-active和router-link-active這兩個class屬性，想要設置導航欄的高亮效果，只要在App.vue文件中設置兩個class對應的樣式即可，如下圖所示。

 註意：router-link-exact-active和router-link-active兩者的區別在於，前者是精確匹配規則，只有完全匹配的情況下有效，而後者是非精確匹配規則，只要定義在path中的路徑與當前路徑的開頭一致就有效。

另外，router-link-exact-active和router-link-active這兩個class類名也可以自定義，下麵在router.js文件中找到創建路由實例代碼，添加自定義class，具體代碼如下。

varrouter = new VueRouter({
linkActiveClass: 'my-active', // router-link-active
linkExactActiveClass: 'my-exact-active', // router-link-exact-active
……（原有代碼）
})

1.9 編寫App.vue文件

然後在App.vue中添加導航欄高亮效果的樣式，具體代碼如下

<style lang="scss" scoped>
.my-active, .my-exact-active {
background: #007aff;
font-weight: 800;
color: #fff;
}
……（原有代碼）
</script>

 在瀏覽器中查看運行結果（導航欄激活效果），頁面效果如下圖所示。

1.10 使用路由的history模式

路由的history模式可以使項目的URL地址更加簡潔。若要使用history模式，需要先修改router.js文件，具體代碼如下。

varrouter = new VueRouter({
mode: 'history',// 使用history模式
……（原有代碼）
}

 history模式還需要伺服器的支持，打開webpack.config.js文件，在module.exports對象中添加devServer的配置，具體代碼如下。

devServer: {
historyApiFallback: true// 開啟伺服器對history模式支持
},

 當開啟history模式後，重新執行npm run dev，就可以使用http://localhost:8088/login來訪問登錄頁面，使用http://localhost:8088/register來訪問註冊頁面。

1.11 更改頁面標題

當頁面切換後，網頁的標題也應隨之發生變化，為了實現這個效果，可以在路由中將每個頁面對應的標題保存在meta中。修改router.js文件，如下所示。

routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login, meta: { title: '登錄' } },
{ path: '/register', component: Register, meta: { title: '註冊' } }
]

 然後需要調用router.beforeEach()全局鉤子函數，用來在路由發生改變時動態修改網頁的title標題，它會在路由改變前執行。具體代碼如下。

router.beforeEach((to, from, next) => {
// 路由發生改變修改頁面title
if (to.meta.title) {
document.title= to.meta.title
}
next()
})

總結：

通過以上的學習，各位筆友應該理解瞭如何手動搭建一個webpack+Vue項目，掌握了相關loader的安裝與使用，包括css-loader、style-loader、vue-loader、url-loader、sass-loader等，熟悉webpack的配置、文件的打包，以及路由的配置及使用。

碼字不易，認為樓主寫的還不錯，對你有幫助的話，請給個三連（關註、點贊、收藏）另外有問題可評論區留言討論。

後期會完善Vue進階語法的相關知識，有幫助的話，敬請關註樓主 持續更新中ing 。。。（不定時發文）

轉載時請註明出處鏈接

百度網盤鏈接，案例源碼獲取地址：

 鏈接：https://pan.baidu.com/s/1JCKEn8gQl6sbSz7JERoKFQ?pwd=1234
提取碼：1234

參考文檔：

 1.vue官方文檔：Vue.js (vuejs.org)

 2.傳智播客-黑馬程式員（教材）：http://stu.ityxb.com/

其他隨筆推薦：

1. 十大排序演算法（Java實現）（作者力推）：https://www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html

2. Vue開發環境的部署：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-01.html

3. Vue基礎入門一：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-02.html

4. Vue基礎入門二：https://www.cnblogs.com/zbcxy506/p/note_1vue-03.html

5. Vue基礎知識思維導圖：https://www.cnblogs.com/zbcxy506/p/note_1vue-04.html

6.Vue動畫和過渡效果：https://www.cnblogs.com/zbcxy506/p/note_1vue-05.html

7.Vue框架中的路由：https://www.cnblogs.com/zbcxy506/p/note_1vue-06.html

8.Node多版本管理工具GNVM：https://www.cnblogs.com/zbcxy506/p/note_1vuegnvm-07.html

本文來自博客園，作者：智博程式園，轉載請註明原文鏈接，謝謝配合：https://www.cnblogs.com/zbcxy506/p/note_1vue-08.html