vue结合element,vue+element-ui项目

　　Vue越来越多的用在前端技术中，也成为了主流框架。今天，让我们花一些时间来学习如何将Vue与element-ui集成在一起。本文会用示例代码非常详细的向大家介绍，请有需要的朋友参考。

一、Vue与element-ui整合

　　element-ui官网的介绍非常详细。下面节选官网的整合方法：

1.安装element-ui:

　　npm i元素-ui -S

2.引入ElementUI:

　　分为完全进口和部分进口。因为所有导入文件的体积太大，这里直接部分导入：

　　按需引入需要插件的帮助。安装插件：

　　npm安装巴别插件组件D

　　修改babel.config.js文件：

　　(注：官网写了修改babelrc文件，新版vue-cli修改了babel.config.js文件，element-ui官网更新较慢，所以还是旧版文件)

　　{

　　预设:[[es2015 ，{ modules: false }]]，

　　插件:[

　　[

　　成分，

　　{

　　libraryName: element-ui ，

　　样式库名称:主题-粉笔

　　}

　　]

　　}

　　以上代码是官网修改babel.config.js的代码。这里需要注意的是，我们原项目中的babel.config.js的内容不应该被删除，上面的代码应该添加到babel.config.js中，集成后的babel.config.js的代码如下：

　　模块.导出={

　　预设：[

　　@vue/cli-plugin-babel/preset ，

　　[es2015 ，{ modules: false }]

　　插件:[

　　[

　　成分，

　　{

　　libraryName: element-ui ，

　　样式库名称:主题-粉笔

　　}

　　]

　　}

3.按需引入ElementUI元素即可

　　例如，如果在main.js中引入了Button和Select:

　　组件介绍：

　　从“元素-用户界面”中导入{按钮，选择}；

　　注册组件：

　　Vue.component(Button.name，Button)；

　　Vue.component(Select.name，Select)；

　　或者：

　　*或写为

　　* Vue.use(按钮)

　　* Vue.use(选择)

　　* *注：* *由于标签版本等问题，按照官网操作后，vue-cli项目可能会出现启动错误。请参考本文设置和修改版本：https://www.jb51.net/article/177207.htm

4.使用组件渲染UI效果

　　使用element-ui后，所有组件都可以通过使用element-ui来呈现。用哪个组件，在官网找到对应的组件介绍就可以用了。以Button为例：

　　在底部，还有对属性和功能的介绍。

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

　　关于Vue和element-ui的集成的这篇文章就到这里了。有关Vue和element-ui集成的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。