Vue2起项目，我做了这些事

type

status

date

slug

summary

技术栈

就像标题上所说的，当然是vue了

考虑到现在vue3的生态还不全面，所以我们选择了vue2+elemnt UI

工具库使用Lodash

样式

windicss

scss

less 为什么我们使用了两个预处理器呢，因为scss在功能上更加优秀，但是我们公司的业务，需要大量用到Ant design的TreeSelect组件，Ant design需要使用到less，至于为什么使用windicss而不是tailwind的。是因为windicss拥有更优秀的变量用法，并且速度要远超tailwind

全局样式目录：@/style

variable.scss: 全局变量管理

mixins.scss: 全局 Mixins 管理

global.scss: 全局样式

coverComponents.scss: 用于全局覆盖组件库的样式

其中 variable.scss 和 mixins.scss 会优先于 global.css 加载，并且可以不通过 import 的方式在项目中任何位置使用这些变量和 mixins。 注意：sass-loader>9.0.0时，不再拥有prependData这个属性，需要使用下面第2种写法

基础css样式

我们在项目中全局使用了华为的鸿蒙字体，带给windows用户更好的使用体验，使用font-display: swap;让项目中，在字体没有完全加载时，先使用默认字体显示。

美化了滚动条

静态资源加载页面

首次加载页面时，会产生大量的白屏时间，这时做一个 loading 效果看起来会很友好，其实很简单，直接在 public/index.html 里写一些静态的样式即可。

组件库ant design的处理

通过 babel-plugin-import 使 Ant Design Vue 的组件样式可以按需加载

可以按需引入，打包后的 CSS 体积取决于你引用了多少个组件

干掉无用的图标

Ant Design Vue 把所有的 Icon 一次性引入（不管你因用了多少个组件），这使得体积打包后图标所占的体积竟然有几百 kb 之多。这些图标大多数不会被设计师所采纳，所以部分图标都应该被干掉：

创建一个 icons.js 来管理 Ant Design Vue 图标，这里以一个 Loading 图标为例：

如何知道你要加载的图标在什么路径下？

在 @ant-design/icons/lib 目录下有三种风格的图标，分别是 fill、outline、twotone，这里面内部的文件并不是 svg 格式，而是 js 和 ts 格式，这就是为什么我们可以这么引入图标的关键所在了。下一步是通过配置 vue.config.js 将这个文件引入进来：

构建优化

包分析工具

构建代码之后，到底是什么占用了这么多空间？靠直觉猜测或者使用 webpack-bundle-analyzer

开启 Gzip

路由懒加载

这块 @vue/cli 已经帮忙处理好了，但也需要了解一下他的原理和如何配置。

webpackChunkName 这条注释还是很有必要加的，至少你打包后知道又是哪个页面变得又臭又大。

解决 Moment 多国语

解决到这之后，Ant Design Vue 居然还很大，这是因为 moment 是 Ant Design Vue 中有强依赖该插件，所以使用 webpack 插件减小打包体积，这里我们只保留 zh-cn 语言包：

Lodash的Tree Shaking

要借助vue-lodash这个依赖做到

项目自动格式化

网上很多格式化都是依赖于编辑器的各种配置，这里说一个不依赖于编辑器，哪怕是记事本也能自动格式化的方法，依赖于eslint-loader

安装eslint-loader npm i eslint-loader -D

在vue.config.js中配置

这样做以后即使是记事本，只要项目运行起来了，在保存的瞬间也可以被格式化。不过根据编辑器不同，在编辑代码界面中，代码的更新速度可能略有不同。 Vs code可能会在热更新到一半的时候发生变动，webstorm则需要数秒后或者切换一下文件再切回来才发生变动，记事本则需要关闭重新打开。当然我们更推荐使用编辑器的格式化功能，这个只作为一个兜底方案。

开发规范

ESLint

不管是多人合作还是个人项目，代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。我们使用了https://github.com/standard/standard

Vuex

当项目越来越大是如果Vuex中的东西过多，会导致难以维护。我们将它拆分成模块化,使用自动引入的方式，进行使用。

CSS 规范

正常情况下，使用windicss进行css的编写，如果确实需要编写额外的css使用BEM规范

提交规范

我们使用了Husky、lint-staged、commitlint以及上面的代码自动格式化，来保证提交到仓库中的代码不会是💩

配置Husky

首先执行安装命令 npm install husky --save-dev

要在安装后自动启用钩子，我们需要执行npm set-script prepare "husky install"

如果上面这一行npm set-script命令不能执行，可在package.json中手动添加，也可升级npm版本至7.x，执行npx husky-init命令，快速初始化一个husky，会看到目录下生成了一个.husky文件夹

配置lint-staged

执行 npm install lint-staged -D 命令, 在package.json添加如下代码(指定检查文件，详细配置可见官网)：

利用commitlint配置commit规范

执行安装命令npm install -g @commitlint/cli @commitlint/config-conventional

在根目录新建commitlint.config.js文件，添加如下代码(这里@commitlint/config-conventional 提供了官方的规则扩展，更多配置见官网)：

实现部分

添加钩子，执行npx husky add .husky/pre-commit "npx lint-staged"(注意，如果使用项目使用的是npm，此处使用的是npx，而非npm,且后面内容部分一定是双引号）执行命令后会在.husky文件下生成一个pre-commit文件，内容如下：

执行npx husky add .husky/commit-msg "npx commitlint -e $1",执行命令后会在.husky文件下生成一个commit-msg,内容如下：

执行npx husky add .husky/post-commit "git pull, git push",执行命令后会在.husky文件下生成一个post-commit,内容如下：

生成的钩子文件里的命令可以根据自己需要随意修改。

此后commit规范必须为commitlint.config.js文件中声明的前缀加冒号空格。比如 [feat: 新功能] 否则将会提交失败。