深浅模式

五.UI 框架 ​

前言

如果你想快速开发一款应用，并且不想过多的操心页面 UI 的内容，比如你不想去实现一个下拉 UI 组件或设计一个 icon 图标，那么我们可以使用现有的别人做好的 UI 库和图标库实现快速开发。

  • UI 库是脱离 JS 框架外的一种 “工具”，相比 JS 框架可以帮助你实现各种业务逻辑，其更关注于页面 UI 层面的实现，比如提供和业务无关的弹窗、导航、表单组件等，为项目 UI 层面的功能提供解决方案。

1.Vue 3.x 中 ​

ElementPlus，适用于 Vue 3.x参考文档

1.1 主题设置 ​

1.2 全局配置 ​

js
Vue.use(Element, { size: "small", zIndex: 3000 });

1.3 全局文案 ​

js
Vue.locale('zh-cn', { ...local,aaa:'国际化字段' });

1.4 组件的二次封装 ​

  • button 防抖
  • table+page 封装在一起
  • form 表单封装

2.Vue 3.x 中 ​

Element Plus，适用于 Vue 3.x参考文档

2.1 主题设置 ​

2.2 全局配置 ​

js
app.use(Element, { size: "small", zIndex: 3000 });

2.3 组件的二次封装 ​

  • button（默认添加防抖）
  • table
  • form

总结

了解 vue 项目创建过程以及其目录结构，在开发中需要注意的地方，能够更好地规范前端开发