Vue怎么與element-ui整合

這篇文章主要介紹“Vue怎么與element-ui整合”，在日常操作中，相信很多人在Vue怎么與element-ui整合問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue怎么與element-ui整合”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、Vue與element-ui整合

element-ui官網介紹很詳細，這里摘抄官網的融入方式：

1.安裝element-ui:

npm i element-ui -S

2.引入ElementUI:

分為全部引入和部分引入，因為全部引入文件體積太大，這里直接部分引入：
按需引入，需要借助一個插件，安裝插件:

npm install babel-plugin-component -D

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

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

上述代碼是官網上修改babel.config.js的代碼，這里需要注意的是，我們原本項目中babel.config.js里的內容，不要去掉，而是追加上面的這些代碼到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';

注冊組件:

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

或者:

* 或寫為
 * Vue.use(Button)
 * Vue.use(Select)
 */

**注意：**由于label版本等問題，按照官網的操作后，vue-cli工程可能會發生啟動報錯，可參考這篇文章進行版本的設置和修改：https://zhuanlan.zhihu.com/p/217728852

4.使用組件渲染UI效果

使用element-ui后，所有的組件都可以使用element-ui進行界面渲染了，使用哪個組件，在官網中找到對應的組件介紹，使用即可。以Button為例：

劃到最下面，還有Attributes和函數的介紹

說明：按需引入element-ui后，無需再關注引入哪個css樣式了，會按照使用的組件，自動引入相關的樣式

到此，關于“Vue怎么與element-ui整合”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！