14 微服務電商【黑馬樂優商城】：day06-瞭解vue-router和webpack的使用

時間 2019-11-09

標籤微服黑馬樂優商城 day06 day 瞭解 vue router webpack 使用简体版

原文原文鏈接

本項目的筆記和資料的Download，請點擊這一句話自行獲取。javascript

day01-springboot（理論篇）；day01-springboot（實踐篇）css

day02-springcloud（理論篇一) ；day02-springcloud(理論篇二) ；day02-springcloud(理論篇三) ；day02-springcloud(理論篇四) ；html

day03-springcloud(Hystix，Feign) ；day03-springcloud(Zuul網關）前端

day04-項目搭建（一）； day04-項目搭建（二）； day04-ES6語法入門vue

day05-Vue入門學習java

day06-瞭解vue-router和webpack的使用； day06-初識Vuetify框架UI框架和使用域名訪問本地項目； day06-使用nginx反向代理並掌握cors解決跨域 node

14 微服務電商【黑馬樂優商城】：day06-瞭解vue-router和webpack的使用

0.學習目標webpack

瞭解vue-router使用
瞭解webpack使用
會使用vue-cli搭建項目
導入資料搭建後臺管理系統
會使用nginx進行反向代理

1.路由vue-router

效果：nginx

1.1.5.問題

咱們期待的是，當點擊登陸或註冊按鈕，分別顯示登陸頁或註冊頁，而不是一塊兒顯示。es6

可是，如何才能動態加載組件，實現組件切換呢？

雖然使用原生的Html5和JS也能實現，可是官方推薦咱們使用vue-router模塊。

1.2.vue-router簡介和安裝

使用vue-router和vue能夠很是方便的實現複雜單頁應用的動態路由功能。

官網：https://router.vuejs.org/zh-cn/

經過 Vue.js 能夠實現多視圖的單頁Web應用（single page web application，SPA）

1.2.1 先安裝Node.js

https://nodejs.org/en/download/

1.2.2 再安裝vue-cli項目腳手架

（1）安裝cnpm

以管理員身份打開cmd窗口，使用cnpm的獲取國內鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
(2) 輸入cnpm -v看看是否正常
cnpm -v
在win10環境變量的系統變量path下添加該路徑便可正常使用cnpm

（3）修改npm的資源鏡像連接
npm config set registry http://registry.npm.taobao.org
（4）全局安裝webpack
npm install webpack -g
安裝完成以後能夠輸入webpack -v

（5）全局安裝vue-cli，命令行中輸入:
npm install --g vue-cli
安裝完成以後cd到本身剛纔新建的項目，好比進入的是：cd myvuedemo
進入以後輸入命令：npm install ，這個命令會自動下載項目中全部用到的依賴

使用npm安裝：

npm install vue-router --save

在index.html中引入依賴：

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

1.3.快速入門

新建vue-router對象，而且指定路由規則：

// 建立VueRouter對象
const router = new VueRouter({
    routes:[ // 編寫多個路由規則
        {
            path:"/login", // 請求路徑
            component:loginForm // 組件名稱
        },
        {path:"/register",component:registerForm},
    ]
})

建立VueRouter對象，並指定路由參數
routes：路由規則的數組，能夠指定多個對象，每一個對象是一條路由規則，包含如下屬性：
- path：路由的路徑
- component：組件名稱

1.4.父子組件

在父組件中引入router對象：

var vm = new Vue({
    el:"#app",
    components:{// 引用登陸和註冊組件
        loginForm,
        registerForm
    },
    router // 引用上面定義的router對象
})

頁面跳轉控制：

<div id="app">
    <!--router-link來指定跳轉的路徑-->
    <span><router-link to="/login">登陸</router-link></span>
    <span><router-link to="/register">註冊</router-link></span>
    <hr/>
    <div>
        <!--vue-router的錨點-->
        <router-view></router-view>
    </div>
</div>

經過<router-view>來指定一個錨點，當路由的路徑匹配時，vue-router會自動把對應組件放到錨點位置進行渲染
經過<router-link>指定一個跳轉連接，當點擊時，會觸發vue-router的路由功能，路徑中的hash值會隨之改變

效果：

注意：單頁應用中，頁面的切換並非頁面的跳轉。僅僅是地址最後的hash值變化。

事實上，咱們總共就一個HTML：index.html

2.webpack

2.1.認識webpack

Webpack 是一個前端資源的打包工具，它能夠將js、image、css等資源當成一個模塊進行打包。

中文官方網站：https://www.webpackjs.com/

官網給出的解釋：

爲何須要打包？

將許多碎小文件打包成一個總體，減小單頁面內的衍生請求次數，提升網站效率。
將ES6的高級語法進行轉換編譯，以兼容老版本的瀏覽器。
將代碼打包的同時進行混淆，提升代碼的安全性。

2.2.四個核心概念

學習Webpack，你須要先理解四個核心概念：

入口(entry)

webpack打包的啓點，能夠有一個或多個，通常是js文件。webpack會從啓點文件開始，尋找啓點直接或間接依賴的其它全部的依賴，包括JS、CSS、圖片資源等，做爲未來打包的原始數據
輸出(output)

出口通常包含兩個屬性：path和filename。用來告訴webpack打包的目標文件夾，以及文件的名稱。目的地也能夠有多個。
加載器（loader）

webpack自己只識別Js文件，若是要加載非JS文件，必須指定一些額外的加載器（loader），例如css-loader。而後將這些文件轉爲webpack能處理的有效模塊，最後利用webpack的打包能力去處理。
插件(plugins)

插件能夠擴展webpack的功能，讓webpack不只僅是完成打包，甚至各類更復雜的功能，或者是對打包功能進行優化、壓縮，提升效率。

2.3.安裝

webpack支持全局安裝和本地安裝，官方推薦是本地安裝，咱們按照官方的來。

輸入命令：npm install webpack webpack-cli --save-dev

此時，咱們注意下項目中文件夾下，會有一個package.json文件。

打開文件，能夠看到咱們以前用npm安裝過的文件都會出如今這裏：

2.4.編寫webpack配置

接下來，咱們編寫一個webpack的配置，來指定一些打包的配置項。配置文件的名稱，默認就是webpack.config.js，咱們放到hello-vue的根目錄：

配置文件中就是要指定上面說的四個核心概念，入口、出口、加載器、插件。

不過，加載器和插件是可選的。咱們先編寫入口和出口

2.4.1.入口entry

webpack打包的啓點，能夠有一個或多個，通常是js文件。如今思考一下咱們有沒有一個入口？貌似沒有，咱們全部的東西都集中在index.html，不是一個js，那怎麼辦？

咱們新建一個js，把index.html中的部份內容進行集中，而後在index.html中引用這個js不就OK了！

而後把原來index.html中的js代碼所有移動到main.js中

// 使用es6的語法導入js模塊
import Vue from '../node_modules/vue/dist/vue';
import VueRouter from '../node_modules/vue-router/dist/vue-router'
import loginForm from './js/login'
import registerForm from './js/register'

Vue.use(VueRouter)

// 建立VueRouter對象
const router = new VueRouter({
    routes:[ // 編寫多個路由規則
        {
            path:"/login", // 請求路徑
            component:loginForm // 組件名稱
        },
        {path:"/register",component:registerForm},
    ]
})
var vm = new Vue({
    el:"#app",
    components:{// 引用登陸和註冊組件
        loginForm,
        registerForm
    },
    router
})

原來的index.html中引入了不少其它js，在這裏咱們使用es6的import語法進行導入。

注意，要使用import，就須要在login.js和register.js中添加export導出語句：

const loginForm = {
    template:`
    <div> 
    <h2>登陸頁</h2> 
    用戶名：<input type="text"><br/>
    密碼：<input type="password"><br/>
    </div>
    `
}
export default loginForm;

const registerForm = {
    template:`
    <div>
    <h2>註冊頁</h2> 
    用戶名：<input type="text"><br/>
    密碼：<input type="password"><br/>
    確認密碼：<input type="password"><br/>
    </div>
    `
}
export default registerForm;

vue-router使用模塊化加載後，必須增長一句：Vue.use(VueRouter)

這樣，main.js就成了咱們整個配置的入口了。

咱們在webpack.config.js中添加如下內容：

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
}

