傻瓜式配置新项目vite+vue3+Element-plus+unocss+vue-router+axios+pinia+打包成zip

首先，确保你已经安装了Node.js和npm。

1. 初始化新项目:

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

2. 进入项目目录并安装依赖:

cd my-vue3-app
npm install

3. 添加Element-plus和Unocss:

npm install element-plus unocss

4. 安装vue-router和axios:

npm install vue-router@4 axios

5. 安装pinia:

npm install pinia@2

6. 修改vite.config.ts以包含所需插件:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'
import Unocss from 'unocss/vite'
 
export default defineConfig({
  plugins: [
    vue(),
    ElementPlus({
      // 如有需要，在此处配置Element-plus
    }),
    Unocss(),
  ],
  // 其他配置...
})

7. 修改main.ts以使用插件:

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 'unocss/dist/bundle.css'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.use(router)
 
app.mount('#app')

8. 配置tsconfig.json以支持Element-plus:

{
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}

9. 配置router.ts:

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

10. 配置pinia.ts:

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

11. 在main.ts中使用pinia:

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

12. 配置vite.config.ts以生成产物目录为z:

export default defineConfig({
  // 其他配置...
  build: {
    outDir: 'z'
  }
})

13. 打包项目:

npm run build

以上步骤将会创建一个新的Vue 3项目，并配置了Element-plus、Unocss、Vue-router、Axios和Pinia。同时，项目将会被打包成一个z目录下的生产版本。