vueThink傻瓜式安裝方式和項目發布


簡介: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目錄,在瀏覽器訪問即可

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM