Vue怎么与element-ui整合

发布时间:2022-04-02 11:06:10 作者:iii
来源:亿速云 阅读:230

这篇文章主要介绍“Vue怎么与element-ui整合”,在日常操作中,相信很多人在Vue怎么与element-ui整合问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么与element-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://zhuanlan.zhihu.com/p/217728852

4.使用组件渲染UI效果

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

Vue怎么与element-ui整合

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

Vue怎么与element-ui整合

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

到此,关于“Vue怎么与element-ui整合”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. 怎么基于Vue和Element-Ui搭建项目
  2. element-ui如何在vue中使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue element-ui

上一篇:解析Spring漏洞及修复的方法

下一篇:C语言实现冒泡排序算法代码怎么写

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》