Vue2.0 Vue组件库

Vue2里的最后一章

yarn官方首页

ant design

ant design for vue

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