提示：文章寫(xiě)完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔

目錄

前言

一、element-ui是什么？

二、使用步驟

1.引入庫(kù)

npm 安裝

CDN方式

2.快速上手elementUI

總結(jié)

?

---

前言

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

一、element-ui是什么？

ElementUI簡(jiǎn)介

我們學(xué)習(xí)VUE,知道它的核心思想式組件和數(shù)據(jù)驅(qū)動(dòng),但是每一個(gè)組件都需要自己編寫(xiě)模板,樣式,添加事件,數(shù)據(jù)等是非常麻煩的,
所以餓了嗎推出了基于VUE2.0的組件庫(kù),它的名稱(chēng)叫做element-ui,提供了豐富的PC端組件

ElementUI官網(wǎng)：http://element-cn.eleme.io/#/zh-CN
注1：類(lèi)似前端框架還有iview

二、使用步驟

1.引入庫(kù)

npm 安裝

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

npm i element-ui -S

CDN方式

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

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

2.快速上手elementUI

?? 在此，你應(yīng)該熟悉vue-cli(腳手架)的創(chuàng)建以及清晰它的目錄結(jié)構(gòu)

1.引入 Element

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

完整引入：在main.js中寫(xiě)入這些內(nèi)容

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，我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。

首先，安裝 babel-plugin-component

npm install babel-plugin-component -D

?然后，將babel.config.js里的內(nèi)容改成這樣

module.exports = {

? "presets": [

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

? ],

? "plugins": [

? ? [

? ? ? "component",

? ? ? {

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

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

? ? ? }

? ? ]

? ]

}

?接下來(lái)，如果你只希望引入部分組件，比如 Button 和 Select，那么需要在 main.js 中寫(xiě)入以下內(nèi)容：

import { Button, Select } from 'element-ui'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或?qū)憺? Vue.use(Button)* Vue.use(Select)*/

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

至此，一個(gè)基于 Vue 和 Element 的開(kāi)發(fā)環(huán)境已經(jīng)搭建完畢，現(xiàn)在就可以編寫(xiě)代碼了。各個(gè)組件的使用方法請(qǐng)參閱它們各自的文檔。

---

總結(jié)

ElementUI組件庫(kù)的引入可以使我們更好的去理解Vue項(xiàng)目與組件庫(kù)的搭配，總而言之，學(xué)就完了！

總結(jié)

以上是生活随笔為你收集整理的Element-ui的理解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。