成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于Vue.js 2.x系列 + Element UI + RBAC/AUTH權(quán)限 的響應(yīng)式后臺(tái)管理

AlexTuan / 3394人閱讀

摘要：增加文件上傳插件，主要用于管理后臺(tái)的資源，之前我們運(yùn)營是每次都要去上傳文件，而有了這個(gè)插件管理，就可以不用上傳重復(fù)的資源?，F(xiàn)目前上傳的文件沒有用數(shù)據(jù)庫來管理，而是直接用獲取文件的形式，也是偷懶，有時(shí)間再實(shí)現(xiàn)吧。

項(xiàng)目全面更新 https://segmentfault.com/a/11... 前言

項(xiàng)目前端地址： https://github.com/lmxdawn/vu...

項(xiàng)目后端地址： https://github.com/lmxdawn/vu...

歡迎大家的star

20180519 更新

這次加了一個(gè)通宵班， 沒辦法強(qiáng)迫癥。

1.增加文件上傳插件，主要用于管理后臺(tái)的資源，之前我們運(yùn)營是每次都要去上傳文件，而有了這個(gè)插件管理，就可以不用上傳重復(fù)的資源。上傳插件實(shí)現(xiàn)了把漢字自動(dòng)轉(zhuǎn)成拼音（都知道中文路徑時(shí)不友好的）?，F(xiàn)目前上傳的文件沒有用數(shù)據(jù)庫來管理，而是直接用獲取文件的形式，也是偷懶，有時(shí)間再實(shí)現(xiàn)吧。

廢話不多說，貼圖

20180428 更新

1.增加 mock 模擬數(shù)據(jù)。注意（改為API接口數(shù)據(jù)時(shí)一定要把 main.js 里面引入的 mock.js 刪掉）

2.增加左側(cè)導(dǎo)航欄的左右收折功能，特別注意一點(diǎn)就是 由于 element-ui 的導(dǎo)航菜單的原因，在el-submenu 外層加了 div 時(shí)，收折就隱藏不了文字，所以要自己加上 css 樣式，放在 base.scss 下面

// 左側(cè)導(dǎo)航欄的折疊后的樣式
.slide-hide {
    .el-menu--collapse {
        .el-submenu {
            .el-submenu__title {
                span {
                    height: 0;
                    width: 0;
                    overflow: hidden;
                    visibility: hidden;
                    display: inline-block;
                }
                .el-submenu__icon-arrow {
                    display: none;
                }
            }
        }
        .el-menu-item {
            .el-tooltip {
                span {
                    height: 0;
                    width: 0;
                    overflow: hidden;
                    visibility: hidden;
                    display: inline-block;
                }
            }
        }
    }
}

效果如下：

PC版

手機(jī)版

功能

[x] 管理員登錄

[x] 登錄

[x] 修改密碼

[x] 角色管理

[x] 權(quán)限管理

[x] 401/404錯(cuò)誤頁面

[x] 動(dòng)態(tài)面包屑

[x] 動(dòng)態(tài)側(cè)邊欄

安裝步驟 
git clone https://github.com/lmxdawn/vue-admin-html.git      // 把模板下載到本地
cd vue-admin-html    // 進(jìn)入模板目錄
npm install         // 安裝項(xiàng)目依賴，等待安裝完成之后
本地開發(fā) 
// 開啟服務(wù)器，瀏覽器訪問 http://localhost:8080
npm run dev
構(gòu)建生產(chǎn) 
// 執(zhí)行構(gòu)建命令，生成的dist文件夾放在服務(wù)器下即可訪問
npm run build
用到的東西

icon 圖標(biāo)： 用阿里巴巴矢量圖標(biāo)庫，地址 http://www.iconfont.cn 怎么下載圖標(biāo)及下載 自行百度，圖標(biāo)放在 src/assets/icons 目錄下面，把 iconfont 里創(chuàng)建的項(xiàng)目圖標(biāo)現(xiàn)在 解壓后直接放入 這個(gè)目錄即可，值得注意的是，因?yàn)椴捎昧?eslint ，所以 iconfont.js 頭部要加 /*eslint-disable */ 忽略錯(cuò)誤

Online Demo

（建議使用最新版Chrome瀏覽器）
在線 Demo

寫在最后

一些文章地址：
VUE后臺(tái)管理的文章

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/28688.html

相關(guān)文章

  • 【收藏】2019年最新Vue相關(guān)精品開源項(xiàng)目庫匯總

    摘要：前言本文的前身是源自上的項(xiàng)目但由于該項(xiàng)目上次更新時(shí)間為年月日，很多內(nèi)容早已過期或是很多近期優(yōu)秀組件未被收錄，所以小肆今天重新更新了內(nèi)容并新建項(xiàng)目。提交的項(xiàng)目格式如下項(xiàng)目名稱子標(biāo)題相關(guān)介紹如果收錄的項(xiàng)目有錯(cuò)誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項(xiàng)目awesome-github-vue,但由于該項(xiàng)目上次更新時(shí)間為2017年6月12日，很多內(nèi)容早已過期或是很多近期優(yōu)...

    williamwen1986 評(píng)論0 收藏0

  • 手摸手，帶你用vue擼后臺(tái) 系列五(v4.0新版本)

    摘要：同時(shí)增加了單元測試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會(huì)重寫瀏覽器的對(duì)象，從而才能攔截所有請(qǐng)求，代理到本地。 前言 vue-element-admin 從 2017.04.17提交第一個(gè) commit 以來，維護(hù)至今已經(jīng)有兩年多的時(shí)間了了，發(fā)布了四十多個(gè)版本，...

    MonoLog 評(píng)論0 收藏0

  • 手摸手，帶你用vue擼后臺(tái) 系列五(v4.0新版本)

    摘要：同時(shí)增加了單元測試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會(huì)重寫瀏覽器的對(duì)象，從而才能攔截所有請(qǐng)求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個(gè) commit 以來，維護(hù)至今已經(jīng)有兩年多的時(shí)間了了，發(fā)布了四十多個(gè)版本，收獲了三...

    graf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<