webpack9-Vue中使用vue-router_web vum9-优快云博客

本文链接：https://blog.youkuaiyun.com/SevenSongyun/article/details/103812825

webpack9-Vue中使用vue-router

1. 初始化npm

npm init -y

2. 安装

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

3. 安装vue等

npm i vue vue-router -S
npm i vue-loader vue-template-compiler -D

4. 在 package.json 中添加

"dev": "webpack-dev-server"

5. 编写配置文件 webpack.config.js

const path = require("path")
const webpack = require("webpack")
const htmlwebpackplugin = require("html-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
    entry: path.join(__dirname, "./src/index.js"),
    output: {
        path: path.join(__dirname, "./dist"),
        filename: "index.js"
    },
    mode: "development",
    devServer: {
        open: true,
        port: 3000,
        contentBase: "src",
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlwebpackplugin({
            template: "./src/index.html",
            filename: "index.html"
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {test: /\.vue$/, use: "vue-loader"}
        ]
    }
}

6. 编写 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

7. 编写 app.vue

<template>
    <div>
        <h1>app: {{name}}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: "Seven"
        }
    }
}
</script>

<style></style>

8. 编写入口文件 index.js

import Vue from "vue"

var vm = new Vue({
    el: "#app",
    render: el => el(app)
});

9. 接下来要使用 vue-router

在入口文件中导入 vue-router
然后手动安装 vue-router

// 导入 vue-router
import VueRouter from "vue-router"
// 手动安装 vue-router
Vue.use(VueRouter)

10. 创建两个组件 login.vue 和 register.vue

<template>
    <div>
        <h1>登录组件</h1>
    </div>
</template>

<script></script>

<style></style>

<template>
    <div>
        <h1>注册组件</h1>
    </div>
</template>

<script></script>

<style></style>

11. 在 index.js 文件中创建挂载路由

import Vue from "vue"
// 导入 vue-router
import VueRouter from "vue-router"
// 手动安装 vue-router
Vue.use(VueRouter)

// 导入app组件
import app from "./app.vue"
// 导入login和register组件
import login from "./templates/login.vue"
import register from "./templates/register.vue"

var router = new VueRouter({
    routes: [
        {path: "/login", component: login},
        {path: "/register", component: register}
    ]
})

var vm = new Vue({
    el: "#app",
    render: el => el(app),
    router  // 将路由挂在到vue实例中
});

12. 在 app.vue 中渲染路由

<template>
    <div>
        <h1>app: {{name}}</h1>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: "Seven"
        }
    }
}
</script>

<style></style>