Vue UI 组件库

在Vue中，可以通过引入他人编写好的组件库，来构建自己的页面，提高开发效率。

Vue中常用的UI组件库有：

安装 Element-UI

1npm i element-ui

引入并应用 Element-UI

1import ElementUI from 'element-ui'; // 引入 Element-UI
2import 'element-ui/lib/theme-chalk/index.css';  // 引入 Element-UI 的全部样式
3Vue.use(ElementUI); // 应用 Element-UI

直接使用以上方式引入Element-UI，引入的是Element-UI中所有的组件以及它们的样式和交互。这会使页面的体积变得十分庞大。

在使用Element-UI时，可以根据需要使用的组件，按需引入它们。

引入babel-plugin-component开发依赖：

1npm install babel-plugin-component -D

接着在babel.config.js中追加如下内容：

 1{
 2  "presets": [
 3    ["@babel/preset-env", { "modules": false }]
 4  ],
 5  "plugins": [
 6    [
 7      "component",
 8      {
 9        "libraryName": "element-ui",
10        "styleLibraryName": "theme-chalk"
11      }
12    ]
13  ]
14}

然后就可以按需引入项目中所需的组件。例如：

1import { Button, Select } from 'element-ui';  // 引入 Button 和 Select 组件
2
3// 将 Button 和 Select 注册为全局组件
4Vue.component(Button.name, Button);
5Vue.component(Select.name, Select);

注册Element-UI组件也可以使用Vue.use()：

1Vue.use(Button)
2Vue.use(Select)

使用 Element-UI

Element-UI的使用可直接参考官方文档：Element UI。