vue中導入elementui

Element UI是一套基于Vue.js組件庫，為開發者提供可配置且易于維護的組件。本文將介紹，如何在Vue項目中導入Element UI庫。

安裝 Element UI

npm i element-ui -S

使用npm安裝Element UI庫，-S表示將Element UI作為項目的依賴項之一。

在Vue項目入口文件中，需要引入Element UI的CSS和JS文件。以main.js為例：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

第一行引入Vue庫，第二行引入Element UI庫，第三行則是引入Element UI的CSS文件。最后一行則是使用Vue.use()語法將Element UI注冊為Vue的插件。

在實際項目中，不需要使用所有的Element UI組件，可以使用按需引入的方式導入組件，在webpack的配置文件中使用"babel-plugin-component"插件實現按需加載組件:

npm i babel-plugin-component -D

使用npm安裝"babel-plugin-component"插件，安裝完成后需要在.babelrc中的plugins數組中加入以下配置：

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

配置完成后，就可以在需要使用Element UI組件的文件中單獨引入對應組件進行使用.

本文介紹了如何在Vue項目中導入Element UI庫，對于初次接觸Vue.js和Element UI的開發者可以參考此文進行開發。