ElementUI的安裝使用

element-ui是什麼：

element-ui 是 餓了麼 前端團隊，開源出來的一套 vue 元件庫(針對pc電腦瀏覽器端)，內部整合了許多專案中可以使用的成熟元件component，既增強了使用者體驗，又加快了開發速度。

步驟：

執行指令安裝元件庫

npm i element-ui

在main.js檔案中引入element-ui模組和並註冊

// eslint要求import系列**都要在普通**上邊設定

// 引入elementui元件庫
import elementui from
'element-ui'
// 引入css樣式
import
'element-ui/lib/theme-chalk/index.css'
// 把元件庫註冊給vue
// 之前元件註冊：vue.component(名稱,元件) 每次只能註冊乙個
// 現在元件註冊: vue.use(元件模組) 一次性註冊"全部"的元件，非常高效
vue.
use(elementui)

>

>
>
>
預設按鈕el-button
>
type
="primary"
>
主要按鈕el-button
>
type
="success"
>
成功按鈕el-button
>
type
="info"
>
資訊按鈕el-button
>
type
="warning"
>
警告按鈕el-button
>
type
="danger"
@click
="del()"
>
危險按鈕el-button
>
el-row
>
div>
template
>
>
export
default).
then((
)=>)}
).catch((
)=>)}
)}}}
script
>

注意：

要在src目錄下編輯專案**，這是專案的源**，完畢後還要做打包上線處理。

src目錄下的**不能部署，相反是打包後的**檔案可以部署。

什麼是完整引入：

// 引入elementui元件庫

import elementui from
'element-ui'
;// 引入css樣式
import
'element-ui/lib/theme-chalk/index.css'
;// 註冊
vue.
use(elementui)
;

步驟：

安裝依賴包

npm i babel-plugin-component -d

在babel.config.js檔案中做如下配置

module.exports =]]

}

以上兩個步驟完成後，css樣式已經可以實現按需引入了，此時main.js中關於element-ui的css樣式引入已經 不起作用了，鑑於**美觀可以刪除或遮蔽 // import 『element-ui/lib/theme-chalk/index.css』

// 3.按需引入

import
from
'element-ui'
// 按需註冊元件
vue.
use(row)
vue.
use(button)
// 按需註冊事件方法(原型繼承)
vue.prototype.$confirm = messagebox.confirm
vue.prototype.$message = message

以上配置完畢，請重啟服務 npm run serve

注意：

執行指令npm run build(打包指令) ，在輸出資訊中可以比較看出按需引入和完整引入打包檔案大小差別，按需引入的打包檔案大小較小，則後期專案上線效能會更好。

按需引入根據內容可以分為：css樣式、元件、事件方法 3種。

為了方便開發，前期只做css樣式按需引入，待專案開發完畢後，再給元件和事件方法做統一按需引入。

如果按需引入配置完畢，發現頁面按鈕沒有css效果，請重啟服務npm run serve。

element ui安裝使用

import elementui from element ui import element ui lib theme default index.css 若發現該處導包總是出錯，請檢查node modules中的對應版本目錄下是否有theme default index.css檔案，若沒有，解除...

01 Element UI安裝與使用

一 element ui的簡介 element ui 餓了麼前端出品的一套 基於 vue 2.0 的桌面端元件庫，官方開發文件 二 element ui的安裝 常使用npm的方式安裝element ui。1.npm安裝 npm i element ui s 在vue專案目錄下cmd命令窗npm進行安...

element UI 表單的使用

這裡就不貼 了，官網也差不多都有，就簡述一下這次所用所涉及的引數。1.在 form 元件中，每乙個表單域由乙個 form item 元件構成，表單域中可以放置各種型別的表單控制項，包括 input select checkbox radio switch datepicker timepicker。...