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

資訊專欄INFORMATION COLUMN

vue2+element 管理后臺 集成解決方案 沒有沒做的,只要想不到的!

sanyang / 3706人閱讀

摘要:目前的技術(shù)棧主要的采用由于是個人項目,所以數(shù)據(jù)請求都是用了代替。后續(xù)會出一系列的教程配套文章,如如何從零構(gòu)建后臺項目框架,如何做完整的用戶系統(tǒng)如權(quán)限驗證,二次登錄等,如何二次開發(fā)組件如富文本,如何整合七牛等等文章,各種后臺開發(fā)經(jīng)驗等等。

完整項目地址:vue-element-admin
系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇)
系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇)
系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰(zhàn)篇)
系類文章四:手摸手,帶你用vue擼后臺 系列四(vueAdmin 一個極簡的后臺基礎(chǔ)模板)

前言
這半年來一直在用vue寫管理后臺,目前后臺已經(jīng)有七十多個頁面,十幾種權(quán)限,但維護(hù)成本依然很低,效率依然很高,所以準(zhǔn)備開源分享一下后臺開發(fā)的經(jīng)驗和成果。目前的技術(shù)棧主要的采用vue+element+axios.由于是個人項目,所以數(shù)據(jù)請求都是用了mockjs代替。

后續(xù)會出一系列的教程配套文章,如如何從零構(gòu)建后臺項目框架,如何做完整的用戶系統(tǒng)(如權(quán)限驗證,二次登錄等),如何二次開發(fā)組件(如富文本),如何整合七牛等等文章,各種后臺開發(fā)經(jīng)驗等等。莫急~~

功能

登錄/注銷

權(quán)限驗證

側(cè)邊欄

面包屑

富文本編輯器

Markdown編輯器

JSON編輯器

列表拖拽

plitPane

Dropzone

Sticky

CountTo

echarts圖表

401,401錯誤頁面

錯誤日志

導(dǎo)出excel

table example

form example

多環(huán)境發(fā)布

dashboard

二次登錄

動態(tài)側(cè)邊欄

mock數(shù)據(jù)

svg iconfont

開發(fā)
    # 克隆項目
    git clone https://github.com/PanJiaChen/vue-element-admin.git

    # 安裝依賴
    npm install

    # 本地開發(fā) 開啟服務(wù)
    npm run dev

瀏覽器訪問 http://localhost:9527

發(fā)布
    # 發(fā)布測試環(huán)境 帶webpack ananalyzer
    npm run build:sit-preview

    # 構(gòu)建生成環(huán)境
    npm run build:prod
目錄結(jié)構(gòu)
├── build                      // 構(gòu)建相關(guān)??
├── config                     // 配置相關(guān)
├── src                        // 源代碼
│?? ├── api                    // 所以請求
│?? ├── assets                 // 主題 字體等靜態(tài)資源
│?? ├── components             // 全局公用組件
│?? ├── directive              // 全局指令
│?? ├── filtres                // 全局filter
│?? ├── mock                   // mock數(shù)據(jù)
│?? ├── router                 // 路由
│?? ├── store                  // 全局store管理
│?? ├── styles                 // 全局樣式
│?? ├── utils                  // 全局公用方法
│?? ├── view                   // view
│?? ├── App.vue                // 入口頁面
│?? └── main.js                // 入口 加載組件 初始化等
├── static                     // 第三方不打包資源
│?? ├── jquery
│?? └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置項
├── .gitignore                 // git 忽略項
├── favicon.ico                // favicon圖標(biāo)
├── index.html                 // html模板
└── package.json               // package.json
狀態(tài)管理

后臺只有user和app配置相關(guān)狀態(tài)使用vuex存在全局,其它數(shù)據(jù)都由每個業(yè)務(wù)頁面自己管理。

效果圖 兩步驗證登錄 支持微信和qq

)

真正的動態(tài)換膚

拖拽排序

上傳裁剪頭像

錯誤統(tǒng)計

富文本(整合七牛 打水印等個性化功能)

更多demo 占坑

系類文章一

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/82678.html

相關(guān)文章

  • Vue2.0 + ElementUI 手寫權(quán)限管理系統(tǒng)后臺模板(一)——簡述

    摘要:簡介最近寫了一個基于權(quán)限管理系統(tǒng)的后臺模板,包含了正常項目開發(fā)所需的框架功能,開發(fā)者使用的時候只需要專注于項目的業(yè)務(wù)邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 簡介 最近寫了一個基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺模板,包含了正常項目開發(fā)所需的框架功能,開發(fā)者使用的時候只需要專注于項目的業(yè)務(wù)邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。 源碼地址...

    _ivan 評論0 收藏0
  • vue2.0+axios+elementUI實現(xiàn)增刪改查

    最近嘗試使用vue+element實現(xiàn)增刪改查功能,在實現(xiàn)的過程中遇到了蠻多問題,現(xiàn)在總結(jié)如下:首先安裝相關(guān)的插件1、根據(jù)vue官網(wǎng)推薦,使用axios進(jìn)行前后臺交互,安裝axiosnpm install axios -S2、安裝elementUI,官網(wǎng)npm i element-ui -S3、安裝 loader 模塊npm install style-loader -Dnpm install c...

    rollback 評論0 收藏0
  • 關(guān)于Vue2一些值得推薦文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<