Small Tools 前端项目搭建:Vue3+Vite2+TypeScript+Vue Router+Element Plus+Pinia

以下是一个使用Vue 3, Vite 2, TypeScript, Vue Router, Element Plus和Pi的前端项目的基本配置示例：

1. 安装Vue CLI并创建一个新项目：

npm install -g @vue/cli
vue create my-vue3-project

2. 进入项目目录并选择Vue 3：

cd my-vue3-project

3. 配置TypeScript：

vue add typescript

4. 安装Vite：

npm install -g create-vite

5. 使用Vite创建新项目：

create-vite my-vite2-project

6. 进入新的Vite项目目录并安装依赖：

cd my-vite2-project
npm install

7. 集成Vue Router：

npm install vue-router@4

8. 集成Element Plus：

npm install element-plus --save

9. 集成Pi：

npm install pi-ui --save

10. 在src/main.ts中配置Vue应用：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Pi from 'pi-ui'
 
const app = createApp(App)
 
app.use(router)
app.use(ElementPlus)
app.use(Pi)
 
app.mount('#app')

11. 在src/router/index.ts中配置Vue Router：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // ...其他路由
]
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
 
export default router

以上步骤为你提供了一个基本的Vue 3 + Vite 2项目，集成了TypeScript，Vue Router，Element Plus和Pi。根据具体需求，你可能需要进一步配置或添加其他功能，例如状态管理（如Vuex），HTTP请求库（如Axios），或其他UI库。