vue3.2 + vite + ts + vue-router4 + pinia + elementPlus + echarts5 项目初始化
以下是一个使用 Vue 3.2、Vite、TypeScript、Vue Router 4、Pinia、Element Plus 和 ECharts 5 的项目初始化示例:
首先,确保你已经安装了 Node.js。
- 创建项目:
npm create vite@latest my-vue-app --template vue-ts
- 进入项目目录:
cd my-vue-app
- 安装依赖:
npm install
- 安装 Vue Router:
npm install vue-router@4
- 安装 Pinia:
npm install pinia
- 安装 Element Plus:
npm install element-plus --save
- 安装 ECharts:
npm install echarts --save
- 在
vite.config.ts
中配置 ECharts 和 Element Plus:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'/@/': path.resolve(__dirname, 'src'),
'echarts': 'echarts/dist/echarts.min.js'
}
}
})
- 创建
src
目录结构和初始化文件:
src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.ts
├── router
│ └── index.ts
├── store
│ └── index.ts
├── types
│ └── store.d.ts
└── views
├── About.vue
└── Home.vue
- 在
main.ts
中配置 Vue 应用:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')
- 在
router/index.ts
中配置 Vue Router:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
- 在
store/index.ts
中配置 Pinia:
import { createPinia } from 'pinia'
export const store = createPinia()
- 在
types/store.d.ts
中为 TypeScript 配置 Pinia 类型:
import { Store } from 'pinia'
// 假设你有一个模块叫做 'counter'
declare module 'pinia' {
export interface PiniaCustomProperties {
counter: Store<CounterState>;
}
}
- 在
views/Home.vue
和views/About.vue
中创建简单的视图组件。 - 在
评论已关闭