1 项目开始
1.1 工具清单
01.常用信息1
a.工具类
实用库：xijs
实用库：Ramda
实用库：Lodash.js / Radash.js
实用库：es-toolkit
算术运算：bigjs
算术运算：decimaljs
算术运算：bignumber.js
表单校验：validator
表单校验：validate.js
处理url参数：qs.js
时间和日期：day.js
处理cookies：js-cookie
Office三件套：vue-office实现Word、Excel和PDF预览功能
创建可重用模板：createReusableTemplate，封装子组件
b.相关工具
vue-best-verify：这是一个基于vue3的表单验证库，创建这个库的原因是 element-plus antd-vue 等，其内部的表单组件太TMD难用了
vue-monoplasty-slide-verify：基于滑动式的验证码，免于字母验证码的繁琐输入，用于网页注册或者登录
-----------------------------------------------------------------------------------------------------
node-modules-inspector：依赖查看
unplugin-vue-inspector：Ctrl + Shift + 元素，跳转源码
vite-plugin-turbo-console：点击控制台中的console.log打印信息跳转到编辑器
-----------------------------------------------------------------------------------------------------
VueUse：Vue组合式API的实用工具集
pinia-plugin-persistedstate：持久化pinia数据，中文官网，使用简单，绝对的后起之秀
vuex-persistedstate：持久化pinia｜vuex数据，vue2时代的产物，主要用于vuex
c.框架选型
Rakon figma模版
Shipany next.js模版
Mksaas next.js模版
herouipro next.js模版
Supastarter next.js模版
-----------------------------------------------------------------------------------------------------
flutter写不了小程序，只能写app
微信小程序，我一般就是uniapp写，写原生就用官网组件，原生的写的太慢
d.技巧
微前端：qiankun
回调地狱：使用Promise替代Ajax
Vue Vine：类似react的函数式组件
数据管理框架：Zustand、reduce
02.常用信息2
a.vite插件
mock数据：vite-plugin-mock
自动重启：vite-plugin-restart
自定义组件自动引入：unplugin-vue-components
element-plus组件自动引入：unplugin-vue-components
vue3等插件hooks自动引入：unplugin-auto-import/vite
message, notification等引入样式自动引入：vite-plugin-style-import
b.组件
vxe-table：复杂表格
Surely Vue Table：复杂表格
variant-form：低代码可视化表单
c.加密
md5 (^2.3.0)：这是 MD5 哈希算法的实现，通常用于生成数据的 MD5 摘要。
crypto-js (^4.2.0)：这是一个常用的前端加密库，提供了多种加密算法（如 AES、MD5、SHA1、SHA256 等）。它用于在前端进行加密和解密操作。
@zxcvbn-ts/core (^3.0.4)：这是一个密码强度检测库，虽然它本身不进行加密操作，但通常与密码相关的验证、加密任务一起使用。
d.Surely Vue Table
Surely Vue Table 是 Ant Design Vue 团队旗下的“高端”组件之一，该组件致力于解决大数据渲染、图表集成等复杂高频问题。 使用该组件可以流畅滚动 10 万行、10 万列的数据，你不必担心页面卡顿造成用户投诉，进而影响业务进展。
该组件虽然是 Ant Design Vue 团队开发，但你依然可以将其使用在任何组件库中，它并不是 Ant Design Vue 的专属组件。
Surely Vue 默认使用虚拟滚动提升渲染速度，树形数据、展开内容、嵌套子表格、行列合并、自动行高、横向、纵向、吸顶、固定头、固定列等等一切都支持虚拟滚动。
很遗憾，这是一个商业化组件，不过不用担心，你依然可以免费使用它，但你不可以移除水印，当然也不可以隐藏水印。我们一直在保证 Ant Design Vue 完全开源的情况下，不断寻找靠谱的商业模式，期望通过“高端”组件集合获取一定的收入，招聘更多的技术专家，开发更多的功能。我想您也一定可以理解并支持我们，Surely Vue 的商业化将会有助于 Ant Design Vue 更快的成长。
有必要再次声明，Ant Design Vue 并不是蚂蚁金服开发和维护，自诞生之日(2017 年)起，便是由 tangjinzhou 联合众多专业开发者进行开发维护，Surely Vue 是该团队企业化运营后推出的商业产品。四年来不断的坚持得到了众多开发者的认可，您不用担心他是 KPI 产物最后弃坑，更加无须担心个人开发者跑路，因为我们有众多付费企业客户，我们有健康可持续的稳定收入。
e.vite.config.ts
import Inspector from 'unplugin-vue-inspector/vite'
import TurboConsole from 'unplugin-turbo-console/vite'
plugins: [createVitePlugins(viteEnv, isBuild), Inspector({launchEditor: 'webstorm'}), TurboConsole()],
1.2 版本迭代
01.常见信息1
a.前端框架
Node.js：主流
Deno：没什么必要学
Bun：完全兼容node，性能更好
Nextjs + TailwindCSS + Shadcn/ui
b.后端框架
NestJS：企业级，类似Java Spring架构
Hono：轻量，API简洁
c.数据库
Prisma：成熟稳定且足够现代的ORM方案
Drizzle：新兴方案，API设计简洁，适合对能力有自信的人
d.其他
NextAuth.js: Nextjs的鉴权库
SWR: Nextjs 团队出品，HTTP 请求库，解决组件数据请求和缓存的问题
zod: Schema 验证库，可以用于前后端数据和表单的校验
Zustand：一个简单的 React 状态管理库，可以替代 Redux
jotai：一个基于原子状态的状态管理库，具体可以根据需要选择
driverjs: 引导用户操作的库，可以用于新手引导、操作引导等
wxt: 一个类似 Nuxt 的浏览器插件开发框架，可以用于开发 Chrome 、Firefox 等插件
orama: 前端全文搜索替代 algolia 的方案，nodejs 新官网就是使用的这个搜索引擎
e.部署
Fly.io
Railway
Cloudflare Worker：按量付费
f.小程序
团队 React 技术栈为主 -> 选 Taro
团队 Vue 技术栈为主 -> Taro 和 uni-app 都可以（Taro 对 Vue 3 支持很好）
02.常见信息2
a.TypeScript宣布原生代码移植计划：构建速度提升10倍
TypeScript使用go语言移植TypeScript编译器，目的是为了解决大型代码库下的性能瓶颈问题，代号Corsa
1.采用Go语言实现原生移植
2.主流项目测试显示构建速度提升9-13倍（如VS Code从77.8秒降至7.5秒）
3.VS Code项目加载时间从9.6秒缩短至1.2秒（8倍提升）
4.内存占用预计减少50%以上，未来将进一步优化
团队解释选择Go而非Rust/C#的原因：开发效率高（GC机制降低复杂度） 工具链成熟（快速构建、跨平台支持）
03.常见信息3
a.分类1
Vue 3：3.5.x
Vue 2：2.7.16
b.分类2
Pinia：3.0，不支持vue2
Vue Vapor：无虚拟DOM版本
React Signals：React状态管理库
c.分类3
ArcoDesign：字节跳动出品的企业级设计系统
Ant Designx 1.0：一个基于 Ant Design 的全新 AGI 组件库，使用 React 构建 AI 驱动的用户交互变得更简单了
d.分类4
React：版本 18.2，官方推荐使用Vite
VitePlus：统一前端工具链
e.应用框架
Taro：跨端跨框架
tango-boot：网易云
f.抓包工具
fiddler
charles
emmet
wireshark
g.AI框架
brain.js
04.常见信息4
a.构建工具
Grunt、Gulp、Webpack、Babel、Parcel、Critters、sucrase、Webpack Config Tool、JSUI、PWA Universal Builder、VuePress
b.框架和库
PWA Starter Kit、PaperCSS、boardgame.io、Stimulus、sapper、Reakit、Evergreen
c.HTML和CSS工具
keyframes.app、Emotion、modern-normalize、layerJS、css-blocks、usebasin、mustard
d.javascript工具
ScrollHint、ToastUl editor、FilePond、Dinero.js、Swup、Selection.js、Glider.js、ScrollOut
e.图标、图表工具
Orion Icon Library、Frappe Charts、SVGator、ApexCharts、MapKit JS、Img2、Lozad
f.React工具
RSUITE、Pagedraw、react-smooth-dnd、Unstated、Reach Router、SVGR、React Spreadsheet Grid
g.测试和数据工具
webhint、Airtap、mkcert、Puppeteer Recorder、jsonstore.io、Initab、lambdatest
h.9大前端JS框架
Vue、React、Angular、QucikUI、Layui、Avalon、Dojo、Ember、Aurelia
i.8大前端UI框架-PC端
Element UI、vuetify、Ant Design、Bootstrap、layui、Vant-UI、Framework7、WEUI
j.8大前端UI框架-移动端
vant UI、cube UI、mint UI、Zoom UI
k.10大NodeJS框架
Hapi.JS、Express.JS、Socket.io、Total.JS、Sail.JS、Derby、Meteor.JS、Loopback、Koa、NestJS
05.预处理器三剑客(Sass/less/Stylus)
a.分类
Sass/Scss，需要Ruby环境
Sass/Scss，需要Ruby环境，文件扩展名是.sass和.scss，推荐.scss
Sass/Scss，需要Ruby环境，.sass不要大括号，其次不需要分号，还有行首空格问题
Sass/Scss，编译器有三种dart-sass(推荐)、Lib-sass/node-sass(不推荐)、ruby-sass(不推荐)
Sass/Scss，SASS输出样式的风格可以有四种选择，默认为nested。全部类别为：嵌套缩进的css代码、expanded：展开的多行css代码、compact：简洁格式的css代码、compressed：压缩后的css代码
b.说明
Less，需要引入less.js(浏览器)，也可在服务端运行 (借助 Node.js)，文件扩展名是.less
stylus，需要安装node，文件扩展名是.styl
js的两大圣书，一个红宝石（JavaScript高级程序设计），一个绿犀牛（JavaScript权威指南）
06.CSS框架
a.分类1
输入框：Bootstrap Tags Input
输入框长度：Bootstrap Maxlength
文件输入框：Bootstrap File Input
选择框：Bootstrap Select
选择框多选：Bootstrap Multiselect
表格插件：Bootstrap Table
日期控件：Bootstrap Datepicker
通知控件：Bootstrap Notify
颜色选择：Bootstrap Colorpicker
开关按钮：Bootstrap Switch
滑动条控件：Bootstrap Slider
弹框：Bootstrap Dialog
确定对话框：Bootstrap Confirmation
b.分类2
BootstrapVue（结合Bootstrap、VUE）
React-Bootstrap（结合Bootstrap、React）
Angular UI Bootstrap（结合Bootstrap、Angular）
c.分类3
国内用Layui，国外用BootStrap
Layui（国产）：采用自身轻量级模块化规范，非常适合网页界面的快速构建
Bootstrap（twitter）：提供了一整套响应式设计的组件和网格系统，易于使用和定制，适合快速开发
d.分类4
Foundation：功能强大的响应式框架，提供了许多可定制的组件和布局选项，适用于复杂的项目
Bulma：基于 Flexbox 的现代响应式框架，语法简洁，易于使用，适合快速开发
Materialize：基于 Google 的 Material Design 规范，提供了 Material Design 风格的组件和布局
Semantic UI：使用自然语言风格的类名，使代码更具可读性，提供了多种主题和组件
UIKit：轻量级的前端框架，提供了简单易用的组件和工具，易于集成和扩展
Ant Design：由 Ant Financial 开发，提供了一整套企业级的设计系统和组件，适合构建复杂的业务应用
Chakra UI：基于组件的 CSS 框架，提供了可访问性强、易于定制的组件，主要用于 React 应用
Pure CSS：一个极简的 CSS 框架，提供了一些基础的样式和组件，适合需要轻量级解决方案的项目
Tailwind CSS：一个功能类优先的框架，提供了大量的工具类用于构建自定义设计，灵活且可高度定制
UnoCSS：它在构建时动态生成所需的 CSS 类，依据实际使用情况来生成样式，减少冗余和不必要的 CSS 类
07.与Tailwind CSS相关的PostCSS插件
a.分类
tailwindcss: 这是 Tailwind CSS 的核心插件，用于生成 Tailwind 的实用类
postcss-purgecss: 用于删除未使用的 CSS 类，通常在生产环境中使用，以减少 CSS 文件的大小，Tailwind CSS 可以与 PurgeCSS 配合使用，确保只保留实际使用的类
autoprefixer: 与 Tailwind CSS 一起使用，自动添加浏览器前缀，确保兼容性
b.PostCS插件
Autoprefixer: 自动为 CSS 规则添加浏览器前缀，以确保兼容性
postcss-import: 允许使用 @import 语句来导入其他 CSS 文件
postcss-nested: 支持嵌套的 CSS 规则，类似于 Sass 的嵌套语法
cssnano: 一个优化和压缩 CSS 的插件，用于生产环境
postcss-preset-env: 允许使用最新的 CSS 特性，并且会自动将它们转换为更兼容的格式
postcss-simple-vars: 允许在 CSS 中使用变量
postcss-mixins: 允许在 CSS 中定义和使用混入（mixin）
postcss-custom-media: 允许定义和使用自定义媒体查询
postcss-custom-properties: 支持 CSS 自定义属性（CSS 变量）
postcss-flexbugs-fixes: 修复 Flexbox 在不同浏览器中的一些已知问题
c.配置文件，postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.html', './src/**/*.js'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
]
}
1.3 语言特性
01.iframe与非iframe
a.iframe版本
iframe 是 HTML 中用于嵌入另一个 HTML 页面到当前页面的标签。使用 iframe 嵌入内容时，有以下几个特点：
独立性：iframe 内的内容与主页面是独立的，意味着 iframe 内的 CSS 和 JavaScript 不会直接影响主页面，反之亦然。
隔离：由于内容的独立性，iframe 内的资源加载、样式和脚本执行都是独立的，这可以增加页面的安全性和稳定性。
跨域限制：如果 iframe 加载的是跨域内容，某些功能（如 JavaScript 操作）可能会受到限制。
样式调整：需要注意 iframe 本身的样式调整，如宽度、高度、边框等。此外，如果需要让 Bootstrap 样式在 iframe 中生效，需在 iframe 内部引用 Bootstrap 的 CSS 和 JavaScript。
b.非iframe版本
非 iframe 版本通常指的是直接在主页面中使用 Bootstrap 进行开发，而不借助 iframe。其特点包括：
全局应用：Bootstrap 的 CSS 和 JavaScript 会全局应用于主页面和其中的所有元素。
更灵活的布局：无需处理 iframe 带来的独立性问题，布局和响应式设计更为方便。
更方便的交互：可以更方便地实现页面内元素的交互和动态效果，不受 iframe 的限制。
性能优势：减少了额外的 HTTP 请求（加载 iframe），因此页面加载性能可能更好。
具体应用场景分析
使用 iframe 的场景：通常用于嵌入第三方内容（如嵌入视频、地图、小工具等），或者需要将某些内容隔离开来避免冲突时。
直接使用 Bootstrap 的场景：适用于大多数前端开发场景，尤其是需要构建整体一致、响应迅速的用户界面时。
c.总结
使用 iframe 版本时，Bootstrap 的样式和脚本需要在 iframe 内部引用，内容独立性较强。
非 iframe 版本则直接在主页面引用 Bootstrap，可以更方便地实现页面布局和交互效果。
02.Vue3和React都支持函数式编程
a.说明1
vue自动挡，react手动挡
VUE，简称SFC
低代码：会的用不上，不会的用不了
Vue 3 和 React 都支持函数式编程，但 React 更早地全面采用了这种范式，而 Vue 3 则在保留传统选项 API 的同时，
引入了更现代化的组合 API，以更好地支持函数式编程。两者在函数式编程的支持上各有特色和优势
b.说明2
1.设计理念：
React 自始至终都是函数式编程的支持者，类组件逐渐被函数组件取代
Vue 传统上以模板和选项 API 为主，但 Vue 3 引入了组合 API，显著增强了函数式编程的支持
2.状态管理：
React 使用 useState 和 useReducer 等 Hook 来管理状态
Vue 3 使用 ref 和 reactive 等 API 来管理状态
3.逻辑复用：
React 通过自定义 Hook 实现逻辑复用
Vue 3 通过组合函数实现逻辑复用
2 技术栈
2.1 Layout
01.汇总
流式布局：Normal Flow
浮动布局：Float
定位布局：Position
弹性布局：Flexbox
网格布局：Grid
多列布局：Multi-column
表格布局：Table
响应式布局：媒体查询、移动优先、流体网格
容器查询布局：@container
02.基本信息
a.流式布局 (Normal Flow)
默认的文档流布局
块级元素垂直排列，行内元素水平排列
b.浮动布局 (Float)
使用 float: left/right
早期常用，现已较少使用
c.定位布局 (Position)
static - 默认
relative - 相对定位
absolute - 绝对定位
fixed - 固定定位
sticky - 粘性定位
d.Flexbox 弹性布局
display: flex
一维布局（行或列）
适合组件级布局
e.Grid 网格布局
display: grid
二维布局（行和列）
适合页面级布局
f.多列布局 (Multi-column)
column-count, column-width
类似报纸排版
g.表格布局 (Table)
display: table
不推荐用于页面布局
h.响应式布局
媒体查询 (Media Queries)
移动优先 (Mobile First)
流体网格 (Fluid Grid)
i.容器查询布局
@container
基于容器而非视口的响应式布局
2.2 VoidZero
01.Vite 6.0
a.时间
2024年11月26日
Environment API 的引入标志着 Vite 在构建工具领域的又一重要里程碑。
这不仅为框架开发者提供了更强大的工具，也为整个前端生态系统带来了新的可能性。
b.多环境配置
export default defineConfig({
experimental: {
environments: {
client: {
entry: 'src/entry-client.tsx',
env: { SSR: 'false' }
},
server: {
entry: 'src/entry-server.tsx',
env: { SSR: 'true' }
}
}
}
})
c.环境隔离能力
独立的入口文件配置
环境特定的构建设置
严格的环境变量隔离
d.实际应用场景
a.SSR 框架开发
客户端与服务端代码分离
环境特定的插件支持
精确的依赖分析
b.多平台应用
Web、Desktop、Mobile 多端统一管理
平台特定的构建优化
条件编译支持
e.其他重要更新
a.Node.js 支持
支持 Node.js 18、20 和 22+ 版本
移除 Node.js 21 支持
Node.js 18 将支持至 2025 年 4 月
b.技术升级
resolve.conditions 默认值优化
JSON stringify 增强
HTML 元素资产引用扩展
Sass 现代 API 默认启用
库模式下的 CSS 文件名自定义
c.企业级应用支持
OpenAI、Google、Apple、Microsoft、NASA、Shopify、Cloudflare、GitLab、Reddit、Linear 等科技巨头都在使用 Vite。
这充分证明了 Vite 在企业级应用中的可靠性和性能优势。
02.VoidZero开源版图
a.介绍
基于构建工具的测试工具：Vitest
Web环境的构建工具：Vite，版本 6.0（2024年11月26日）
打包工具：Rolldown
底层工具：oxc-parser、oxlint、oxc-resolver、oxc-transform
-----------------------------------------------------------------------------------------------------
VoidZero是一家开发JS工具链的公司，主要采用老带新策略开发开源产品
具体来说，是将上层开源产品Vite（老）的流量导给下层开源产品Rolldown（新）
除此之外，还有一家做JS技术栈开源产品的公司Vercel，也在采用老带新策略
不过他们的策略略有不同，他们是将下层开源产品React（老）的流量导给上层开源产品Next.js（新），并最终导给自家的云服务
b.工具链
TanStack Start (TS)
└── SolidStart (TS)
└── Solid.js (TS)
Vinxi (JS)
LIT (TS)
Alpine (JS)
Qwik / City (TS)
Analog (TS)
Angular (TS)
nuxt (TS)
Vue.js (TS)
Astro / Starlight (TS)
Svelte / Kit (JS)
Preact (JS)
React (JS)
Remix (TS)
Vite (TS)
└── Bundling with Vite
c.横向是指最底层OXC工具箱中一系列工具构成的横向链条
oxc-parser：用于解析.js(x)和.ts(x)，对标swc，基准测试据称比swc快2倍
oxlint，对标Eslint，基准测试据称比Eslint快50～100倍
oxc-resolver，解析esm、cjs文件路径，对标webpack/enhanced-resolve，基准测试据称比webpack快28倍
oxc-transform，转换jsx/tsx/ts到js，对标babel与ts编译器相关功能
d.纵向是指不断基于下层工具构建的上层工具组成的纵向链条
oxc-parser、oxc-resolver、oxc-transform为上层工具Rolldown提供了AST、文件路径解析、jsx/tsx/ts转js的能力
Rolldown作为bundler（打包器），为上层构建工具Vite提供打包编译能力
Vite作为web环境的构建工具，为上层工具（比如Vitest、Vue、VitePress...）提供构建能力
Vite驱动的前端框架Vue，又作为全栈框架Nuxt的元框架
e.愿景中所谓统一、高性能主要指两点：
基于纵向链条，所有工具都基于同一个AST（oxc-parser产生的），同一套路径解析（oxc-resolver产生的）。
相比当前JS工具链中工具各自为政（Prettier、Eslint、Babel等各自都会解析AST），统一的工具链显然更高效。
所有工具底层都基于Rust构建，相比JS工具性能更高
2.3 Monorepo
01.定义
Monorepo架构是一种软件开发方法，其中多个项目的代码库存储在同一个版本控制仓库中
与传统的每个项目单独一个仓库（称为多仓库或polyrepo）不同，monorepo将所有相关项目的代码集中在一起进行管理
02.优点
代码共享和重用：由于所有代码都在同一个仓库中，团队可以更方便地共享和重用代码模块
一致性和标准化：可以更容易地在整个代码库中实施一致的编码标准和工具配置
简化依赖管理：在同一个仓库中管理依赖关系，可以减少版本冲突和依赖管理的复杂性
原子性变更：可以在一个提交中对多个项目进行变更，确保变更的一致性和完整性
更好的协作：团队成员可以更容易地查看和理解整个代码库的结构和依赖关系，促进协作
03.缺点
规模管理：随着项目的增长，仓库可能变得非常庞大，导致性能问题
权限管理：需要更复杂的权限管理策略，以确保不同团队对代码的访问权限
总体来说，monorepo适合那些需要在多个项目之间进行紧密协作和共享代码的团队
04.应用场景
Google：Google是Monorepo架构的早期采用者之一，他们将大部分代码库集中在一个巨大的Monorepo中进行管理。这使得Google能够在多个项目之间实现高效的代码共享和协作
Facebook：Facebook也使用Monorepo来管理他们的代码库，包括React等开源项目。通过Monorepo，Facebook能够更好地管理依赖关系和版本控制
Vue.js：Vue.js的开发团队使用Monorepo来管理其核心库和相关工具。通过这种方式，Vue.js团队可以更方便地进行版本同步和功能集成
Babel：Babel是一个JavaScript编译器项目，它使用Monorepo来管理其核心库和插件。这样可以确保所有组件在开发和发布时保持一致
Angular：Angular框架也采用了Monorepo架构来管理其核心库、工具和相关项目。这使得Angular团队能够更高效地进行开发和维护
2.4 ant-design-vue
01.说明
a.说明1
Ant Design 是由阿里巴巴集团的 Ant Design 西湖团队开发和维护的一套企业级的 UI 设计语言和前端组件库，
旨在提供一致性、高质量的用户界面设计和开发方案。
b.说明2
Ant-Design-Vue是蚂蚁金服Ant Design官方推荐的Vue版UI组件库，它继承了Ant Design的设计语言和Vue.js的易用性，
为开发者提供了丰富、高质量的Vue组件，极大地简化了前端开发流程。
c.说明3
Surely Vue Table 是 Ant Design Vue 团队旗下的“高端”组件之一，该组件致力于解决大数据渲染、图表集成等复杂高频问题。 使用该组件可以流畅滚动 10 万行、10 万列的数据，你不必担心页面卡顿造成用户投诉，进而影响业务进展。
该组件虽然是 Ant Design Vue 团队开发，但你依然可以将其使用在任何组件库中，它并不是 Ant Design Vue 的专属组件。
Surely Vue 默认使用虚拟滚动提升渲染速度，树形数据、展开内容、嵌套子表格、行列合并、自动行高、横向、纵向、吸顶、固定头、固定列等等一切都支持虚拟滚动。
很遗憾，这是一个商业化组件，不过不用担心，你依然可以免费使用它，但你不可以移除水印，当然也不可以隐藏水印。我们一直在保证 Ant Design Vue 完全开源的情况下，不断寻找靠谱的商业模式，期望通过“高端”组件集合获取一定的收入，招聘更多的技术专家，开发更多的功能。我想您也一定可以理解并支持我们，Surely Vue 的商业化将会有助于 Ant Design Vue 更快的成长。
有必要再次声明，Ant Design Vue 并不是蚂蚁金服开发和维护，自诞生之日(2017 年)起，便是由 tangjinzhou 联合众多专业开发者进行开发维护，Surely Vue 是该团队企业化运营后推出的商业产品。四年来不断的坚持得到了众多开发者的认可，您不用担心他是 KPI 产物最后弃坑，更加无须担心个人开发者跑路，因为我们有众多付费企业客户，我们有健康可持续的稳定收入。
d.版本差异
3.x、4.x、5.x，React从类组件变成函数组件，生命周期管理完全变成Hook
02.两种引入方式
a.完整引入
//完整引入
import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './button';
import 'ant-design-vue/dist/antd.css';
/*阻止启动生产消息 开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。
而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检
查还有一些小的运行时开销，这在生产环境模式下是可以避免的。*/
Vue.config.productionTip = false;
Vue.use(Antd);
new Vue({
/**/
render:h => h(App),
//这里的render: h=> h(App)是es6的写法
//render函数是vue通过js渲染dom结构的函数createElement约定可以简写为h
// 转换过来就是：
// render: function (createElement) {
// return createElementApp);
// },
}).$mount('#app');
//$mount(’#app’) ：手动挂载到id为app的dom中的意思
// 当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；
// 假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载
b.局部导入组件
import Vue from 'vue';
import { Button，Icon} from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './button';
Vue.use(Button);
Vue.use(Icon);
Vue.component(Button.name, Button);
Vue.config.productionTip = false;
Vue.component(Button.name, Button);
new Vue({
render: h => h(App),
}).$mount('#app');
c.按需加载
可以通过以下的写法来按需加载组件。
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
-----------------------------------------------------------------------------------------------------
如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载，加入这个插件后。你可以仍然这么写：
import { Button } from 'ant-design-vue';
插件会帮你转换成 ant-design-vue/lib/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。