使用vite创建vue+ts项目，整合常用插件（scss、vue-router、pinia、axios等）和配置

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

1. 使用Vite创建一个新的Vue项目:

npm init vite@latest my-vue-app --template vue-ts

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

cd my-vue-app
npm install

3. 安装所需插件:

npm install -D sass
npm install -D @types/node
npm install vue-router@4 pinia axios

4. 在项目中设置路由、Vuex、Pinia和Axios:

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
 
const routes = [
  // 定义路由
];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
 
export default router;

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

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import pinia from './store';
import axios from 'axios';
 
const app = createApp(App);
 
app.use(router);
app.use(pinia);
 
app.config.globalProperties.$axios = axios;
 
app.mount('#app');

5. 配置SCSS加载:

在vite.config.ts中配置SCSS加载器。

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
});

6. 创建SCSS变量文件:

// src/styles/variables.scss
$primary-color: #3498db;
$secondary-color: #e74c3c;

7. 在组件中使用SCSS:

<template>
  <div class="example">Hello World</div>
</template>
 
<script setup lang="ts">
// JavaScript部分
</script>
 
<style lang="scss">
.example {
  color: $primary-color;
}
</style>

以上步骤和代码展示了如何使用Vite创建一个新的Vue 3 + TypeScript项目，并整合了SCSS、Vue Router、Pinia 和 Axios 等常用插件。这为开发者提供了一个基本的项目模板，可以根据具体需求进行扩展和配置。