提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔

目錄

前言

一、element-ui是什么？

二、使用步驟

1.引入庫

npm 安裝

CDN方式

2.快速上手elementUI

總結

?

---

前言

通過視頻資源等學習終于了解除了手寫代碼渲染頁面之外，既然還有這么好用的組件庫，全程看官方文檔，也能看個大概，elementUI是一個非常好入門學習組件庫的庫。在自己敲代碼的時候，總在想能不能偷會懶，少敲一些代碼，這樣敲下去頭都大了，于是我在學習Vue的時候，終于有人介紹了組件庫這玩意，啥是組件庫啊！正比如說用HTML+css寫一個非常完美的按鈕出來，肯定得寫大半篇代碼，代碼不夠優雅，此時搭配組件庫的使用，可以大大優化代碼的數量，導入elementUI庫,完了就是cv工程師的事了，這樣的組件庫是不是非常的好呢？

一、element-ui是什么？

ElementUI簡介

我們學習VUE,知道它的核心思想式組件和數據驅動,但是每一個組件都需要自己編寫模板,樣式,添加事件,數據等是非常麻煩的,
所以餓了嗎推出了基于VUE2.0的組件庫,它的名稱叫做element-ui,提供了豐富的PC端組件

ElementUI官網：http://element-cn.eleme.io/#/zh-CN
注1：類似前端框架還有iview

二、使用步驟

1.引入庫

npm 安裝

推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

CDN方式

目前可以通過 unpkg.com/element-ui 獲取到最新版本的資源，在頁面上引入 js 和 css 文件即可開始使用。

<!-- 引入樣式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入組件庫 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.快速上手elementUI

?? 在此，你應該熟悉vue-cli(腳手架)的創建以及清晰它的目錄結構

1.引入 Element

你可以引入整個 Element，或是根據需要僅引入部分組件。我先介紹如何引入完整的 Element。

完整引入：在main.js中寫入這些內容

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App) });

按需引入：借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

首先，安裝 babel-plugin-component

npm install babel-plugin-component -D

?然后，將babel.config.js里的內容改成這樣

module.exports = {

? "presets": [

? ? "@vue/cli-plugin-babel/preset"

? ],

? "plugins": [

? ? [

? ? ? "component",

? ? ? {

? ? ? ? "libraryName": "element-ui",

? ? ? ? "styleLibraryName": "theme-chalk"

? ? ? }

? ? ]

? ]

}

?接下來，如果你只希望引入部分組件，比如 Button 和 Select，那么需要在 main.js 中寫入以下內容：

import { Button, Select } from 'element-ui'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或寫為* Vue.use(Button)* Vue.use(Select)*/

?注意:elementUI的引入大概就這樣子的，如果要按需引用的組件很多的話，可以不用全部寫在main.js中，可以將其抽離出來創建一個新的文件夾

至此，一個基于 Vue 和 Element 的開發環境已經搭建完畢，現在就可以編寫代碼了。各個組件的使用方法請參閱它們各自的文檔。

---

總結

ElementUI組件庫的引入可以使我們更好的去理解Vue項目與組件庫的搭配，總而言之，學就完了！

總結

以上是生活随笔為你收集整理的Element-ui的理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。