以下是一个使用Vue 3、Vite、TypeScript、Element Plus和Pinia搭建的基本项目结构的简化版本：
- 安装项目依赖：
npm create vite@latest my-vue3-app --template vue-ts
cd my-vue3-app
npm install- 安装Element Plus和Pinia：
npm install element-plus pinia- 配置Vue项目：
vite.config.ts:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})main.ts:
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import Pinia from './stores'
const app = createApp(App)
app.use(ElementPlus, { locale, size: 'small' })
app.use(Pinia)
app.mount('#app')stores/index.ts:
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia- 创建组件和视图：
App.vue:
<template>
<div id="app">
<el-button @click="increment">Count: {{ count }}</el-button>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from './stores'
export default defineComponent({
setup() {
const store = useStore()
const count = computed(() => store.state.count)
function increment() {
store.actions.increment()
}
return { count, increment }
},
})
</script>stores/counter.ts:
import { defineStore } from 'pinia'
export const useStore = defineStore({
id: 'main',
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++
},
},
})这个示例提供了一个简单的Vue 3应用程序，使用Vite作为构建工具，TypeScript作为编程语言，Element Plus提供UI组件，以及Pinia管理状态。这个结构可以作为开始开发新Vue 3项目的基础。