详解Vue与element-ui整合方式

vue在前端技术中使用越来越多，也成为了主流框架，今天咱花点时间学习下Vue与element-ui整合方式，本文结合示例代码给大家介绍的非常详细，需要的朋友参考下吧

目录

• 一、Vue与element-ui整合
• 1.安装element-ui:
• 2.引入ElementUI:
• 3.按需引入ElementUI元素即可
• 4.使用组件渲染UI效果

一、Vue与element-ui整合

element-ui官网介绍很详细，这里摘抄官网的融入方式：

1.安装element-ui:

npm i element-ui -S

2.引入ElementUI:

分为全部引入和部分引入，因为全部引入文件体积太大，这里直接部分引入：
按需引入，需要借助一个插件，安装插件:

npm install babel-plugin-component -D

修改babel.config.js文件:
(注意:官网写的修改babelrc文件，新版本vue-cli修改babel.config.js文件，element-ui官网更新比较慢，所以说的还是旧版本文件)

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

上述代码是官网上修改babel.config.js的代码，这里需要注意的是，我们原本项目中babel.config.js里的内容，不要去掉，而是追加上面的这些代码到babel.config.js里面，最终整合后的babel.config.js的代码如下:

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

3.按需引入ElementUI元素即可

比如，引入Button和Select，则在main.js中:
引入组件：

mport { Button, Select } from 'element-ui';

注册组件:

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

或者:

* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

**注意：**由于label版本等问题，按照官网的操作后，vue-cli工程可能会发生启动报错，可参考这篇文章进行版本的设置和修改：https://www.jb51.net/article/177207.htm

4.使用组件渲染UI效果

使用element-ui后，所有的组件都可以使用element-ui进行界面渲染了，使用哪个组件，在官网中找到对应的组件介绍，使用即可。以Button为例：

划到最下面，还有Attributes和函数的介绍

说明：按需引入element-ui后，无需再关注引入哪个css样式了，会按照使用的组件，自动引入相关的样式

到此这篇关于Vue与element-ui整合的文章就介绍到这了,更多相关Vue与element-ui整合内容请搜索北冥有鱼以前的文章或继续浏览下面的相关文章希望大家以后多多支持北冥有鱼！

您可能感兴趣的文章:

• vue + element-ui实现简洁的导入导出功能
• 详解Vue ElementUI手动上传excel文件到服务器
• 使用vue-cli导入Element UI组件的方法
• vue+elementUl导入文件方式(判断文件格式)