vue 与 vue-router 在 webpack 中的使用

使用方式

在项目中安装 vue
npm i vue -S
在 webpack 中推荐我们使用 .vue 组件模板文件定义组件，webpack 不能打包解析这种类型的文件，所以我们要去安装能够解析这种文件的 loader
npm i vue-loader vue-template-compiler -D
在项目入口文件导入 vue 模块
import Vue from 'vue'
在 webpack 的配置文件的 module 节点中添加一条规则去处理 .vue 类型的文件，除此之外还要添加一个相关的插件(存在于我们之前下好的 loader 中)

// 新增 rules
{ test: /.vue$/, use: 'vue-loader'}, // 处理 .vue 文件
// 导入 plugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 在plugins 节点中新加一个插件的实例
 new VueLoaderPlugin(), // 处理 .vue文件 的插件

定义一个 .vue文件，格式如下，分为结构，脚本，样式三块

<template>
    <div>
        <h1>这是login组件，使用.vue文件定义出来的</h1>
    </div>
</template>

<script>
    // export default 是 es6 模块中向外暴露成员的语法，只能使用一次，接收时的变量名可以自定义
    // 也可以用 export 暴露成员，不过接收时要用 {变量名(必须与导出时的变量名一致)} 接收，可以使用多次，按需导出，需要哪个变量就接收哪个变量
    export default {
        name: "login"
    }
</script>

<style scoped lang="less">
<!--这里 scoped 表示作用域，也就是说样式只作用于当前组件及其子组件，如果不加就会作用于所有组件-->
<!--lang 表示当前使用的 样式语言类型 有 less scss css-->
</style>

导入 .vue 文件定义的模板组件，在入口文件中新建一个 vue 实例去控制页面上的元素，通过 render 函数去渲染组件内容到页面上,页面上的 div#app就会被替换成模板文件中的结构与样式

// 1. 导入 .vue 文件定义的模板组件
import login from './login.vue'

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'zzz'
    },
    // render(createElements){
    //     return createElements(login);
    // },
    // 简写为
    render: c => c(login),
});

vue-router 在 webpack 中的使用

在项目中下载 vue-router
cnpm i vue-router -S
新建几个组件app account login register
新建一个 router.js 文件编写路由信息

// 路由文件
// 导入 vue
import Vue from 'vue'
// 导入 vue-router包
import VueRouter from 'vue-router'
// 手动安装 vue-router
Vue.use(VueRouter)

//导入 account 和 goodslist 组件
import  account from './main/account.vue'
import  goodslist from './main/goodslist.vue'
import  login from './main/login.vue'
import  register from './main/register.vue'

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

// 导出 router 对象
export default router;

注意我们这里是用 render函数渲染组件，所以我们这里路由的router-link 和 router-view 要写在render函数要渲染的那个页面上，而不是index.html的#app中，因为它会被render覆盖。在这里是 app.vue，它的 template这样写

<template>
    <div>
        <h1>app组件</h1>

        <router-link to="/account">account</router-link>
        <router-link to="/goodslist">goodslist</router-link>
        <router-view></router-view>
    </div>
</template>

这里 account组件有两个子组件，login register可以使用嵌套路由来实现，在account的路由规则中定义好子路由规则后，在account组件中写好路由连接和路由出口

<template>
    <div>
        <h2>这是account组件</h2>
        <router-link to="/account/login">login</router-link>
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
    </div>
</template>

在入口文件main.js的vue实例中导入router

// 导入 vue
import Vue from 'vue'

// 导入路由模块
import router from './router.js'

// 导入 app 组件
import app from './app.vue'

var vm = new Vue({
    el: '#app',
    render: c => c(app), // 把路由的 router-link 和 router-view 放在 render 的组件在，因为这里会覆盖 #app 的元素，不能写在 #app里
    router: router,
});

最后项目的文件目录结构大概是这样的

webpack-vue-router.png

作者：hgzzz
链接：https://www.jianshu.com/p/c324c09fb0ae
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。