开始

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

vite

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

下载vite 选择项目启动

//npm
npm init vite@latest

//yarn
yarn create vite

eslint

引入eslintvscode记得下载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

安装prettiervscode也可以安装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的主题切换方式如下:

  • 第一步,引入antdless样式。

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

    这里为了之后样式主题动态切换,我把引入的antdless样式放到另一个文件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('切换颜色');
    };

    image.png

    点击bar切换后:

    image.png

Last modification:November 15, 2021
如果觉得我的文章对你有用,请随意赞赏