vue admin spa下載 - vue admin spa原始碼下載

vue admin spa

其他類別

2.1正式版

下載

後台管理系統vue-admin-spa（注意：本專案已停更，如有需要可前往最新vue3.0版本，功能更多、更全）

使用到的技術堆疊：vue + vue-resource + vue-router + vuex(spa必備) + element-ui + ES6 + webpack + npm

測試位址（如果無法打開，可嘗試將DNS 修改為114.114.114.114 即可）

前言

本專案借鏡vue鷹架和三個專案（取長補短）搭建而成，並且不斷完善，目的是為了更接近和適合大家的專案需求，更適合2次開發，以下幾點重寫：

登陸註冊（含MD5加密）
權限控制，選單根據使用者介面回來的權限資料進行顯隱，手敲網址列，會跳到404（網址列錯誤）或401（網址列正確但無權限），並可在系統設定中動態修改權限
切換主題，完全支援使用者手動切換主題和記住主題
全部資料進行本地json模擬，二次開發者，只需要把json路徑替換成實際介面路徑即可，即使是新手也能輕鬆搞定擼後台管理系統
全部動態操作的按鈕點選元素，都已經在控制台列印出相關參數，實際開發時把這些參數按需提交給後端介面即可
新增了學生模組，使用的是本地真正api接口，
新增了機構管理模組，使用的mockjs接口，附上真正開發的js邏輯（包含校驗和提交接口等），實際開發時把真正邏輯代碼恢復即可

說明

開源目的：提供給基於底層的2次開發者，供更多人學習與參考，少走彎路。
需求客製化：這個專案作為底層框架開源，目前只具備了一些基本功能，如有其他功能需求可聯絡群主。
貢獻加入：歡迎更多開發者加入這個底層開發，一起貢獻和維護，詳情聯絡群組主。
及時交流：為了方便大家技術交流,本專案新建了一個qq群--645582193

**有問題可以先提交到issue或是進群討論

如果覺得此項目對你有幫助，記得點選右上方的Star噢^_^

功能(部分資料進行本地json模擬，部分採用mockjs，由於豆瓣api近期封鎖故使用豆瓣api部分功能暫時無法預覽)

系統說明
登入/登出
密碼修改
個人主頁
頭像上傳
權限驗證
修改權限
側邊欄
麵包屑
富文本編輯器
切換主題（點擊頭像下拉）
表單校驗、提交
清單增刪改查、排序、匯出(後台管理系統基本功能)
401，404重定向頁面
匯出excel
views-tab
PC端更多功能即將開放…

開發

    # 克隆代码
    git clone https://github.com/lss5270/vue-admin-spa.git
    # 安装依赖
    npm install
    # or 直接解压node_modules.7z到当前位置 （比较适合新手）。

    # 本地开发 开启服务
    npm run dev
    # or 直接双击start.bat（比较适合新手）

瀏覽器造訪http://localhost:2018

發布

  
    # 构建生产环境
    npm run build:prod
    # or 直接双击build.bat（比较适合新手）

模擬運行正式環境

    # nginx环境下运行
    1.准备nginx环境，自行到nginx官网（https://nginx.org/）下载，并解压
    2.双击build.bat后根目录生成一个dist包，把dist整个文件夹拷贝到nginx解压后的html下
    3.启动nginx服务：双击nginx.exe
    4.访问入口：http://localhost/dist/index.html
    ………
    
    8.关闭nginx服务：直接删进程
    
    # tomcat环境下运行
    参照nginx步骤即可

關於圖示

    本项目使用了两套图标系统，具体使用方法参照以下官方链接:
    1.http://element.eleme.io/#/zh-CN/component/icon
    2.http://fontawesome.io/icons/
    使用方法：
    a.在index.html中引入<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    b.在使用图标的地方放置图标<i class="fa fa-home" aria-hidden="true"></i>

關於UI系統

    由于bootstrap不支持mvvm已弃用，本项目使用了全新的elementUI系统，具体使用方法参照以下官方链接:
    1.http://element.eleme.io/#/zh-CN/component/installation

關於.vue檔案中背景圖片路徑，打包到生產環境路徑404的問題修復

    具体修复方法，参照Issues中的 #6问题

關於學生模組的api接口

    1.学生模块功能使用了本地api接口，若想正常运行，请下载另外一个node项目（https://github.com/lss5270/vue-admin-spa-api），并且在本地启动该node 项目。
    2.该node项目源码，相当于其他后端语言（例如java）提供增删查改接口的源代码。
    3.不懂如何使用node项目的同学，可进群讨论

目錄結構

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件。不直接显示
│   ├── global                 // 全局指令
│   ├── filtres                // 全局filter
│   ├── router                 // 路由
│   ├── store                  // 全局store管理
│   ├── utils                  // 全局公用方法
│   ├── view                   // view视图层
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
│   ├── jquery
│   ├── Tinymce                // 富文本
│   ├── dataJson               // 模拟接口json
│   └── theme                  // 主题文件
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json