vue配置element-ui遇到的坑

注意：本文章參照element-ui官方文檔，快速上手部分，的部分教程

步驟1.npm安裝

npm i element-ui -S

步驟2

2-1.完整引入

在 main.js 中寫入以下內(nèi)容：

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)
});

注：此處完全按照文教程上的來，一般不會(huì)出現(xiàn)什么問題

2-2.按需求引入

注：我其實(shí)是想完整引入的，但是不知道為什么，完整引入時(shí)也必須執(zhí)行下面的內(nèi)容，這一點(diǎn)大家可以自己去試試，也許是我項(xiàng)目配置有問題吧，但是最終還是配好了的

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

然后，將 .babelrc 修改為：

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

注：此處修改.babelrc文件時(shí)，(1)若此文件之前未被修改過，那么一定是將該文件中的內(nèi)容刪除，然后換成上述內(nèi)容，別像博主一樣自作聰明，將上述內(nèi)容添加進(jìn)入.babelrc文件，而沒有刪除原有的內(nèi)容，然后引起了下面的錯(cuò)誤：

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個(gè)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個(gè)at ...

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

這是我踩得第一個(gè)坑，完全是因?yàn)楸救酥皇且粋€(gè)小菜鳥。。。大神們路過就好。。。

當(dāng)你上述步驟都完成的很棒之后，如果出現(xiàn)了下面這個(gè)錯(cuò)誤：

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

那么，執(zhí)行下面這個(gè)命令就好了：

npm install --save-dev babel-preset-es2015

步驟3.測試

<el-button>el</el-button>

下面就是我激動(dòng)的測試了一下element的el-button組件的截圖(看看紅色箭頭處的就好了，其它的請忽略)

vue element-ui需要注意的問題

1、form標(biāo)簽中的 model屬性與form-item標(biāo)簽中的prop填寫不能隨意填寫，后續(xù)取值model.prop而不是輸入框中的值。

2、rules中的驗(yàn)證信息，要加上type屬性，或者使用v-model.number，不加會(huì)默認(rèn)為字符串處理，導(dǎo)致輸入數(shù)字不識別

參考官方文檔地址：https://element.eleme.cn/#/zh-CN/component/form#form-methods

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論