vue中引入element ui,vue中使用elementui

　　Element-UI是基于vue的业务无关的UI组件库，提供丰富的PC端组件，减少用户对常用组件的封装，降低开发难度。下面这篇文章主要介绍vue在使用element-ui进行点播介绍时踩过的坑，有需要的可以参考一下。

　　众所周知，使用element-ui，为了减少项目的体量，在实际项目中多采用按需引入的方法。来说说我踩过的坑吧。

　　步骤：

　　第一步：安装element安装element-ui时，

　　执行命令npm i元素-ui -S和NPM I元素-S

　　第二步：安装babel插件组件，

　　执行命令NPM安装婴儿插件组件.

　　步骤3:踩坑一：element-ui文档用于修改。babelrc文件。其实我们的文档中根本没有这个文件夹，所以我们需要修改的是bable.config.js文件中的配置。

　　踩坑二：element-UI文档提示将配置更改为此，因此bable.config.js文件被配置为此。

　　但当我们开始时，我们会报告错误“错误：无法找到模块‘巴别预设-ES 2015’”

　　这是因为缺少依赖babel-preset-es2015。现在我们执行命令NPM I巴别-预置-es 2015-保存下载依赖关系，

　　然后启动后还是会报错，于是查各种资料文档得知：报错是关于es2015的，而且这个是为了兼容ie(9-11)，es2015需要引入。

　　所以需要在package.json中引入babel-polyfill和babel-preset-es2015两个NPM(两个都可以下载)，然后启动项目(但是这种方法容易因为版本不匹配报错，所以更推荐使用下面的方法)。

　　踩坑三：你可以把es2015改成这个@babel/preset-env，但同时你也需要下载依赖项。执行命令npm i @babel/preset-env -D，

　　踩坑四：，但此时也会报告一个错误： #源文本中有无法识别的标记。

　　那是因为npm无法识别@符号。解决方案：只需将要安装的依赖包的名称用引号括起来。

　　所以最后执行的命令是：npm i @ babel/preset-env-d。

　　那么bable.config.js文件的配置是这样的：

　　模块.导出={

　　预设：[

　　@vue/cli-plugin-babel/preset ，

　　[@babel/preset-env ，{ modules: false }]

　　],

　　插件:[

　　[

　　成分，

　　{

　　libraryName: element-ui ，

　　样式库名称:主题-粉笔

　　}

　　]

　　]

　　}

　　配置坑完了，接下来就是简介：这个简介文档还是写得不错的，

　　但是有一点要注意，踩坑五：

　　我在组件中使用了布局容器：

　　el容器

　　el-header头/el-header

　　埃尔梅因/埃尔梅因

　　/El-容器

　　我觉得这是一个容器布局容器，在main.js中可以这样介绍：

　　//元素-ui按需引入

　　导入{

　　容器

　　}来自“元素-用户界面”

　　Vue.use(容器)；

　　结果总是给出一个错误：“未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。不管我怎么查，都是错的。绞尽脑汁终于找到了为什么不报错el-container的原因，于是成功了。

　　每一个不同的标签都是一个不同组件，使用都需要分别引入，正确的做法是这样的：

　　//元素-ui按需引入

　　导入{

　　容器，集管，主

　　}来自“元素-用户界面”

　　Vue.use(容器)；

　　Vue.use(表头)；

　　Vue.use(主)；

　　你踩过哪些坑？欢迎讨论交流。

　　总结

　　关于vue使用element-ui引入点播时踩坑的这篇文章到此为止。关于按需引入vueelement-ui时踩坑的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

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