Vue2里的最后一章
Vue UI组件库
移动端常用的UI组件库
1.Vant:Vant - 轻量、可靠的移动端组件库 (youzan.github.io)
2.Cube UI:cube-ui Document (didi.github.io)
3.Minit UI:Mint UI (mint-ui.github.io)
PC端常用UI组件库
1.Element UI:Element - 网站快速成型工具
2.IView UI:iView - A high quality UI Toolkit based on Vue.js
所谓的UI组件库就是给我们提供了一些常用的布局、按钮、输入框、下拉框等等这些网页UI布局里面常用的元素,并且把这些元素以组件的形式提供给我们,我们只需要用它提供的组件,然后你就会发现结构啊样式啊交互什么的都来了。但是什么是都不是绝对的,你可以随便改一些css
和js
上面的组件库只能说主流的或者说是反馈比较好的,并不是只有这些
比如京东
这个大厂出了一个ui库:nutui
UI组件库适用于什么项目?
如果你想打造一个高度定制化的UI其实你不太适用于这个UI组件库
对页面没有高度的定制化适合用UI组件库
对于Vue的UI组件库,我们就得提到Element UI
(是我们国产的一个由饿了么前端团队,所打造的这么一个UI组件库)
一旦有人说:这个UI组件库不错,别人就会问:
- 1.这个UI组件库是基于哪些技术的?(大家要注意组件这个概念是有了前端框架
React
、Vue
之后才有了组件这个概念) - 2.这个UI库是PC端的还是移动端的?
这些UI组件库不需要记忆,要用直接翻它的官方文档就OK了,而且UI组件库其实说到底就是样式的千奇百变,都是用前端框架(比如创建Vue
项目,定义组件,编写css、scss样式,把他们打包并发布到npm,详情看网上的教程,我这里有一个Vue编写UI库的教学视频(不是打广告,纯自己发现的))
vue中element全部引用
npm i element-ui -S
main.js 引用element-ui
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
这样把element-ui里的所有组件引入进来了,体积特别大
所以我们得 按需引入
babel-plugin-component是专门用于在UI组件库里面进行按需映入的
npm install babel-plugin-component -D
-D
:开发依赖
将 .babelrc在最新的Vue-cli里面已经改名了,现最新的版本是babel.config.js
presets:预设包(能帮你处理一些事情)
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',//解析Vue里面相关的文件的JS的
//安装element-ui按需追加需求
["es2015", { "modules": false }],
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
],
}
单个引入东西:
main.js
import Vue from 'vue'
import App from './App.vue'
import { Button, Row } from 'element-ui'
Vue.component(Button.name , Button)//Button.name就是el-button;你也可以自己写名字
Vue.component(Row.name,Row)
Vue.config.productionTip = false
new Vue({
render:h => h(App)
}).$mount('#app')
报错,得这么改(这是要经验和查看babel-plugin-component文档具体写什么):
babel.config.js