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

最近我做的項(xiàng)目幾乎都是管理系統(tǒng)，所以為了節(jié)約時(shí)間，開始使用ui框架-----elementui。

一個(gè)簡單的管理系統(tǒng)來說，這套u(yù)i框架足夠使用了，而且對(duì)樣式的自定義來說，這套u(yù)i框架相對(duì)于比較靈活。

為什么我說管理系統(tǒng)適合用這套u(yù)i呢，因?yàn)楣芾硐到y(tǒng)大多數(shù)使用到的組件都能在這上面找到，而且看起來清晰淡雅，不信你看：

elementui的官方地址：http://element-cn.eleme.io/#/zh-CN

中文版的，很容易理解，左側(cè)是它集成的組件列表，右側(cè)則是實(shí)例的樣子和源碼。

elementui

想當(dāng)初我對(duì)ui框架是從來都不光顧的，但前端兩大ui框架還是好用的，pc端可以使用這套，移動(dòng)端可以使用vant。這里我們先不過多介紹vant，今天我們的主題是elementui。

這套組件的有點(diǎn)就是，你要的它都幾乎都有，什么時(shí)間控件、好看的select、輪播圖、折疊菜單啊，你都可以找到。

因此這對(duì)于一個(gè)做項(xiàng)目管理系統(tǒng)的開發(fā)人員來說，可以節(jié)省很多寫樣式的時(shí)間。

在vue項(xiàng)目中使用插件，都是把依賴包下載下來。你便可以在你的node_modules里面找到。引入方式有多種，如果你的整個(gè)項(xiàng)目所有頁面都需要使用到插件，你可以在main.js里面引入，例如：

引入

在main.js里面引入的插件或者組件和樣式，都是全局的。

你也可以選擇在你頁面中的script里面import。這種的引入方式，只作用于你當(dāng)前的頁面。

例子

我在我的項(xiàng)目中需要用到一個(gè)時(shí)間選擇控件，因此我在官網(wǎng)上找到了這個(gè)

時(shí)間選擇控件

在控件的下方，官網(wǎng)給了實(shí)例代碼

實(shí)例代碼

我把這一段粘貼到我的項(xiàng)目中，然后給它一個(gè)class，便可以自定義它的樣式咯。

我給這個(gè)控件加了寬度之后，最后的展示效果是這樣的。

加了寬度的效果

ok，例子已經(jīng)完成，你學(xué)會(huì)了嗎？

非常簡單而且便捷的ui框架，你也趕緊用起來把~~

總結(jié)

以上是生活随笔為你收集整理的vue项目导入elementui_在vue项目中使用elementui的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。