Vite + Vue3 + Element-Plus
搭建 Vite 项目
注意
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
使用 NPM:
npm create vite@latest
使用 Yarn:
yarn create vite
使用 PNPM:
pnpm create vite
输入项目名称后选择 vue 选择 ts 后 cd 进入目录 npm install 安装依赖后，npm run dev 运行。
配置Router
1、安装 Vue Router：
npm install vue-router@next
2、在 src/router 目录下创建一个新的文件 index.ts，并在其中配置路由：
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'index',
component: () => import('../views/index.vue'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
3、在 src/main.ts 中导入并使用路由：
import router from './router'; // router
createApp(App).use(router).mount('#app')
配置 Element-Plus
1、安装Element-Plus
npm install element-plus --save
2、在main.ts中引入element-plus
import ElementPlus from 'element-plus' // element-plus
import 'element-plus/dist/index.css' // element-plus
createApp(App).use(router).use(ElementPlus).mount('#app')
配置 Pinia
1、安装Pinia
npm install pinia
2、在 src/store 目录下创建一个新的文件index.ts，用于配置和创建 Pinia
import { defineStore } from 'pinia';
// 创建 Pinia Store
export const dataStore = defineStore('dataStore', {
state: () => {
return {
msg: 'hello pinia',
num: 0
}
},
getters: {
addNum(): number {
return this.num + 10
},
addNum2() {
return (number: number) => this.num + number
}
},
actions: {
actionFun() {
console.log("我是store中actions的方法")
}
}
});
3、在 src/main.ts 中导入并使用 Pinia：
createApp(App).use(router).use(ElementPlus).use(pinia).mount('#app')