webpack-router

这篇文章主要介绍如何在webpack中使用router并实现路由模块的抽离。最后介绍了es6中导入导出模块 export default 和 export 以及如何在.vue文件中使用样式。

1. 安装vue-router

1.1 vue-router官网
1.2 npm 安装
1
npm i vue-router -D
1.3 如果在一个工程化模块中使用，必须要通过Vue.use()明确的安装路由功能
1
2
3
4
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2. 使用

2.1 main.js

import Vue from 'vue';
// 1. 导入 vue-router 包
import VueRouter from 'vue-router';
// 2. 手动安装vueRouter
Vue.use(VueRouter);

import App from './App.vue';
import user from './main/user.vue';
import goods from './main/goods.vue';

// 3. 创建路由对象
let router = new VueRouter({
    routes: [
        { path: '/user', component: user },
        { path: '/goods', component: goods }
    ]
});

let vm = new Vue({
    el: '#app',
    data: {},
    render: c => c(App),
    router // 4. 挂载路由
});

2.2 App.vue

<template>
    <div>
        <h2>这是App组件内容</h2>
        <router-link to="user">用户</router-link>
        <router-link to="goods">商品</router-link>
        <router-view></router-view>
    </div>
</template>
<script></script>
<style></style>

3. 子路由的使用/路由模块从mian.js中抽离出来

3.1 mian.js

import Vue from 'vue';
// 1. 导入 vue-router 包
import VueRouter from 'vue-router';
// 2. 手动安装vueRouter
Vue.use(VueRouter);
import app from './App.vue';
import router from './router';
let vm = new Vue({
    el: '#app',
    data: {},
    render: c => c(app),
    router // 4. 挂载路由
});

3.2 router.js

// 1. 导入 vue-router 包
import VueRouter from 'vue-router';

import user from './main/user.vue';
import goods from './main/goods.vue';
import login from './subcom/login.vue'
import register from './subcom/register.vue'

// 3. 创建路由对象
let router = new VueRouter({
    routes: [
        {
            path: '/user',
            component: user,
            children: [
                { path: '/login', component: login },
                { path: '/register', component: register }
            ]
        },
        { path: '/goods', component: goods }
    ]
});

export default router

4. ES6中语法使用总结

使用 export default 和 export 导出模块中的成员; 对应ES5中的 module.exports 和 export
使用 import ** from ** 和 import '路径' 还有 import {a, b} from '模块标识' 导入其他模块
使用箭头函数：(a, b)=> { return a-b; }

export应用实例：

// module.exports = {} 是node中暴露成员的形式
// 在es6中也通过规范形式，规定了如何导入和导出模块
// 在es6中导入模块通过 import 模块名称 from '模块标识符' 或者 import '模块路径'
// 在es6中通过 export default 和 export 向外暴露成员

// 注意：
// 使用 export default 向外暴露的成员可以使用任意变量接收
// 在一个模块中 export default 只能向外暴露一次
// 在一个模块中可以同时使用 export default 和 export 向外暴露成员

let info = {
    name: 'tom',
    age: 20
};

export default info;

export let title ="xfk";
export let content = "xfk person blog";

// 使用export向外暴露成员，只能使用 {} 的形式来接收，这种方式叫做【按需导出】
// 使用export可以向外暴露多个成员，如果在import的时候不需要，可以不用再{}中定义
// 使用export导出的成员必须按照导出时的名称
// 使用export导出的成员如果想换个名称接收，可以使用as来起别名

5. `.vue`文件中的样式

5.1 应用样例：

<style lang="less" scoped>
    /* 普通的style标签只支持css，要启用less需要为style标签添加属性 lang="less" */
    /* 一般vue文件中的style样式推荐添加scoped属性 */
    body {
        background: lightcoral;
        div {
            font-style: italic;
            color: #777;
        }
    }
</style>

webpack-router

1. 安装vue-router

2. 使用

3. 子路由的使用/路由模块从mian.js中抽离出来

4. ES6中语法使用总结

5. .vue文件中的样式

5. `.vue`文件中的样式