• 安裝vite

  npm create vite@latest 項(xiàng)目名稱
  // 選擇 vue -> javasrcipt -> 結(jié)束
  

• 安裝配置scss

   1掉蔬、 下載 npm i sass -S
   2再菊、 配置
    // vite.config.js
    export default defineConfig({
       css: {
          preprocessorOptions: {
            scss: {
              additionalData:'@import "./src/styles/mixins.scss";@import "./src/styles/variables.scss";' // 此處導(dǎo)入全局css樣式摹闽，也可以放在app.vue文件上引入
            }
          }
        },
    })
  

• 安裝配置unplugin-auto-import 插件

  unplugin-auto-import 插件 免除掉繁瑣的import

  1股耽、下載
      npm i unplugin-auto-import -D 
  2根盒、配置
      // vite.config.js
      import AutoImport from 'unplugin-auto-import/vite'
      plugins: [
          vue(),
          AutoImport({
              imports: [
                  'vue',
                  'vue-router'
              ]
          })
      ],
  

• 配置@根目錄

    1、下載
      npm install path --save
    2物蝙、配置
      // vite.config.js
      import path from 'path';
      const srcPath = path.resolve(__dirname, 'src');
      // 配置@目錄
      export default defineConfig({
        resolve: {
            alias: [
                { find: '@', replacement: srcPath },
            ],
        },
      })
  

• 安裝配置axios

  1炎滞、下載  
      npm install axios -S
    2、初始化
      // utils/request.js
        import axios from "axios";
    
        const service = axios.create({
        baseURL : import.meta.env.VITE_BASEURL, // 當(dāng)前環(huán)境變量
        timeout:30000,
        withCredentials:true,
        headers:{
        'Content-Type':'application/json',
        'Authorization': import.meta.env.VITE_TOKEN,
        }
        })
        
        // 添加請(qǐng)求攔截器
        service.interceptors.request.use(function (config) {
        // 在發(fā)送請(qǐng)求之前做些什么
        console.log('config',config)
        return config;
        }, function (error) {
        // 對(duì)請(qǐng)求錯(cuò)誤做些什么
        return Promise.reject(error);
        });
        
        // 添加響應(yīng)攔截器
        service.interceptors.response.use(function (response) {
        // 2xx 范圍內(nèi)的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)茬末。
        // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
        return response.data;
        }, function (error) {
        // 超出 2xx 范圍的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)厂榛。
        // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
        return Promise.reject(error);
        });
        export default service
    3盖矫、api
       // api/index.js
        import request from "@/utils/request.js";
        export function search(params){
          return request({
            url:'/v1/search',
            method:'GET',
            params,
          })
        }
    4丽惭、使用
      // home.vue
        import {search} from '@/api/index.js'
        search().then(……)
  

• 安裝配置pinia

    1、下載   
    npm install pinia -S
    2辈双、配置
      // main.js
      import { createPinia } from 'pinia'
      app.use(createPinia())
    3责掏、初始化（單模塊）
      // store/index.js
     import { defineStore } from 'pinia'
      const indexStore = defineStore('index',{
    state: ()=>{
        return {
            conut:1
        }
    },
    getters:{},
    actions:{},
    })
    export default indexStore  
    4、引用
      // home.vue
      import indexStore from '@/store/index.js'
      const indexstore = indexStore()
    console.log(indexstore.conut) // 1
  

• 安裝配置router

    1湃望、下載
         npm install vue-router@4
      2换衬、配置
      // main.js
      import router  from './router/router.js'
      app.use(router)
      // router/index.js
      import { createRouter,createWebHistory} from "vue-router";
      // 路由信息
      const routes = [
          {
              path:'/',
              name:'home',
              component: () => import('@/views/home.vue')
          },
          {
              path:'/index',
              name:'index',
              component: () => import('@/views/index.vue')
          }
      ];
  
      // 導(dǎo)出路由
      const router = createRouter({
          history: createWebHistory(),
          routes
      });
  
      export default router
  

• 安裝配置element-ui-plus（按需導(dǎo)入）

  element-ui-plus官網(wǎng)

  1、 安裝插件
    npm install -D unplugin-vue-components unplugin-auto-import
  2证芭、配置
    // vite.config.ts
    import { defineConfig } from 'vite'
      import AutoImport from 'unplugin-auto-import/vite'
      import Components from 'unplugin-vue-components/vite'
      import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    
    export default defineConfig({
        // ...
        plugins: [
          // ...
          AutoImport({
            resolvers: [ElementPlusResolver()],
          }),
          Components({
            resolvers: [ElementPlusResolver()],
          }),
        ],
      })
  3瞳浦、手動(dòng)導(dǎo)入
    // app.vue
    <template>
        <el-button>I am ElButton</el-button>
      </template>
      <script>
        import { ElButton } from 'element-plus'
        export default {
          components: { ElButton },
        }
      </script>
  
  4、 配置icon  
      // main.js
      import * as ElementPlusIconsVue from '@element-plus/icons-vue'
      
      for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
          app.component(key, component)
      }
  5废士、配置message （不配置這個(gè)會(huì)出現(xiàn)叫潦，提示窗樣式出錯(cuò)的問題）
      import 'element-plus/theme-chalk/el-loading.css';
      import 'element-plus/theme-chalk/el-message.css';
  

• 安裝配置element-ui-plus（全局導(dǎo)入）

    1、下載
      npm install element-plus --save
    2官硝、配置
    // main.js
      import ElementPlus from 'element-plus'
      import 'element-plus/dist/index.css'
      import * as ElementPlusIconsVue from '@element-plus/icons-vue'
  
      import 'element-plus/theme-chalk/el-loading.css';
      import 'element-plus/theme-chalk/el-message.css';
    const app = createApp(App)
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
      app.use(ElementPlus)
  

• 安裝windiCss 個(gè)人認(rèn)為挺好用的矗蕊，省了寫樣式的時(shí)間

  windicss

   1、下載
      npm i -D vite-plugin-windicss windicss
    2氢架、配置 
      // vite.config.js 
        import WindiCSS from 'vite-plugin-windicss'
  
        export default {
          plugins: [
            WindiCSS(),
          ],
        }
      // main.js
        import 'virtual:windi.css'
  
  

• 安裝vueeuse vue提高的一個(gè)函數(shù)庫(kù)

  vueeuse

  1傻咖、安裝
    npm i @vueuse/core
  2、使用-示例
    // app.vue
    <template>
        <div ref="target"></div>
    </template>
    import { onClickOutside } from '@vueuse/core' // 監(jiān)聽點(diǎn)擊位置是否是元素以外
    const target = ref(null)
    // 切換顯示隱藏
      onClickOutside(target, (event) => {
          emits("onClear")
      })
  
  

（以上是我覺得初始化有用的插件岖研，歡迎評(píng)論補(bǔ)充嘻嘻）