從零搭建vue+express開發環境

一、express,vue運行環境，2建express項目，3建vue項目，4將vue項目（3）輸出文件拷貝到express靜態根目錄裏

 

一：---------PC全局安裝express 和 vue-cli基礎運行環境（不是俱體app，只是PC所需軟件）-------

一、安裝node.js （自行百度）

二、全局安裝express

　　npm install express -g 

三、全局安裝express生成器 express-generator 

　　npm install express-generator -g 

四、查看 express 版本，能夠檢查生成器 express-generator  是否安裝成功

　　 express -v 

五、（可選）查看express 全部幫助指令及用法

　　express -h

六、全局安裝vue生成器   vue-cli   腳手架

　　npm install -g vue-cli

 

二：---------建立俱體express應用APP（服務器端） --------------

七、cd 進入指定目錄 workspace(任意命名)--------------這是系統cmd指令，不是node指令

八、在指定目錄 workspace(任意命名) 建立項目 nodejs-demo(任意命名)

　　express -e nodejs-demo

九、由當前目錄 workspace(任意命名)  進入 項目目錄 nodejs-demo(任意命名)--------------這是系統cmd指令，不是node指令

　　cd workspace

十、安裝依賴

　　npm install 

十一、啓動項目------檢查express有無安裝成功

　　npm start

 

三：---------建立俱體VUE應用（前端靜態頁面） --------------

十二、進入express項目的靜態文件根目錄public文件夾

1三、建立基於webpack模版的項目 vue_prj  (任意命名項目名稱vue_prj)

 　　vue init webpack vue_prj

1四、進入項目 vue_prj 文件夾

　　cd vue_prj

1五、安裝vue項目依賴

　　npm install

1六、（可選）測試並運行vue前端項目，在瀏覽器上輸入localhost:8080，檢查基於vue-cli腳手架的項目是否建立完成

　　npm run dev

 1七、每次改動 vue_prj 裏的文件以後，均要執行一次 build

　　npm run build

 

四：---------將VUE項目放到EXPRESS項目並創建聯繫 --------------

1八、將express項目的服務器靜態文件根目錄 指向 vue 執行build後的輸出文件夾 dist

　　修改app.js文件裏的代碼以下

　　app.use(express.static(path.join(__dirname, ' public/vue_prj/dist')));

 

---------完成，能夠編寫app業務邏輯代碼-------------- 

 

 

 

 

//另外參考及說明

https://blog.csdn.net/u012414590/article/details/79043757

 

前端模板渲染vue，後端express提供接口服務，合併成一個項目。一樣是先後端分離，互不影響。 
項目發佈只是把vue通過webpack打包當作express的靜態文件夾發佈

 

將VUE 項目的全部文件放入 public

或者修改  app.use(express.static(path.resolve(__dirname, '../dist')));

 

前端測式調式過程的臨時服務器 

npm run dev        

前端輸編譯成最後文件

npm run buil