开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

---

写在前面

上篇文章写了在vite+vue项目中配置开发环境和生产环境并封装axios，本篇文章介绍如何在vite+vue项目中引入vue-router和Element Plus

引入vue-router、vuex、Element Plus

引入vue-router

首先安装vue-router：npm install vue-router@4

接着在src目录下新建文件夹，取名router，并在router文件夹下新建index.ts文件，index.ts文件代码如下，代码中有详细的注释，可以看一眼明白大致逻辑，后续会进行权限验证代码的补充：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import routes from './routes'

export const router = createRouter({
    // hash模式：createWebHashHistory()，url上带#号，不需要后端配置
    // history模式：createWebHistory()，url上不带#号，需要后端配置
    history: createWebHashHistory(),
    routes
})

// 路由加载前，路由拦截，权限验证
router.beforeEach(async (to, from, next) => {
    next();
    // 根据token存在的情况判断是否要拦截路由，代码后面补充
})

index.ts中引入了routes.ts，所以我们在router文件夹下再新建一个routes.ts文件，routes.ts文件代码如下：

export default [
    {
        path: "/",
        // redirect: '/Dashboard',
        name: 'Home',
        component: () => import("../layout/Home.vue"),
    },
    {
        path: "/login",
        component: () => import("../views/Login.vue"),
    },
]

routes.ts中引入了../layout/Home.vue和../views/Login.vue，所以我们在src文件夹下再增加两个文件夹layout和views，在layout文件夹下新增Home.vue文件，代码如下（先写着，保证项目不报错）：

<template>
  <div>Home</div>
</template>

<script lang="ts">
export default {};
</script>

<style>
</style>

在views文件夹下新增Login.vue文件，代码如下（也是先写着，保证项目不报错）：

<template>
  <div>Login</div>
</template>

<script setup lang="ts">
</script>

<style>
</style>

接着修改App.vue文件，修改后的代码如下，同时删除components下的HelloWord.vue文件：

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

<script setup lang="ts">
</script>

然后在main.ts文件中添加引入vue-router的代码，并且删除src目录下的style.css文件，同时删除main.ts中对应代码，此时main.ts中的代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

const app = createApp(App)

app.use(router)
app.mount('#app')

至此我们的页面上只显示了Home字样，其他什么也没有，文件结构也很干净，没有多余的文件，同时项目也能成功运行起来。

引入Element Plus

首先安装Element Plus：npm install element-plus --save

然后在main.ts文件中添加代码（这里是直接完整引入Element Plus，如需按需导入可查看官方文档）：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)

全部导入后的main.ts文件的完整代码如下：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import { router } from './router'

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.mount('#app')

写在最后

以上就是在vite+vue项目中引入vue-router和Element Plus的过程和代码