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

前言

本篇隨筆主要寫了手動搭建一個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規則，具體代碼如下。

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

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

vue新手入門之使用vue框架搭建用戶登錄註冊案例，手動搭建webpack+Vue項目（附源碼，圖文詳解，親測有效）

前言

隨筆目錄結構：

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

案例視圖展示：

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

1。開發工具

1.1 VScode 任意版本即可

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

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

2。案例分析

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

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

1。準備工作

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

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

1.3 瀏覽login文件夾目錄

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

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

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

1.2 切換到login目錄下

1.3 初始化項目

1.4 安裝vue和vue-router

1.5 安裝webpack

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

1.7 安裝css-loader和style-loader

1.8 安裝Less

1.9 安裝Sass/SCSS

1.10 安裝Stylus

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

1.12 運行項目

1.13 瀏覽器輸入訪問地址

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

1。案例分析

1.1 功能需求分析

1.2 頁面效果展示

1.3 目錄結構

2。準備工作

1.1 初始化項目

1.2 安裝vue和vue-router

1.3 安裝webpack

1.4 修改package.json文件

1.5 編寫webpack.config.js文件

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

1.7 安裝css-loader和style-loader

1.8 安裝CSS預處理器

1.9 安裝Sass/SCSS

1.10 安裝Stylus

1.11 安裝MUI

1.12 圖片和字體文件處理

3。代碼實現

1.1 編寫首頁

1.2 編寫邏輯入口

1.3 編寫路由文件

1.4 渲染路由組件

1.5 編寫登錄頁面

1.6 編寫註冊頁面

1.7 運行項目

1.8 設置導航欄的高亮效果

1.9 編寫App.vue文件

1.10 使用路由的history模式

1.11 更改頁面標題

總結：

參考文檔：

其他隨筆推薦：

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