vue前端UI框架element-ui在項目中的安裝及使用
element-ui的安裝
普通安裝
element-ui是款熱門的vue前端UI框架,官方文檔爲:https://element.eleme.io/#/zh-CN。要安裝element-ui,只需要在vue項目根目錄中執行:
npm i element-ui -S
使用vue-cli3安裝
如果自己的vue項目於是用vue-cli3創建的,則有更好的安裝辦法,使用對應vue-cli的element插件,官方github地址爲:https://github.com/ElementUI/vue-cli-plugin-element,在vue項目根目錄中執行:
vue add element
安裝過程需要選擇一些選項,選擇結果參照下圖:
- 全局導入element-ui組件
- 選擇覆蓋element的scss變量
- 語言選擇中文
使用
使用element-ui進行前端頁面開發時,建議參考官方的組件文檔:https://element.eleme.cn/#/zh-CN/component/layout,文檔中給出了所有的組件及對應的代碼,開發時只需按照需要複製相應的代碼即可。
可視化編輯
爲了更快地利用element-ui開發前端頁面,可以使用在線的可視化編輯器:MagicalCoder佈局器2.2.3,如下圖:
該工具可以幫助我們快速實現佈局和基本頁面設計,還提供了調試和樣式調整的功能,然後下載對應的HTML代碼到自己的項目中。