詳解Vue與element-ui整合方式

更新時(shí)間：2022年04月02日 10:30:29 作者：敲代碼的小小酥

vue在前端技術(shù)中使用越來(lái)越多，也成為了主流框架，今天咱花點(diǎn)時(shí)間學(xué)習(xí)下Vue與element-ui整合方式，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧

一、Vue與element-ui整合

element-ui官網(wǎng)介紹很詳細(xì)，這里摘抄官網(wǎng)的融入方式：

1.安裝element-ui:

npm i element-ui -S

2.引入ElementUI:

分為全部引入和部分引入，因?yàn)槿恳胛募w積太大，這里直接部分引入：
按需引入，需要借助一個(gè)插件，安裝插件:

npm install babel-plugin-component -D

修改babel.config.js文件:
(注意:官網(wǎng)寫的修改babelrc文件，新版本vue-cli修改babel.config.js文件，element-ui官網(wǎng)更新比較慢，所以說(shuō)的還是舊版本文件)

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

上述代碼是官網(wǎng)上修改babel.config.js的代碼，這里需要注意的是，我們?cè)卷?xiàng)目中babel.config.js里的內(nèi)容，不要去掉，而是追加上面的這些代碼到babel.config.js里面，最終整合后的babel.config.js的代碼如下:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["es2015", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.按需引入ElementUI元素即可

比如，引入Button和Select，則在main.js中:
引入組件：

mport { Button, Select } from 'element-ui';

注冊(cè)組件:

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

或者:

* 或?qū)憺?
 * Vue.use(Button)
 * Vue.use(Select)
 */

**注意：**由于label版本等問(wèn)題，按照官網(wǎng)的操作后，vue-cli工程可能會(huì)發(fā)生啟動(dòng)報(bào)錯(cuò)，可參考這篇文章進(jìn)行版本的設(shè)置和修改：http://www.dhdzp.com/article/177207.htm