vite+vue3.0項目從零搭建記錄

ui-項目

---

技術棧

​ vue 、vite 、antd、axios、less、moment、eslint、git、yarn等

開發環境

node>=12.0.0、VSCode

項目創建

1. 初始化項目--默認vue模板
   yarn create @vitejs/app ui-demo --template vue

2. 引入eslint,並初始化eslint規則
   yarn add eslint --dev 然后執行 ./node_modules/.bin/eslint --init 或者 npx eslint --init 生成一個 ESLint 配置文件 .eslintc.js 詳情

3. 引入Prettier

   yarn add prettier --dev

   下載VSCode插件 prettier-eslint用於格式化代碼

   安裝詳情

4. husky + lint-staged 插件，提供git commit時，格式化代碼的能力，規范代碼風格。

5. 引入antd第三方UI庫

6. mock數據采用 vite-plugin-mock 詳情

7. 引入插件 rollup-plugin-visualizer ,對打包進行可視化分析

項目開發

1. 按需引入antd組件庫

   //下載插件
    yarn add vite-plugin-components vite-plugin-style-import -D	
   
   //vite.config.js
   import ViteComponents, { AntDesignVueResolver } from "vite-plugin-components";
   import styleImport from "vite-plugin-style-import";
   
   export default defineConfig({ 
     plugins:[
       ...
       ViteComponents({
         customComponentResolvers: [
           AntDesignVueResolver({
             //按需加載時使用less文件的樣式,用於主題色更改
             importLess: true
           })
         ]
       }),
       //配合按需加載組件,去按需加載相應組件的樣式
       styleImport({
         libs: [
           {
             libraryName: "ant-design-vue",
             esModule: true,
             resolveStyle: (name) => {
               return `ant-design-vue/es/${name}/style/index`;
             }
           }
         ]
       }),
       ...
     ]
   });
   
   
   

2. 修改主題色，配置全局樣式變量文件

   //下載插件
    yarn add less -D	
   //雖然vite預置了 less-loader，但是相應的less插件還是需要下載的。
   //vite.config.js
   export default defineConfig({ 
     plugins:[
       ...
     ],
     css: {
       //樣式預處理配置選項
       preprocessorOptions: {
         less: {
           modifyVars: {
             // 更改主題在這里
             "@primary-color": "#3F87FF", //全局主色
             "@link-color": "#3F87FF", // 鏈接色
             "@primary-6": "#69A1FF",
           },
           // 引入 var.scss 這樣就可以在全局中使用 var.scss中預定義的變量了
           // 給導入的路徑最后加上 ;
           additionalData: "@import './src/common/style/var.less';",
           //在JS中使用
           javascriptEnabled: true
         }
       }
     },  
   });