首先，确保你已经安装了Node.js和npm。
- 初始化新项目:
npm create vite@latest my-vue3-app --template vue-ts- 进入项目目录并安装依赖:
cd my-vue3-app
npm install- 添加Element-plus和Unocss:
npm install element-plus unocss- 安装vue-router和axios:
npm install vue-router@4 axios- 安装pinia:
npm install pinia@2- 修改
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(),
],
// 其他配置...
})- 修改
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')- 配置
tsconfig.json以支持Element-plus:
{
"compilerOptions": {
"types": ["element-plus/global"]
}
}- 配置
router.ts:
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
// 定义路由
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router- 配置
pinia.ts:
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia- 在
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')- 配置
vite.config.ts以生成产物目录为z:
export default defineConfig({
// 其他配置...
build: {
outDir: 'z'
}
})- 打包项目:
npm run build以上步骤将会创建一个新的Vue 3项目，并配置了Element-plus、Unocss、Vue-router、Axios和Pinia。同时，项目将会被打包成一个z目录下的生产版本。