簡介:vueThink是一款基於vue和tp5.0開發的前后端模板分離的框架, 前端只負責處理api接口返回的數據即可,通過統一的路由對應模式,開發效率還是蠻快的。
而且餓了么ui還提供了很多組件可以供你們使用,如果有些組件安裝后無效果,記得升級下餓了么ui版本(npm install --對應版本)
開發編輯器建議使用: phpstorm2017版,里面擴展可以安裝vue語法的插件支持,開發起來會省很多事
使用vue前提環境准備:
1.安裝node.js
前端部分是基於node.js上運行的,所以必須先安裝node.js,版本要求為6.9.0以上(推薦安裝官方推薦版本),下載地址:https://nodejs.org/zh-cn/
下載包之后傻瓜式安裝,一直點擊下一步操作,直至安裝結束,如果不懂得可以網上搜一下nodejs安裝教程
如何檢測nodejs是否安裝成功,打開cmd , 運行如下兩個命令,node -v 和 npm -v ,如果兩個都有顯示ok nodejs安裝完成
2.程序運行之前需搭建好Server端
vueThink包: GitHub包
下載之后解壓,打開cmd命令,進入到你的項目目錄:frontEnd
然后執行: npm install 回車等待安裝結束
項目中會生成出一個, nodejs的運行擴展【node_modules】
然后執行:npm run dev
瀏覽器會自動跳轉,默認跳轉的是 localhost:8080 ,顯示如下界面恭喜你項目搭建成功
檢測默認接口請求地址:指向你的public路徑即可,如下圖標識tp路由正確
更改前端配置文件,build下的webpack.base.conf.js 文件接口,此處建議本地吧上圖中訪問的tp路徑配置個絕對路徑的域名填入
如果想更新掉瀏覽器的默認訪問顯示localhsot:8080, 替換localhsot更改如下文件: build/dev-server.js文件
如果想更改掉,8080端口,如下
注意:前端服務啟動,默認會占用8080端口,所以在啟動前端服務之前,請確認8080端口沒有被占用。
如果想替換前端默認端口,可修改config/index.js里面的dev對象的port參數,但不建議這么做。
更改之后,停掉cmd中的npm 命令,ctrl+c 兩次,然后重新運行npm run dev 即可
打包發布項目
項目開發結束之后,執行npm命令完前端文件的打包操作
還是在之前的路徑下,執行, npm run build 等待執行結束,會生成 dist文件,然后配置絕對路徑到dist目錄,在瀏覽器訪問即可