webpack打包vue-router

拼搏现实的明天。 2022-04-17 01:14 351阅读 0赞

### 文章目录 ###

*  webpack打包vue-router
 *  示例
 *   *  目录结构
     *  源码
     *  运行结果

# webpack打包vue-router #

在项目中加载`vue-router`依赖指令如下：

cnpm i vue-router  --save

这篇文章是在之前的一篇文章的源码基础上拆分而来的，所以说我们可以通过这篇文章和之前的文章做一下相应的对比，这样可以加深我们对其的了解。

之前的那篇文章如下：

*  [Vue中路由的传参][Vue]

# 示例 #

## 目录结构 ##

![在这里插入图片描述][20181111091344951.png]

## 源码 ##

`login.vue`源码：

<template>
        
        <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>
        
        <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`源码：

<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

运行结果如下：

![在这里插入图片描述][20181111002317471.gif]

由于这篇文章的源码是在之前文章源码的基础上拆分出来的，所以说这里就不用做过多的说明了，不明白的地方可以参考前面章节的部分。

[Vue]: https://blog.csdn.net/ZZY1078689276/article/details/83827530
[20181111091344951.png]: /images/20220417/d37fc840bb224bffa1a12968afa98627.png
[20181111002317471.gif]: /images/20220417/e92ff59799b34fb59c47e470f32d784b.png