鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 如何按需引入 elementui 相關(guān)組件（Layout）？

如何按需引入 elementui 相關(guān)組件（Layout）？

項目需要，今天嘗試引入element-ui的Layout組件，打開官網(wǎng)，一陣搗鼓，還是沒有解決……

注：我的vue項目是通過vue-cli自動生成的

步驟：
1、執(zhí)行npm install babel-plugin-component -D安裝babel-plugin-component；
2、根據(jù)官網(wǎng)提示，修改.babelrc，這個文件目前還不知道啥作用，我把官網(wǎng)的配置全覆蓋過來了，覆蓋了不知道會有啥影響？

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

3、引入需要的Layout，在main.js里面添加如下代碼

import { Layout } from 'element-ui'
Vue.use(Layout)

4、運(yùn)行npm run dev，報錯如下：
Module build failed: Error: Couldn't find preset "es2015" relative to directory "F:\d\projects\xxx公司\pro_name"

網(wǎng)上查了一下，說是需要安裝babel-preset-es2015，于是執(zhí)行npm install babel-preset-es2015 --save-dev，再次 npm run dev，又報錯了，如下：
圖片描述

說是3個依賴項沒有找到，順便問一下，這句npm install --save element-ui/lib/layout element-ui/lib/theme-chalk/base.css element-ui/lib/theme-chalk/layout.css是啥意思呢？和印象中的npm install package-name --save有些差別，執(zhí)行也報錯了，該如何解決這個問題呢？

回答
編輯回答
懶洋洋

答案：

其實上面的步驟1、2、3、4都沒有問題，但是還有一些非常重要點需要說明下，這里補(bǔ)充下：

一. 需要npm install element-ui --save安裝該組件。
二. Layout并不是button、select這種組件，但是網(wǎng)上很多答案都是input {Button、Select} from 'element-ui'這種，所以慣性思維，直接將Button、Select替換成Layout以為就ok了，直到我打開node_modules/element-ui/lib/才發(fā)現(xiàn)這個問題（規(guī)律）——Button、Select 都是對應(yīng)有單獨(dú)文件的，而Layout布局時，需要用到的不是Lqyout，而是row、col，剛好該文件夾下就包含row.js、col.js，所以 應(yīng)該：

import { Row, Col } from 'element-ui'

Vue.use(Row)
Vue.use(Col)
2018年3月24日 18:10
編輯回答
夏木

不是應(yīng)該 npm install --save element-ui，然后在使用的時候按需 import，WebPack 打包的時候會自動打包用到的部分嗎。

參考：http://element-cn.eleme.io/#/... 的“按需引入”部分

2017年5月1日 09:10