2.4.2.出口output

出口，就是輸出的目的地。通常咱們會用一個dist目錄，做爲打包輸出的文件夾。

而後，編寫webpack.config.js，添加出口配置：

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        // path: 輸出的目錄，__dirname是相對於webpack.config.js配置文件的絕對路徑
        path : __dirname+'/dist',  
        filename:'build.js'     //輸出的js文件名
    }
}

2.5.執行打包

在控制檯輸入如下命令：

npx webpack --config webpack.config.js

隨後，查看dist目錄：

嘗試打開build.js，你根本看不懂：

全部的js合併爲1個，而且對變量名進行了隨機打亂，這樣就起到了壓縮、混淆的做用。

2.6.測試運行

在index.html中引入剛剛生成的build.js文件，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--router-link來指定跳轉的路徑-->
        <span><router-link to="/login">登陸</router-link></span>
        <span><router-link to="/register">註冊</router-link></span>
        <hr/>
        <div>
            <!--vue-router的錨點-->
            <router-view></router-view>
        </div>
    </div>
    <script src="../dist/build.js"></script>
</body>
</html>

而後運行：

2.7.打包CSS

2.7.1.編寫css文件

咱們來編寫一段CSS代碼，對index的樣式作一些美化：

內容：

#app a{
    display: inline-block;
    width: 150px;
    line-height: 30px;
    background-color: dodgerblue;
    color: white;
    font-size: 16px;
    text-decoration: none;
}
#app a:hover{
    background-color: whitesmoke;
    color: dodgerblue;
}
#app div{
    width: 300px;
    height: 150px;
}
#app{
    width: 305px;
    border: 1px solid dodgerblue;
}

