Element UI 使用步驟

2022-09-07 01:36:11 字數 710 閱讀 1640

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

官網:現在vue引入element

1.開啟cmd,進入到當前剛建立的vue專案目錄

cd e:\download\my\xlzb\vue-demo

2.在當前目錄中執行:

npm i element-ui -s

3.ide編輯器webstorm開啟剛建立的專案,改變專案目錄中的main.js檔案;

import vue from 'vue'

import router from './router'

import elementui from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

vue.config.productiontip = false

vue.use(elementui)

以上**便完成了 element 的引入。需要注意的是,樣式檔案需要單獨引入!!!

5.然後在.vue檔案裡就直接可以用了;

例如:在src/components/hello.vue做一下修改

6.然後執行:npm run dev(webstrom可以按alt+f12鍵,輸入npm run dev);

7.開啟頁面就可以看到效果了.

element ui 步驟條的使用

由於專案中有用到步驟條,在這個過程中,也遇到了坑,可能還是自己能力不足。糾結好久 element ui中步驟條的基本使用方法如上圖所示,更加具體的可以去element ui的官網檢視。由於頁面要相容不同螢幕寬度,所以在專案中設定了space的值為20 居中樣式看著可能更好一點。但是它也存在乙個問題,...

element ui安裝使用

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

element ui使用總結

在專案中用到了element ui 使用時遇到部分問題,總結如下 1.日期限制 自定義表單驗證實現 限制日期前後 以下為element ui表單元件的乙個表單項,prop是表單域 model 字段,在使用 validate resetfields 方法的情況下,該屬性是必填的,值應該是 form 元...