vue3项目搭建 基于vite + typescript + vue-router + pinia

以下是一个基于Vue 3、Vite、TypeScript、Vue Router和Pinia的项目的简单目录结构和vite.config.ts配置示例：

project-name/
|-- public/
|-- src/
|   |-- assets/
|   |-- components/
|   |-- layouts/
|   |-- routes/
|       |-- index.ts
|       |-- users.ts
|   |-- store/
|       |-- index.ts
|   |-- types/
|       |-- Pinia.ts
|   |-- App.vue
|   |-- main.ts
|-- tsconfig.json
|-- vite.config.ts
|-- index.html
|-- package.json
|-- stylelint.config.js
|-- prettier.config.js

vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
  },
})

src/main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes'
import pinia from './store'
 
const app = createApp(App)
 
app.use(router)
app.use(pinia)
 
app.mount('#app')

src/routes/index.ts:

import { createRouter, createWebHistory } from 'vue-router'
 
// 定义路由
const routes = [
  { path: '/', component: () => import('@/layouts/MainLayout.vue') },
  // 更多路由...
]
 
const router = createRouter({
  history: createWebHistory(),
  routes,
})
 
export default router

src/store/index.ts:

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

这个示例展示了如何使用Vite创建一个新的Vue 3项目，并包括Vue Router和Pinia的基础设置。这个项目结构简洁，方便理解和扩展。