如何讓你的前端程序看起來很優雅而又簡單。

最近我做的項目幾乎都是管理系統，所以為了節約時間，開始使用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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。