2.7.2.安裝加載器

前面說過，webpack默認只支持js加載。要加載CSS文件，必須安裝加載器：

命令：

npm install style-loader css-loader --save-dev

此時，在package.json中能看到新安裝的：

2.7.3.在main.js引入css文件

由於入口在main.js，所以css文件也要在這裏引入。依然使用ES6 的模塊語法：

import './css/main.css'

2.7.4.在webpack.config.js添加加載器

module.exports = {
    entry: './src/main.js',  //指定打包的入口文件
    output: {
        path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目錄的絕對路徑
        filename: 'build.js'  //輸出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 經過正則表達式匹配全部以.css後綴的文件
                use: [ // 要使用的加載器，這兩個順序必定不要亂
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

2.7.5.從新打包

再次輸入打包指令：npx webpack --config webpack.config.js

效果：

2.8.script腳本

咱們每次使用npm安裝，都會在package.json中留下痕跡，事實上，package.json中不只能夠記錄安裝的內容，還可編寫腳本，讓咱們運行命令更加快捷。

咱們能夠把webpack的命令編入其中：

之後，若是要打包，就能夠直接輸入：npm run build便可。

npm run ：執行npm腳本，後面跟的是腳本的名稱build

2.9.打包HTML

以前的打包過程當中，除了HTML文件外的其它文件都被打包了，當在線上部署時，咱們還得本身複製HTML到dist，而後手動添加生成的js到HTML中，這很是不友好。

webpack中的一個插件：html-webpack-plugin，能夠解決這個問題。

1）安裝插件：npm install --save-dev html-webpack-plugin

須要在webpack.config.js中添加插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',  //指定打包的入口文件
    output: {
        path: __dirname + '/dist',  // 注意：__dirname表示webpack.config.js所在目錄的絕對路徑
        filename: 'build.js'           //輸出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 經過正則表達式匹配全部以.css後綴的文件
                use: [ // 要使用的加載器，這兩個順序必定不要亂
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: '首頁',  //生成的頁面標題<head><title>首頁</title></head>
            filename: 'index.html', // dist目錄下生成的文件名
            template: './src/index.html' // 咱們原來的index.html，做爲模板
        })
    ]
}

2）將原來HTML中的引入js代碼刪除：

3）再次打包：npm run build

4）查看dist目錄：

打開index.html，發現已經自動添加了當前目錄下的build.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--router-link來指定跳轉的路徑-->
        <span><router-link to="/login">登陸</router-link></span>
        <span><router-link to="/register">註冊</router-link></span>
        <div>
            <!--vue-router的錨點-->
            <router-view></router-view>
        </div>
    </div>
<script type="text/javascript" src="build.js"></script></body>
</html>

2.10.熱更新的web服務

剛纔的案例中，每次修改任何js或css內容，都必須從新打包，很是麻煩。

webpack給咱們提供了一個插件，能夠幫咱們運行一個web服務，加載頁面內容，而且修改js後不須要從新加載就能看到最新結果：

1）安裝插件：

npm install webpack-dev-server --save-dev

2）添加啓動腳本

在package.json中配置script

  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1"
  },

--inline：自動刷新

--hot：熱加載

--port：指定端口

--open：自動在默認瀏覽器打開

--host：能夠指定服務器的 ip，不指定則爲127.0.0.1

3）運行腳本：

npm run dev

4）效果：

==================================================

參考資料：

vue-cli腳手架安裝教程

使用vue-cli（vue腳手架）快速搭建項目

若是你用vue-cli腳手架來搭建項目，配置過程會選擇是否用到路由，若是選擇y，後面下載依賴會自動下載vue-router。

end

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。