vite-vue3-elementPlus-vueRouter4-Pinia搭建项目

以下是使用Vite创建一个新的Vue 3项目，并配置Element Plus UI库、Vue Router 4和Pinia的步骤：

1. 确保你已经安装了Node.js。
2. 安装Vite CLI工具：

npm init vite@latest

3. 运行上述命令后，按照提示选择Vue作为框架，并为你的项目起一个名字。
4. 进入项目目录，并安装所需依赖：

cd your-project-name
npm install

5. 安装Element Plus和Vue Router 4：

npm install element-plus vue-router@4 pinia

6. 在项目中配置Element Plus和Vue Router 4。
7. 配置Vue Router（在src目录下创建router/index.js）：

import { createRouter, createWebHistory } from 'vue-router';
 
const routes = [
  // 定义路由
];
 
const router = createRouter({
  history: createWebHistory(),
  routes,
});
 
export default router;

8. 配置Pinia（在src目录下创建store.js）：

import { createPinia } from 'pinia';
 
const pinia = createPinia();
 
export default pinia;

9. 在main.js中引入并配置：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import pinia from './store';
import ElementPlus from 'element-plus';
 
const app = createApp(App);
 
app.use(ElementPlus);
app.use(router);
app.use(pinia);
 
app.mount('#app');

10. 在App.vue中添加router-view来显示页面：

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

以上步骤提供了一个基本的框架，你需要根据自己的需求添加具体的路由配置、组件和Element Plus的组件使用。