vue项目导入elementui_在vue项目中使用elementui
如何讓你的前端程序看起來很優雅而又簡單。
最近我做的項目幾乎都是管理系統,所以為了節約時間,開始使用ui框架-----elementui。
一個簡單的管理系統來說,這套ui框架足夠使用了,而且對樣式的自定義來說,這套ui框架相對于比較靈活。
為什么我說管理系統適合用這套ui呢,因為管理系統大多數使用到的組件都能在這上面找到,而且看起來清晰淡雅,不信你看:
elementui的官方地址:http://element-cn.eleme.io/#/zh-CN
中文版的,很容易理解,左側是它集成的組件列表,右側則是實例的樣子和源碼。
elementui
想當初我對ui框架是從來都不光顧的,但前端兩大ui框架還是好用的,pc端可以使用這套,移動端可以使用vant。這里我們先不過多介紹vant,今天我們的主題是elementui。
這套組件的有點就是,你要的它都幾乎都有,什么時間控件、好看的select、輪播圖、折疊菜單啊,你都可以找到。
因此這對于一個做項目管理系統的開發人員來說,可以節省很多寫樣式的時間。
在vue項目中使用插件,都是把依賴包下載下來。你便可以在你的node_modules里面找到。引入方式有多種,如果你的整個項目所有頁面都需要使用到插件,你可以在main.js里面引入,例如:
引入
在main.js里面引入的插件或者組件和樣式,都是全局的。
你也可以選擇在你頁面中的script里面import。這種的引入方式,只作用于你當前的頁面。
例子
我在我的項目中需要用到一個時間選擇控件,因此我在官網上找到了這個
時間選擇控件
在控件的下方,官網給了實例代碼
實例代碼
我把這一段粘貼到我的項目中,然后給它一個class,便可以自定義它的樣式咯。
我給這個控件加了寬度之后,最后的展示效果是這樣的。
加了寬度的效果
ok,例子已經完成,你學會了嗎?
非常簡單而且便捷的ui框架,你也趕緊用起來把~~
總結
以上是生活随笔為你收集整理的vue项目导入elementui_在vue项目中使用elementui的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: access求斐波拉契数列_打印目录,斐
- 下一篇: python3 web框架_循序渐进Py