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
         }
       }
     },  
   });