vue項目配置element-ui容易遇到的坑及解決

Posted on by

vue配置element-ui遇到的坑

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

步驟1.npm安裝

npm i element-ui -S

步驟2

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組件的截圖(看看紅色箭頭處的就好瞭，其它的請忽略)

在這裡插入圖片這描述

vue element-ui需要註意的問題

1、form標簽中的 model屬性與form-item標簽中的prop填寫不能隨意填寫，後續取值model.prop而不是輸入框中的值。

2、rules中的驗證信息，要加上type屬性，或者使用v-model.number，不加會默認為字符串處理，導致輸入數字不識別

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

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：