技术选型

在本项目中使用Vue3 + pinia + vue-router + typescript + vite等技术进行开发。

vue3与vue2相比，一个很明显的区别是vue3支持了组合式API，这使得vue更加灵活，更易维护，并且对typescript的支持性更好。

采用pinia来进行状态管理、使用vue-router来管理路由。pinia是vue官方推荐的状态管理库，与以前的vuex相比，pinia更加简易，少了很多约束，这使得pinia使用起来会比vuex更加灵活，此外pinia不再需要mutation，并且能够与typescript搭配提供更好的类型推断支持；而vue-router则是将组件映射到路由中，并且还提供导航守卫、路由懒加载等进阶功能。

vite是下一代前端构建工具，最大的特点就是快，借助ESM等特性，使vite的冷启动速度和热更新速度远快于webpack。typescript则是大型项目开发的必备工具，弥补了JavaScript缺少类型支持的缺点。

开始

我们使用vite来创建一个vue3项目

npm create vite@latest

依次选择vue、vue-ts ，项目名称取名为vue-admin ，并执行npm i。

此时项目已经集成了vue + typescript ，接下来我们要引入pinia和vue-router。

集成pinia和vue-router

添加pinia和vue-router包

npm i pinia vue-router -S

我们在src目录下新建目录store 来存放pinia的store文件

在此目录下建立一个文件userStore.ts 来存放于用户相关的状态。

// src/store/userStore.ts
import { defineStore } from "pinia";

type ROLE = "管理员" | "普通用户";
interface State {
	username: string;
	role?: ROLE;
}

const userStore = defineStore("userStore", {
	state(): State {
		return {
			username: "",
			role: undefined,
		};
	},
	getters: {},
	actions: {
		setRole(role: ROLE) {
			this.$state.role = role;
		},
	},
});

接下来我们在src目录下新建目录router来存放路由相关的文件

在该目录下新建文件index.ts 。