硬件

1. 双屏显示器（代码、设计稿、浏览器、沟通工具）
2. 支持宏定义鼠标（前进、后退、自定义宏）

一、脚手架管理平台

• 我的脚手架管理平台git地址
• 将公司所有技术脚手架进行统一管理
• 安装和使用

  npm i -g @webscli/c

  webscli-c init
  // 选择需要的脚手架...

二、脚手架(webpack/vite)

• 我的脚手架git地址
• 为各种技术场景提供对应的脚手架（H5、web、react、vue...）

1. HTML编译

   • HtmlWebpackPlugin
2. CSS编译

   • less编译（less-loader）
   • scss编译（scss-loader）
   • vue样式编译（vue-style-loader）
   • css编译（css-loader、style-loader）
   • 多浏览器兼容（postcss-loader）
3. JS编译

   • vue编译(vue-loader)
   • react编译(babel-loader)
   • babel-loader
   • 预设，比如箭头函数转为function(@babel/preset-env、@babel/preset-react)
   • 新语法补丁polyfill，比如(core.js,generator)
   • 按需引入polyfill（useBuiltIns、corejs）
   • 是否是第三方库，写页面无需配置（run-time）
4. IMG编译

   • HtmlWebpackPlugin
5. 开发环境编译配置

   1. 热更新，热部署（HotModuleReplacementPlugin）
   2. 加速编译dll(webpack/lib/DllPlugin、webpack/lib/DllReferencePlugin)
   3. html、css、js、img可使用基本配置
6. 生产环境编译配置

   1. html编译压缩+hash
      • HtmlWebpackPlugin
   2. css编译压缩+hash
      • 抽离并hash(MiniCssExtractPlugin)
      • 压缩css（TerserJSPlugin,OptimizeCSSAssetsPlugin)
   3. js编译压缩+hash
      • 抽离公共代码(splitChunks)
      • 忽略不常更新的包，比如react.min.js(noParse)
      • 删除包内不需要的，比如只留moment的中文包(IgnorePlugin)
      • 多进程打包、压缩（HappyPack、UglifyJS)
      • 删除无用js（treeshaking自带）
      • 减少闭包scopeHosting(ModuleConcatenationPlugin)
   4. img编译压缩(url-loader)
      • url-loader

三、公用组件

• 我的公用组件git地址
• 我的公用组件预览地址
• 将重复的业务逻辑可封装为公用组件（工号搜索框、部门搜索框...）
• 尽量基于已有的开源组件库，减少开发成本

     npm i @webscom/vue3-coms element-plus @element-plus/icons-vue

  main.js

    import MUI from "@webscom/vue3-coms"
    import "@webscom/vue3-coms/style.css"
    createApp(App).use(ElementPlus).use(MUI).mount('#app')

四、CSS架构

• 我的CSS架构git地址

1. Settings基础样式层，颜色、边框、、阴影、层级等

   • 根据设计稿定义基础样式，在项目settings文件夹下定义变量
   • 在vite.config.js中引入全局
2. Tools层（function和mixin）

   • 引入SCSS框架到tools文件夹
   • 使用框架比如SassMagic
   • 在vite.config.js中引入全局
3. Base层去除各大浏览器自带样式，定义基础元素默认样式（a,button等)

   • 安装normal.css,在main.js引入全局
   • 根据设计稿设置基础元素样式，写入base文件夹，必写（img，p，a）非必写form基本要设置
4. Components层定义样式组件，类似栅格

   • 样式组件(栅格，layout，居中，文本样式等)
   • class用BEM规则，button-waring--fontsize
5. Acss层定义固定属性样式

   • 宽度、高度、圆角、颜色、字体大小，边框
   • 内边距、外边距、z-index,背景色，背景色+透明度
   • 段落省略号等等
6. Theme层

   • html标签上设置
   • theme文件夹创建多个主题

五、插件

• 可提供开发工具的插件进行代码自动生成（我的低代码插件）；
• 人工智能插件的提示、补全等功能

六、代码块

• 将常用代码编入代码块中，提高开发效率。

七、低代码生成工具

• 可自动生成简单页面（比如官网首页、抽奖页面）。
• 可生成表单页面（低代码工具，或者第三方飞书低代码生成平台）。
• 字段配置话。
• 字段输入范围配置化（比如折扣配置文本框）。

八、设计稿直接生成代码

• 可通过sketch或figma的设计稿格式，自动生成代码。
• 可通过第三方网站生成代码（蓝湖）。