vue项目配置element-ui容易遇到的坑

vue项目引入element-ui容易遇到的坑

注意:本文章参照element-ui官方文档,快速上手部分,的部分教程

步骤1.npm安装

npm i element-ui -S

步骤2-1.完整引入

在 main.js 中写入以下内容:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

注:此处完全按照文教程上的来,一般不会出现什么问题

步骤2-2.按需求引入

注:我其实是想完整引入的,但是不知道为什么,完整引入时也必须执行下面的内容,这一点大家可以自己去试试,也许是我项目配置有问题吧,但是最终还是配好了的

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

然后,将 .babelrc 修改为:

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

注:此处修改.babelrc文件时,(1)若此文件之前未被修改过,那么一定是将该文件中的内容删除,然后换成上述内容,别像博主一样自作聪明,将上述内容添加进入.babelrc文件,而没有删除原有的内容,然后引起了下面的错误:

Module build failed: TypeError: [BABEL] D:\Workspace\IdeaProjects\springboot-vue-project\client\node_modules\webpack-dev-server\client\index.js: Invalid options type for foreign
    at Logger.error (D:\Workspace\IdeaProjects\springboot-vue-project\client\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
   此处省略 1w个at ...

 @ multi (webpack)-dev-server/client?http://localhost:8083 webpack/hot/dev-server ./src/main.js

 error  in ./src/main.js

Module build failed: TypeError: [BABEL] D:\Workspace\IdeaProjects\springboot-vue-project\client\src\main.js: Invalid options type for foreign
    at Logger.error (D:\Workspace\IdeaProjects\springboot-vue-project\client\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
    此处省略 1w个at ...

 @ multi (webpack)-dev-server/client?http://localhost:8083 webpack/hot/dev-server ./src/main.js

这是我踩得第一个坑,完全是因为本人只是一个小菜鸟。。。大神们路过就好。。。

当你上述步骤都完成的很棒之后,如果出现了下面这个错误:

Module build failed: Error: Couldn't find preset "es2015" relative to directory

那么,执行下面这个命令就好了:

 npm install --save-dev babel-preset-es2015
步骤3.测试
<el-button>el</el-button>

下面就是我激动的测试了一下element的el-button组件的截图(看看红色箭头处的就好了,其它的请忽略)

在这里插入图片这描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值