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文件，格式如下，分为 结构，脚本，样式三块

• 导入 .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这样写

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

• 在入口文件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