开始

刚入职，了解了公司的基本技术栈，用的vue3+ts+vite+antd-vue+pinia，技术基本都是比较新的，学了那么久前端的我意识到前端真是学无止尽，你的学习速度跟不上新技术迭代速度了哇~~~。废话不多说开始！！！

vite

vite作为vue作者强力推荐的一款前端构建工具,代码打包速度相较于一些其他的打包构建工具提升很明显。

下载vite 选择项目启动

//npm
npm init vite@latest

//yarn
yarn create vite

eslint

引入eslint，vscode记得下载ESLint插件

这里我通过cli方式创建eslint

//npm
npm install eslint
npx eslint --init

//yarn
yarn add eslint
yarn eslint --init

之后根据提示进行选择，选择后会检查依赖是否齐全，否则的话就提示下载依赖，但是默认好像是使用npm下载，可以取消后根据提示信息使用yarn手动安装这些依赖之后再重新eslint init一次。初始化之后可以定义一些未使用的变量来测试eslint是否生效。

检查：
这里检查src下的所有文件。

eslint './src/*'

自动修复一些错误：

eslint --fix './src/*'

引入prettier

安装prettier，vscode也可以安装prettier插件。

//npm
npm install prettier -D

//yarn
yarn add prettier -D

配置：

详见前端开发工作流。

这里主要记录下和eslint的结合使用，因为这两者在使用上都是对代码进行格式化，所以会有一些规则上的冲突，这里安装以下插件来解决：

//npm
npm install eslint-config-prettier eslint-plugin-prettier -D

//yarn
yarn add eslint-plugin-prettier eslint-config-prettier -D

在.eslintrc.js中配置：

//...
extends: [
//...
+   "prettier",
+   "prettier/@typescript-eslint",
+   "plugin:prettier/recommended"
],
//...

husky/pre-commit/msg-commit/lint-staged配置

详见前端开发工作流。

ant-design-vue使用

下载安装：

//npm
npm i --save ant-design-vue@next

//yarn
yarn add ant-design-vue@next -S

按需引入

这里主要讲解下如何按需引入。

首先下载插件：

//npm
npm install unplugin-vue-components -D

//yarn
yarn add unplugin-vue-components -D

vite的配置在vite.config.js中设置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入下面这两个依赖
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
   //插件导入
    Components({
      resolvers: [AntDesignVueResolver()]
    })
  ]
})

通过上述的的配置就可直接使用antd的组件了，不用再去import导入了。这个插件会自动解析使用过的组件来生成按需导入的import语句。

只管使用antd就行了~~~

动态主题切换

使用vite的主题切换方式如下：

• 第一步，引入antd的less样式。

  import { createApp } from 'vue'
  
  import App from './App.vue'
  
  // 引入less用于定制化样式
  import './theme/default-vars.less'
  
  createApp(App).mount('#app')

  这里为了之后样式主题动态切换，我把引入的antd的less样式放到另一个文件default-var.less了：

  /*引入的antd样式*/
  @import 'ant-design-vue/dist/antd.less';
  
  //less变量
  @primary-color: #1890ff; // 全局主色
  @link-color: #1890ff; // 链接色
  @success-color: #52c41a; // 成功色

• 第二步，下载less依赖。

  vite虽然内置了一些css预处理器支持模块，但是预处理器本身的核心依赖是没有的，需要自己下载。

  //npm
  npm install less -D
  
  //yarn
  yarn add less -D

• 第三步修改less变量。

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import Components from 'unplugin-vue-components/vite'
  import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
  
  export default defineConfig({
    plugins: [
      vue(),
      Components({
        resolvers: [AntDesignVueResolver()]
      })
    ],
    css: {
      preprocessorOptions: {
        less: {
           //开启less的js支持
          javascriptEnabled: true,
          modifyVars: {
             //这里就修改了主题色，还有很多的变量可以在官网查看
            'primary-color': '#bfa'
          }
        }
      }
    },
  })
  

动态修改主题颜色

之前的是静态的修改主题色，我们要实现动态的样式切换。这里推荐使用一个大佬开发的动态样式切换编译插件：@zougt/vite-plugin-theme-preprocessor。这个插件是基于vite v2.0+的插件。具体操作如下：

• 第一步，安装和下载。

  # use npm
  npm install @zougt/vite-plugin-theme-preprocessor -D
  
  # use yarn
  yarn add @zougt/vite-plugin-theme-preprocessor -D

• 第二步，vite.config.js导入插件。

  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  import Components from 'unplugin-vue-components/vite';
  import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
  import themePreprocessorPlugin from '@zougt/vite-plugin-theme-preprocessor';
  import path from 'path';
  
  export default defineConfig({
    plugins: [
      vue(),
      Components({
        resolvers: [AntDesignVueResolver()]
      }),
      themePreprocessorPlugin({
        less: {
          multipleScopeVars: [
            {
              scopeName: 'theme-default',
              path: path.resolve('src/theme/default-vars.less')
            },
            {
              scopeName: 'theme-green',
              path: path.resolve('src/theme/green-vars.less')
            }
          ]
        }
      })
    ],
    //...
  });

• 第三步，创建不同主题样式的less文件。
  vite中的配置引入了不同的主题样式，之后这些样式文件都会编译成css，只是类民不同，我们通过改变类名就可以实现动态切换了。
  default-vars.less文件：

  @import 'ant-design-vue/dist/antd.less';
  
  @primary-color: #1890ff; // 全局主色
  @link-color: #1890ff; // 链接色
  @success-color: #52c41a; // 成功色

  green-vars.less文件：

  @import 'ant-design-vue/dist/antd.less';
  
  @primary-color: #bfa; // 全局主色
  @link-color: #bfa; // 链接色
  @success-color: #bfa; // 成功色

• 第四步，切换样式。

  import { toggleTheme } from '@zougt/vite-plugin-theme-preprocessor/dist/browser-utils.js';
  
  export const changeTheme = (scopeName: string): void => {
    toggleTheme({
      scopeName
    });
  };

  另一个文件导入使用：

  //作为按钮回调函数
  
  const changeColor = () => {
    //这里传入的参数就是vite.config.js中scopName
    changeTheme('theme-green');
    console.log('切换颜色');
  };

  

  点击bar切换后：