以下是搭建一个使用 Vue 3、TypeScript、Vite、Router、Pinia、Element Plus 和 SCSS 的项目的基本步骤：
- 初始化项目：
npm create vite@latest my-vue3-app --template vue-ts
- 进入项目目录并安装依赖：
cd my-vue3-app
npm install
- 安装 Vue Router：
npm install vue-router@4
- 安装 Pinia：
npm install pinia
- 安装 Element Plus：
npm install element-plus --save
- 安装 SCSS 加载器：
npm install sass -D
npm install sass-loader -D
- 在
vite.config.ts 中配置 SCSS 加载：
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/variables.scss" as *;`,
},
},
},
})
- 创建
src/styles/variables.scss 文件用于定义变量：
// src/styles/variables.scss
$primary-color: #3498db;
:root {
--primary-color: #{$primary-color};
}
- 创建
src/router/index.ts 用于设置路由：
// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue'),
},
// 更多路由...
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
})
export default router
- 创建
src/store.ts 用于设置 Pinia：
// src/store.ts
import { createPinia } from 'pinia'
export const store = createPinia()
- 在
main.ts 中集成 Vue Router、Pinia 和 Element Plus：
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store } from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus)
app.mo