Element UI使用指南

2021-07-24 08:11:16 字數 2257 閱讀 4810

element-ui是餓了麼前端團隊推出的一款基於vue.js 2.0的桌面端ui框架,手機端有對應框架是 mint ui 。

1.安裝webpack
npm install -g webpack
2.安裝vue-cli

vue-cli是什麼?

vue-cli 是vue.js的腳手架,用於自動生成vue.js模板工程的。

使用步驟:

安裝專案依賴

cd project-name

//進入專案目錄

npm install //安裝專案依賴

npm run dev //執行專案

關於webpack和vue-cli的更多使用方法參見官方文件。

本來想用vue-cli重新建立專案,試了幾次總是出現各種問題,沒辦法成功。最後在仔細檢視element-ui的官方文件的快速上手部分的時候發現餓了麼團隊給了乙個他們自己的 專案模板 。於是我就用這個模板來嘗試了下,結果成功了。所以,如果你不想太折騰的話,建議還是使用官方給的專案模板,可以省很多事。

第一步:安裝專案模板

安裝依賴

npm install
執行專案模板

專案模板裡已經把需要配置的檔案都配置好了。

第二步:安裝element-ui
第一步,我們成功安裝了專案模板,接下來,我們需要安裝element-ui到專案下。

npm i element-ui@next -d
接下來我們就可以參照element-ui的官方文件上手開發了。

例子

src="./assets/logo.png">

let's do itel-button>

class="block">

class="demonstration">顯示預設顏色span>

type="success">成功按鈕el-button>

type="warning">警告按鈕el-button>

type="danger">危險按鈕el-button>

type="info">資訊按鈕el-button>

span>

div>

class="block">

class="demonstration">hover 顯示顏色span>

:plain="true"

type="success">成功按鈕el-button>

:plain="true"

type="warning">警告按鈕el-button>

:plain="true"

type="danger">危險按鈕el-button>

:plain="true"

type="info">資訊按鈕el-button>

span>

div>

div>

template>

export default

},methods: )}}}

script>

body

style>

效果如下圖所示:

1. phantomjs安裝失敗

2.開啟頁面亂碼

通過element-ui

官方提供的專案模板開發,會發現在瀏覽器開啟頁面的時候,中文是亂碼的。如下圖所示:

html頁面中已經設定了

Ubuntu apt 使用指南

起初gnu linux系統中只有.tar.gz。使用者必須自己編譯他們想使用的每乙個程式。在debian出現之後,人們認為有必要在系統中新增 一種機制用來管理安裝在計算機上的軟體包。人們將這套系統稱為dpkg。至此著名的 package 首次在gnu linux上出現。不久之後紅帽子也 開始著手建立...

CImageList使用指南

1.綜述 在mfc 中cimagelist 類封裝了 影象列表控制項的功能,影象列表是乙個具有相同大小的 影象 可以是不同 型別 的集合,其主要用於 應用程式中大規模 圖示的儲存。該控制項是不可 見的,通常與其它如 clistbox ccombobox ccomboboxex ctabctrl 以及...

CImageList使用指南

cimagelist使用指南 1.綜述 在 mfc中cimagelist類封裝了影象列表控制項的功能,影象列表是乙個具有相同大小的影象 可以是不同型別 的集合,其主要用於應用程式中大 規模圖示的儲存,該控制項是不可見的。通常與其它如clistbox,ccombobox,ccomboboxex以及ct...