Vue UI 组件库

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

Vue中常用的UI组件库有：

安装 Element-UI

npm i element-ui

引入并应用 Element-UI

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

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

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

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

npm install babel-plugin-component -D

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

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

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

import { Button, Select } from 'element-ui';  // 引入 Button 和 Select 组件

// 将 Button 和 Select 注册为全局组件
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

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

Vue.use(Button)
Vue.use(Select)

使用 Element-UI

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