UI组件库-Vue

一、pc端组件库

1.element ui 组件库

2.ant design of vue

二、移动端组件库 

1.Vant组件库

2.cube 组件库 

3.mint组件库

4.nut ui组件库 

 三、简单介绍使用

1.引入element UI 

在官网文档中查看安装方式

在项目命令行工具中执行命令（-s在高版本npm中不需添加）

npm i element-ui -S

安装完成

引入

2.全局引入（文件较大）

在项目main.js中引入文件并使用

// 完整引入ui组件
import ElementUI from 'element-ui'
// 引入element组件css文件全部样式
import 'element-ui/lib/theme-chalk/index.css'
//关闭Vue的生产提示
Vue.config.productionTip = false
// 使用组件库
Vue.use(ElementUI);

 在官网文档中选定组件，将需要的组件复制代码

 将代码粘贴到需要的区域，例如粘贴到某一子组件的区域

运行代码：

 同时该组件同样可以触发事件等等

 同时在页面底部有文档说明，对组件的属性进行说明

 3.按需引入

减少体积，需要额外进行配置

（ -D是开发依赖）

npm install babel-plugin-component -D

在项目文件.babelrc 中进行配置

将需要的配置复制到相应的配置项中 

{
  "presets": [
    ["es2015", { "modules": false }],
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", 
    [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]
]
}

继续官方文档

 在main.js中进行引入使用

// 引入局部ui组件
import { Button, Select } from 'element-ui';
// 注册全局组件
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

例如需要一个Switch按钮，在官方文档中找到

 引入的时候进行注册

选择根据提示选择第三个ui的时候，上方的import就会自动引入

 引入以后，将代码复制到需要位置

在data中添加value属性 

 然后解析项目，会出现报错，则将.babelrc文件中的"presets"的第一个项

配置进行修改

{
  "presets": [
    ["@babel/preset-env", { "modules": false }],
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ]

}

下方的Switch.name则可地定义组件名称

 局部引入问题太多，还是全局引入，现在文件也不大了