Vue项目 UI框架介绍（第六天上）

Posted 2023-03-09

参考技术A

1.什么是elementUI?
ElementUI是饿了么前端团队推出的一款基于Vue的桌面端UI框架
大白话: 和Bootstrap一样对原生的html标签进行了封装, 进行了美化, 让我们能够专注于业务逻辑而不是UI界面

2.elementUI使用
https://element.eleme.cn/#/zh-CN/component/installation

3.elementUI优化
默认情况下无论我们有没有使用到某个组件, 在打包的时候都会将elementUI中所有的组件打包到我们的项目中
这样就导致了我们的项目体积比较大, 用户访问比较慢

4.如何优化
为了解决这个问题, elementUI推出了按需导入, 按需打包. 也就是只会将我们用到的组件打包了我们的项目中
没有用到的组件不会被打包
https://element.eleme.cn/#/zh-CN/component/quickstart

1.什么是MintUI?
MintUI是饿了么前端团队推出的一款基于Vue的移动端U框架
大白话:和Bootstrap一样对原生的HTML标签进行了封装，让我们能够专注于业务逻辑而不是UI界面
2.mintUI使用
http://mint-ui.github.io/#!/zh-cn
3.注意点: MintUI和ElementUI的第一个不同, 就是在MintUI中需要通过Vue.component来告诉Vue我们需要使用

1.什么是Vant?
在使用MintUI的过程中发现有很多的坑，所以个人不推荐在移动端中选择MintUIXant是有赞前端开发团队又推出的一款 基于Vue的移动端UI框架
大白话:和Bootstrap一样对原生的HTML标签进行了封装，进行了美化，让我们能够专注于业务逻辑而不是UI界面

Vue.use只能use插件，不能use组件
那么如何将一个组件封装成一个插件呢？
1.Vue.use()做了什么事情?
Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用

2.什么时候需要定义插件?
当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件
例如: 网络加载指示器

3.如果自定义一个插件?
https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6