vue3+ts+vite项目从0 搭建，配置安装router/pinia/element-plus/scss等

以下是搭建一个使用 Vue 3、TypeScript、Vite、Router、Pinia、Element Plus 和 SCSS 的项目的基本步骤：

1. 初始化项目：

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

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

cd my-vue3-app
npm install

3. 安装 Vue Router：

npm install vue-router@4

4. 安装 Pinia：

npm install pinia

5. 安装 Element Plus：

npm install element-plus --save

6. 安装 SCSS 加载器：

npm install sass -D
npm install sass-loader -D

7. 在 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 *;`,
      },
    },
  },
})

8. 创建 src/styles/variables.scss 文件用于定义变量：

// src/styles/variables.scss
$primary-color: #3498db;
 
:root {
  --primary-color: #{$primary-color};
}

9. 创建 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

10. 创建 src/store.ts 用于设置 Pinia：

// src/store.ts
import { createPinia } from 'pinia'
 
export const store = createPinia()

11. 在 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