文章目錄

• webpack打包vue-router
• 示例
• 目錄結構
• 原始碼
• 執行結果

webpack打包vue-router

  在專案中載入vue-router依賴指令如下：

cnpm i vue-router  --save

  這篇文章是在之前的一篇文章的原始碼基礎上拆分而來的，所以說我們可以通過這篇文章和之前的文章做一下相應的對比，這樣可以加深我們對其的瞭解。

  之前的那篇文章如下：

• Vue中路由的傳參

示例

目錄結構

原始碼

  login.vue

<template>
    <!--vue2.0通常都需要有一個根元素-->
    <div>
        <h2>登入頁面</h2>
        <input type="text" placeholder="請輸入登入賬號" v-model="loginName">
        <button @click="loginMethod">登入</button>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                uname:''
                ,loginName:''
            }
        }
        ,created(){
            //接收傳過來的引數，將其存放到本地資料域uname中
            this.uname = this.$route.query.uname;
        }
        ,methods:{
            loginMethod(){
                //如果沒有輸入任何資訊，則提示輸入賬號。
                if(this.loginName.trim() == ''){
                    alert('請輸入登入賬號！');
                    return;
                }
                //如果填寫的登入名與註冊的賬號相一致，則登入成功！
                if(this.uname == this.loginName){
                    alert('登入成功！');
                    //登入成功後跳轉到歡迎介面
                    this.$router.push({path:'/root/welcome',query:{uname:this.loginName}});
                } else {
                    alert('登入失敗！');
                }
            }
        }
    }
</script>

<style scoped>

</style>
 

  register.vue原始碼：

<template>
    <!--vue2.0通常都需要有一個根元素-->
    <div>
        <h2>註冊頁面</h2>
        <input type="text" v-model="uname">
        <button @click="registerMethod">註冊</button>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                uname:''
            }
        }
        ,methods:{
            registerMethod(){
                alert('註冊成功！使用者名稱為：' + this.uname);
                //跳轉到登入頁面
                this.$router.push({path:'/root/login',query:{uname:this.uname}});
            }
        }
    }
</script>

<style scoped>

</style>
 

  root.vue原始碼：

<template>
    <div>
        <!--路由佔位-->
        <router-view></router-view>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>

  welcome.vue原始碼：

<template>
    <div>
        <h2>歡迎介面</h2>
        <h3 v-show="currentUser != ''">{{currentUser}}</h3>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                uname:''
                ,currentUser:''
            }
        }
        ,created(){
            //接收傳過來的引數，將其存放到本地資料域uname中
            this.uname = this.$route.query.uname;
            //排除非空可能
            if(this.uname != '' && this.uname != 'undefined' && this.uname != undefined){
                this.currentUser = '歡迎您:' + this.uname + "！"
            }
        }
    }
</script>

<style scoped>

</style>

  App.vue原始碼：

<!--Vue專案的根元件-->
<template>
    <div id="app">
        <router-link to="/root/register">註冊</router-link> |
        <router-link to="/root/login">登入</router-link>
        <!--路由佔位-->
        <router-view></router-view>
    </div>
</template>

<script>
    //負責匯出.vue這個元件物件
    //它本質上是一個Vue物件，所以Vue中該定義的元素都可以使用
    export default {
        data(){
            return {
                msg:'Hello World!'
            }
        }
    }
</script>

<style scoped>
/*其中的scoped意識是這裡定義的css樣式只是在當前頁面中有效，不會影響到其它元件頁面*/
    .red{
        color: blue;
    }
</style>

  main.js原始碼：

//1、匯入vue核心包
import Vue from 'vue';
//2、匯入App.vue的vue物件
import App from './App.vue';
//3、將vue-router整合到這個專案中來
import vueRouter from 'vue-router';
//4、將vueRouter物件繫結到Vue物件上
Vue.use(vueRouter);

//5、匯入路由規則對應的元件物件
import login from './components/account/login.vue';
import register from './components/account/register.vue';
import welcome from './components/welcome.vue';
import root from './components/root.vue';

//6、定義路由規則
var router1 = new vueRouter({
    routes:[
        {
            path:'/'
            ,redirect:'/root/welcome'
        }
        ,{
            path:'/root'
            ,component:root
            ,children:[
                {
                    path:'register'
                    ,component:register
                }
                ,{
                    path:'login'
                    ,component:login
                }
                ,{
                    path:'welcome'
                    ,component:welcome
                }
            ]
        }
    ]
});
//7、初始化Vue物件
new Vue({
    el:'#app'
    //使用路由物件例項
    ,router:router1
    ,render:c=>c(App)    //es6的函式寫法，是goes to 語法
    //上面的等價於render:function(create){create(App)}
});

  index.html原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
    <meta name="vireport" content="width=device-width,initial-scale=1,mininum-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<body>
<div id="app"></div>
</body>
</html>

  package.json原始碼：

{
  "name": "csspackage",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 4009"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.0",
    "css-loader": "^1.0.1",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.3.4",
    "vue-template-compiler": "^2.2.6",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.0"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1"
  }
}

  webpack.config.js原始碼：

var htmlwp = require('html-webpack-plugin');
module.exports = {
    entry:'./src/main'   //指定打包的入口檔案
    ,output:{
        path:__dirname +  '/dist'
        ,filename:'build.js'
    }
    ,module:{
        loaders:[
            {
                test:/\.css$/
                ,loader:'style-loader!css-loader'
            }
            ,{
                test:/\.scss$/
                ,loader:'style-loader!css-loader!sass-loader'
            }
            ,{
                test:/\.less/                    //打包.less檔案
                ,loader:'style-loader!css-loader!sass-loader!less-loader'
            }
            ,{
                test:/\.(png|jpg|gif|ttf)$/           //打包url請求的資原始檔
                ,loader:'url-loader?limit=20000'     //limit表示圖片的大小為40k是臨界值，小於20k的圖片均被
                // 打包到build.js中去，此時圖片的顯示就會很快，這是一個優化操作。
            }
            ,{
                test:/\.js$/           //將.js檔案中的es6語法轉換成es5語法
                ,loader:'babel-loader'
                ,exclude:/node_modules/    //nodejs依賴庫中的js檔案全部都不需要進行轉換
            }
            ,{
                test:/\.vue$/           //解析.vue元件頁面檔案
                ,loader:'vue-loader'
            }
        ]
    }
    ,babel:{
        presets:['es2015']     //配置將es6語法轉換成es5語法
        ,plugins:['transform-runtime']    //這句程式碼就是為了解決打包.vue檔案不報錯
    }
    ,plugins:[
        new htmlwp({
            title:'首頁'   //生成的頁面標題
            ,filename:'index.html'  //webpack-dev-server在記憶體中生成的檔名稱，自動將build注入到這個頁面底部，
            ,template:'index.html'  //根據index.html這個模版來生成（這個檔案請程式設計師自己生成）
        })
    ]
};

執行結果

  在控制檯上執行下面指令啟動專案：

npm run dev

  執行結果如下：

  由於這篇文章的原始碼是在之前文章原始碼的基礎上拆分出來的，所以說這裡就不用做過多的說明了，不明白的地方可以參考前面章節的部分。