vue3+vite+TypeScript+Element plus+pinia搭建开发脚手架

以下是一个使用Vue 3、Vite、TypeScript、Element Plus和Pinia搭建的基本项目结构的简化版本：

1. 安装项目依赖：

npm create vite@latest my-vue3-app --template vue-ts
cd my-vue3-app
npm install

2. 安装Element Plus和Pinia：

npm install element-plus pinia

3. 配置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

4. 创建组件和视图：

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项目的基础。