基於ThinkPHP 5.0與Vue.JS 2.x的先後端開源開發框架VueThink

VueThink

項目介紹

VueThink是一套基於Vue全家桶（Vue2.x + Vue-router2.x + Vuex）+ Thinkphp的先後端分離框架。 腳手架構建也能夠經過vue官方的vue-cli腳手架工具構建 實現了通常後臺所須要的功能模塊

VueThink不只適用於管理後臺或管理系統開發，且普遍適用於B/S架構的項目開發。VueThink是對先後端分離技術的應用實踐，2016年由洪睿科技的技術團隊研發並投入商業開發使用，已有許多的商業項目實踐。而今框架開源，但願能有更多志同道合的夥伴參與VueThink的迭代 ^_^

GitHub

https://github.com/honraytech/VueThink

使用許可：

VueThink是基於MIT協議的開源框架，它徹底免費。你能夠免費下載VueThink，用來搭建本身的或者團體的軟件。

##主要適用技術棧

• 後端框架：ThinkPHP 5.x
• 前端MVVM框架：Vue.JS 2.x
• 開發工做流：Webpack 1.x
• 路由：Vue-Router 2.x
• 數據交互：Axios
• 代碼風格檢測：Eslint
• UI框架：Element-UI 1.1.6
• JS函數庫：Lodash

VueThink的運行環境要求PHP5.4以上。

詳細開發文檔參考 ThinkPHP5徹底開發手冊

• 登陸、退出登陸
• 修改密碼、記住密碼
• 菜單管理
• 系統參數
• 權限節點
• 崗位管理
• 部門管理
• 用戶組管理
• 用戶管理

Demo

演示地址：http://demo.vuethink.com

用戶名：user01

密碼：user01

QQ羣交流

歡迎加入qq羣：340506819

開發依賴

• vue https://vuefe.cn/v2/guide/
• element-ui@1.1.3 http://element.eleme.io/1.1/#/zh-CN/component/installation
• axios https://github.com/mzabriskie/axios
• fontawesome http://fontawesome.io/icons/
• js-cookie https://github.com/js-cookie/js-cookie
• lockr https://github.com/tsironis/lockr
• lodash http://lodashjs.com/docs/
• moment http://momentjs.cn/

數據交互

數據交互經過axios以及RESTful架構來實現

用戶校驗經過登陸返回的auth_key放在header

值得注意的一點是：跨域的狀況下，會有預請求OPTION的狀況

附上接口文檔：http://api.vuethink.com

Server搭建

服務端使用的框架爲thinkphp5.搭建前請確保擁有lamp/lnmp/wamp環境。

集成環境推薦使用phpstudy：http://www.phpstudy.net/

這裏所說的搭建其實就是把server框架放入WEB運行環境，並使用80端口。

導入服務端根文件夾數據庫文件install.sql，並修改config/database.php配置文件。

• PHP >= 5.4.0
• PDO PHP Extension
• MBstring PHP Extension
• CURL PHP Extension

服務端開發手冊請參考：http://www.kancloud.cn/manual/thinkphp5/118003

當訪問 http://localhost, 出現「vuethink接口」即表明後端接口搭建成功。

p.s 若是使用的nginx服務，請設置重寫規則

location / {

    if (!-e $request_filename) {

        rewrite ^(.*)$ /index.php?s=$1 last;

        break;

    }
}

前端搭建

前端運行只須要執行如下兩個命令行
npm install
npm run dev

P.S 在前端服務啓動以前，要先啓動後端的服務，否則只是一個腳手架