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

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

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

注：我的vue項(xiàng)目是通過(guò)vue-cli自動(dòng)生成的

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

{
  "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，報(bào)錯(cuò)如下：
Module build failed: Error: Couldn't find preset "es2015" relative to directory "F:\d\projects\xxx公司\pro_name"

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

說(shuō)是3個(gè)依賴(lài)項(xiàng)沒(méi)有找到，順便問(wèn)一下，這句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í)行也報(bào)錯(cuò)了，該如何解決這個(gè)問(wèn)題呢？

回答
編輯回答
懶洋洋

答案：

其實(shí)上面的步驟1、2、3、4都沒(méi)有問(wèn)題，但是還有一些非常重要點(diǎn)需要說(shuō)明下，這里補(bǔ)充下：

一. 需要npm install element-ui --save安裝該組件。
二. Layout并不是button、select這種組件，但是網(wǎng)上很多答案都是input {Button、Select} from 'element-ui'這種，所以慣性思維，直接將Button、Select替換成Layout以為就ok了，直到我打開(kāi)node_modules/element-ui/lib/才發(fā)現(xiàn)這個(gè)問(wèn)題（規(guī)律）——Button、Select 都是對(duì)應(yīng)有單獨(dú)文件的，而Layout布局時(shí)，需要用到的不是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，然后在使用的時(shí)候按需 import，WebPack 打包的時(shí)候會(huì)自動(dòng)打包用到的部分嗎。

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

2017年5月1日 09:10