您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue+Element的后臺管理框架的功能介紹”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue+Element的后臺管理框架的功能介紹”吧!
Vue+ElementUI的后臺管理框架
那什么是ElementUI?
vue-element-admin 是一個后臺前端解決方案
路由和配置左側(cè)菜單
新開發(fā)的一個后臺管理系統(tǒng)。在框架上,領(lǐng)導(dǎo)要用AdminLTE這套模板。這個其實(shí)很簡單,把該引入的樣式和js文件引入就可以了。這里就不多贅述了。可以參考官網(wǎng):https://adminlte.io/
效果圖,如下:
AdminLTE這個模板,還是很方便的。有興趣的大家可以自行去琢磨。我只是把這個模板內(nèi)嵌到新系統(tǒng)中去,也就沒多去研究了。
AdminLTE這個就告一段落。下面來說說今天的主題,Vue+ElementUI的后臺管理框架。
首先我們要先了解,什么是Vue?Vue官網(wǎng):https://cn.vuejs.org/
Vue官網(wǎng)中對Vue的解釋:
Vue (讀音 /vju?/,類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是,Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層,不僅易于上手,還便于與第三方庫或既有項(xiàng)目整合。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時,Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。
據(jù)聽說是餓了么公司開發(fā)的一套UI組件,具體的我也不太清楚,這是ElementUI中文官網(wǎng):https://element.eleme.cn/
在官方文檔上,ElementUI給出了其設(shè)計(jì)原則:
1、一致 Consistency
與現(xiàn)實(shí)生活一致:與現(xiàn)實(shí)生活的流程、邏輯保持一致,遵循用戶習(xí)慣的語言和概念;
在界面中一致:所有的元素和結(jié)構(gòu)需保持一致,比如:設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。
2、反饋Feedback
控制反饋:通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作;
頁面反饋:操作后,通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。
3、效率Efficiency
簡化流程:設(shè)計(jì)簡潔直觀的操作流程
清晰明確:語言表達(dá)清晰且表意明確,讓用戶快速理解進(jìn)而作出決策
幫助用戶識別:界面簡單直白,讓用戶快速之別而非回憶,減少用戶記憶負(fù)擔(dān)。
4、可控Controllability
用戶決策:根據(jù)場景可給予用戶操作建議或安全提示,但不能代替用戶進(jìn)行決策;
結(jié)果可控:用戶可以自由的進(jìn)行操作,包括撤銷、回退和終止當(dāng)前操作等。
這些都在官網(wǎng)上有介紹。
既然這個是基于Vue+ElementUI開發(fā)的,所以Vue的一些前端準(zhǔn)備還是需要的,可以在之前的隨筆中去查看,點(diǎn)擊這里
中文官方幫助文檔https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/
vue-element-admin 是一個后臺前端解決方案,它基于 vue 和 element-ui實(shí)現(xiàn)。它使用了最新的前端技術(shù)棧,內(nèi)置了 i18 國際化解決方案,動態(tài)路由,權(quán)限驗(yàn)證,提煉了典型的業(yè)務(wù)模型,提供了豐富的功能組件,它可以幫助你快速搭建企業(yè)級中后臺產(chǎn)品原型。
這個項(xiàng)目的定位是后臺集成方案,不太適合當(dāng)基礎(chǔ)模板來進(jìn)行二次開發(fā)。因?yàn)楸卷?xiàng)目集成了很多你可能用不到的功能,會造成不少的代碼冗余。如果你的項(xiàng)目不關(guān)注這方面的問題,也可以直接基于它進(jìn)行二次開發(fā)。
安裝Git和下載Demo
到這個地址 https://git-scm.com/download/win去下載并且安裝Git
下載好Git之后,就可以從Git上拉去代碼了
git clone https://github.com/PanJiaChen/vue-element-admin.git
或者,直接在Git上下載壓縮包也是可以的https://github.com/PanJiaChen/vue-element-admin.git
下載下來,項(xiàng)目的目錄結(jié)構(gòu)就是這個樣子
安裝依賴:
npm install
建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org
首先要確保自己電腦上又安裝了Node.js的環(huán)境。可以自行去官網(wǎng)上去下載。
本地開發(fā),啟動項(xiàng)目
vue cli 2 是 npm run dev
,cli 3 是npm run serve
如果前面步驟都正確,就可以看到如下界面:
登錄進(jìn)去就可以看到如下界面:這個界面還是挺漂亮的
什么是路由呢?可以參照下官方的解釋:https://router.vuejs.org/zh/guide/
路由允許我們通過不同的 URL 訪問不同的內(nèi)容。該 URL 可以是我們自己設(shè)置的,在項(xiàng)目中并沒有這樣的文件夾,這種功能就是路由.
路由的本質(zhì)是hash值!
vue 中的路由設(shè)置分為四步曲 :
定 : 定義路由組件
配 : 配置路由
實(shí) : 實(shí)例化路由
掛 : 掛載路由
用 Vue.js + Vue Router 創(chuàng)建單頁應(yīng)用,是非常簡單的。使用 Vue.js ,我們已經(jīng)可以通過組合組件來組成應(yīng)用程序,當(dāng)你要把 Vue Router 添加進(jìn)來,我們需要做的是,將組件 (components) 映射到路由 (routes),然后告訴 Vue Router 在哪里渲染它們。
路由放在src->router->index.js中,還有一個views文件夾,當(dāng)然是放這些頁面的啦~
首先,我們要了解一些這個項(xiàng)目中配置路由時提供了哪些配置項(xiàng)
//當(dāng)設(shè)置 true 的時候該路由不會再側(cè)邊欄出現(xiàn) 如401,login等頁面,或者如一些編輯頁面/edit/1 hidden: true // (默認(rèn) false) //當(dāng)設(shè)置 noRedirect 的時候該路由在面包屑導(dǎo)航中不可被點(diǎn)擊 redirect: 'noRedirect' //當(dāng)你一個路由下面的 children 聲明的路由大于1個時,自動會變成嵌套的模式--如組件頁面 //只有一個時,會將那個子路由當(dāng)做根路由顯示在側(cè)邊欄--如引導(dǎo)頁面 //若你想不管路由下面的 children 聲明的個數(shù)都顯示你的根路由 //你可以設(shè)置 alwaysShow: true,這樣它就會忽略之前定義的規(guī)則,一直顯示根路由 alwaysShow: true name: 'router-name' //設(shè)定路由的名字,一定要填寫不然使用<keep-alive>時會出現(xiàn)各種問題 meta: { roles: ['admin', 'editor'] //設(shè)置該路由進(jìn)入的權(quán)限,支持多個權(quán)限疊加 title: 'title' //設(shè)置該路由在側(cè)邊欄和面包屑中展示的名字 icon: 'svg-name' //設(shè)置該路由的圖標(biāo) noCache: true //如果設(shè)置為true,則不會被 <keep-alive> 緩存(默認(rèn) false) breadcrumb: false // 如果設(shè)置為false,則不會在breadcrumb面包屑中顯示 }
所以,我們只需要在路由中對應(yīng)的位置加上自己的菜單選項(xiàng)就可以了
{ path: '/bingle', component: Layout, redirect: '/bingle/index', name: 'bingle', meta: { title: 'BingleTestMainMenu', icon: 'example' }, children: [ { path: 'bingle', component: () => import('@/views/dashboard/index'), name: 'bingle', meta: { title: 'BingleSubmenu1', icon: 'guide', noCache: true,affix: true } }, { path: 'bingle1', component: () => import('@/views/dashboard/index'), name: 'bingle2', meta: { title: 'BingleSubmenu2', icon: 'guide', noCache: true,affix: true } } ] },
這時就可以在菜單欄看到自己增加的菜單項(xiàng)了。
到此,相信大家對“Vue+Element的后臺管理框架的功能介紹”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。