webpack整合 vue-router 路由,模块嵌套,整合Mint UI,MUI

发表于 | 分类于 |

webpack整合 vue-router

结构

在这里插入图片描述

文件内容

各个文件内容,一共八个文件, 还有src components目录

Login.vue

1
2
3
4
5
6
7
8
9
<template>
    <div>
        <h2>我是登录_Login.vue</h2>
    </div>
</template>

<script></script>

<style></style>

Register.vue

1
2
3
4
5
6
7
8
9
<template>
    <div>
        <h2>我是注册_Register.vue</h2>
    </div>
</template>

<script></script>

<style></style>

App.vue

1
2
3
4
5
6
7
8
9
<template>
    <div>
        <h1>我是主文件_App.vue</h1>
    </div>
</template>

<script></script>

<style></style>

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>
</div>
</body>
</html>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);

import app from './App.vue'
import login from './components/Login.vue'
import register from './components/Register.vue'

new Vue({
    el: "#app",
    // render会把 el 指定的所有内容都清空,再添加 app 组件
    render: diy => diy(app),
    router: new VueRouter({
        routes: [
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    })
});

.babelrc

1
2
3
4
{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
  "name": "test-vue-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 2198 --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "bootstrap": "^3.4.1",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.3.1",
    "style-loader": "^1.0.0",
    "url-loader": "^2.1.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-router": "^3.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  }
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//webpack是基于node进行构建的,所以支持node语法
var path = require("path");

//在内存中生成模版页面
var htmlWebpackPlugin = require("html-webpack-plugin");

//vue-loader使用
var VueLoaderPlugin=require('vue-loader/lib/plugin');

//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
//这时会检查项目中的配置文件,并读取这个文件
module.exports = {
    entry: path.join(__dirname, "./src/main.js"),//入口文件
    output: {
        path: path.join(__dirname, "./dist"),//输出路径
        filename: "bundle.js"//执行输出文件的名称
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
            filename: "index.html"//设置内存中页面名称
        }),
        new VueLoaderPlugin(),
    ],
    module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            //处理css文件的规则
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
            //小于等于 limit 不进行base64编码
            {test: /\.(png|jpg|jpeg|bmp|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]'},
            //处理字体文件的loader,bootstrap小图标就是使用这个
            {test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader'},
            // 配置 babel-loader 来转换高级的ES语法
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
            // 配置 vue-loader 来处理 .vue 文件
            { test: /\.vue$/, use: 'vue-loader' },
        ]
    },
    // resolve: {
    //     alias: { // 修改 Vue 被导入时候的包的路径
    //         "vue$": "vue/dist/vue.js"
    //     }
    // }
};

安装依赖

  • 执行 在项目的目录下执行 npm i 来安装所需的依赖

执行

  • 执行 npm run dev ,无错误,但是没有显示index.html中我们设置的两个router-link链接和router-view坑
    在这里插入图片描述

    原因

  • 原因是因为 render会把 el 指定的所有内容都清空,再添加 app 组件 ,所以,我们需要把这三个标签放入 App.vue中修改了index.html
    在这里插入图片描述

修改App.vue

  • 修改App.vue
    在这里插入图片描述

再执行

  • 执行 npm run dev 也成功显示了两个链接
    在这里插入图片描述

点击登录

  • 点击了登录之后
    在这里插入图片描述

点击注册

  • 点击了注册之后
    在这里插入图片描述

创建Daniu.vue 和 Erdan.vue

  • 在components目录下创建两个文件 Daniu.vue 和 Erdan.vue ,并且修改了main.js 和 Login.vue

修改Daniu.vue

Daniu.vue

1
2
3
4
5
6
7
8
9
<template>
    <div>
        <h3>我是大牛_Daniu.vue</h3>
    </div>
</template>

<script></script>

<style></style>

Erdan.vue

Erdan.vue

1
2
3
4
5
6
7
8
9
<template>
    <div>
        <h3>我是二蛋_Erdan.vue</h3>
    </div>
</template>

<script></script>

<style></style>

修改main.js

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import app from './App.vue'
import login from './components/Login.vue'
import register from './components/Register.vue'
import daniu from './components/Daniu.vue'
import erdan from './components/Erdan.vue'

new Vue({
    el: "#app",
    // render会把 el 指定的所有内容都清空,再添加 app 组件
    render: diy => diy(app),
    router: new VueRouter({
        routes: [
            {
                path: '/login', component: login, children: [
                    {path: 'daniu', component: daniu},
                    {path: 'erdan', component: erdan}
                ]
            },
            {path: '/register', component: register}
        ]
    })
});

修改Login.vue

Login.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <div>
        <h2>我是登录_Login.vue</h2>
        <router-link to="/login/daniu">大牛</router-link>
        <router-link to="/login/erdan">二蛋</router-link>

        <router-view></router-view>
    </div>
</template>

<script></script>

<style></style>

再执行,测试

  • 执行 npm run dev
    在这里插入图片描述
  • 点击 登录
    在这里插入图片描述
  • 点击 注册
    在这里插入图片描述
  • 点击 登录 再点击大牛
    在这里插入图片描述
  • 点击登录再点击二蛋
    在这里插入图片描述
  • 实现抽离模块,在src目录下创建文件router.js ,把main.js中关于路由的数据放到router.js

router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import VueRouter from 'vue-router'

import login from './components/Login.vue'
import register from './components/Register.vue'
import daniu from './components/Daniu.vue'
import erdan from './components/Erdan.vue'

export default new VueRouter({
    routes:
        [
            {
                path: '/login', component: login, children:
                    [
                        {path: 'daniu', component: daniu},
                        {path: 'erdan', component: erdan}
                    ]
            },
            {path: '/register', component: register}
        ]
})

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
import router from './router.js'

import app from './App.vue'

new Vue({
    el: "#app",
    // render会把 el 指定的所有内容都清空,再添加 app 组件
    render: diy => diy(app),
    //router: router//可以简写为router
    router
});

webpack 整合 Mint UI

安装

执行npm i mint-ui -S

引入

在 main.js中添加

1
2
3
import MintUI from 'mint-ui'
Vue.use(MintUI);
import 'mint-ui/lib/style.css'

在这里插入图片描述

使用

添加 Mint UI的样式
在这里插入图片描述

执行

执行 npm run dev
在这里插入图片描述

webpack 整合 MUI

下载

因为它不是npm下载的,所有要去GitHub去下载 点击进入

解压

在src目录下,新建目录lib,把解压之后的dist文件夹 复制到 lib下,并改名为mui
在这里插入图片描述

引入

使用方法和bootstrap差不多,在main.js中添加import './lib/mui/css/mui.min.css'

使用

在App.vue中添加

1
2
3
4
5
6
7
<button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>
<hr/>

效果

在这里插入图片描述