UI如何搭建开发环境并修改ant_less文件

文档说明：

1. 适用于设计人员在设计时将应用到的组件公共样式放入公共样式文件，交付给开发人员时，开发可直接应用公共样式文件中的样式，节省开发时间，避免开发人员样式写的过乱；
2. 不满意开发人员修改样式，可自己修改样式后交付给开发样式文件；
3. 如开发人员时间上紧张来不及调整页面样式时，设计人员可自己操作；

一、下载开发软件

首先需下载个常用的开发软件，个人比较喜欢用VScode，这个到官网：https://code.visualstudio.com/下载就行，不纠结于细节；

二、安装Node.js

安装好后，打开vscode终端，看看电脑之前有没有安装过node，npm这些

输入node -v，回车，如安装过，会打印出版本号，如图所示：

如未安装过，它会显示//command not found，则可进入官网：Node.js下载node.js，下载后跟着步骤安装即可，安装后可回到终端敲入相同代码看看有没有安装成功；

三、安装npm

由于新版的node.js已经集成了npm，所以在安装node时，npm也会一并安装好了

输入npm -v来测试下npm是否安装成功;

通常npm运行会比较慢，我们也可以安装cnpm淘宝镜像，这里就不介绍了，网上一大堆教程；

四、安装脚手架

如有项目直接运行的情况下就无需安装，新建项目就需在终端输入

npm install -g @vue/cli

或cnpm install -g @vue/cli

安装成功后，

五、运行项目

打开项目所在文件夹；

在终端输入npm run dev，项目启动后，显示项目dev环境，直接打开即可；

找到公共less文件，通常是在assets〉styles〉xxx.less，我们的示例项目是customize-antd.less这个文件，打开less文件，可以看到很多公共样式代码；

所有的antd样式可以在https://github.com/vueComponent/ant-design-vue/blob/next/components/style/themes/default.less这里找到；

修改样式示例：

分2种情况，第一种是直接修改，未引用，找到对应值修改后直接生效；

第二种如下图，下拉框背景色通过引用了component背景色生效，那么这种情况就需要找到对应的命名component-background，修改它的值后可生效；

如我将component-background改为：#fff，保存样式后，那么下拉框的背景色也就会变为白色，如下图所示，这里只是举例说明，同样的道理，如果样式一样就可直接@引用：

六、交付

将自己想要修改的样式文件单独创一个文件夹丢给前端开发人员，如项目仓库有权限的话可直接通过git命令上传代码合并，这里有点复杂，就不具体介绍了；（注意⚠️：避免代码冲突覆盖，可与开发提前沟通好）