2Vue的ui组件库基本使用

1.移动端常用 UI 组件库

1. Vant https://youzan.github.io/vant

2. Cube UI https://didi.github.io/cube-ui

3. Mint UI http://mint-ui.github.io

2.PC 端常用 UI 组件库

1. Element UI https://element.eleme.cn

2. IView UI https://www.iviewui.com

3. Ant Design https://www.antdv.com/components/overview-cn

使用Element UI库

①还是在脚手架环境使用，方便。

创建脚手架环境

②npm安装eelementui的包或者是在线页面引入。

可以查看官网。

这里选择npm安装：npm i element-ui

③使用

直接去官网找组件，拷贝代码。

就用下图的第一行和第四行的按钮组件举例

再来一个日期选择器组件

代码拷 完成

③在main.js文件引入elementui的js模块和css模块和组件 。

//完整引入element-ui的所有组件和样式
//引入element-ui的所有组件
import ElementUI from 'element-ui';
//引入element-ui的全部样式
import 'element-ui/lib/theme-chalk/index.css';

//注册ElementUI
Vue.use(ElementUI);

这样是全局引入，虽然能用，但是js很大，因为实际上我们只 用了它三个组件，却引用了全部的组件和全部的样式。

按需引入

如官网所示，按需引入要下载一个babel插件，以达到减小项目体积的目的。

npm install babel-plugin-component -D-D表示版本控制。nodejs里的指令。

然后将官网的配置项追加到babel.config.js文件里。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]    
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]  
}

注意：要修改配置项的内容：不然会报错。

更改main.js的内容

//按需引入

import { Button, Row ,DatePicker} from 'element-ui';

//注册全局组件
Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
Vue.component(DatePicker.name, DatePicker); 

如下图：这些都是elementui的全局组件，可以修改这些组件的名字。

改了后页面使用也要修改为你指定的格式。