從零搭建vue+express開發環境

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

 

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

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

2、全局安裝express

　　npm install express -g 

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

　　npm install express-generator -g 

4、查看 express 版本，可以檢查生成器 express-generator  是否安裝成功

　　 express -v 

5、（可選）查看express 所有幫助指令及用法

　　express -h

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

　　npm install -g vue-cli

 

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

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

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

　　express -e nodejs-demo

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

　　cd workspace

10、安裝依賴

　　npm install 

11、啟動項目------檢查express有無安裝成功

　　npm start

 

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

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

13、創建基於webpack模版的項目 vue_prj  (任意命名項目名稱vue_prj)

 　　vue init webpack vue_prj

14、進入項目 vue_prj 文件夾

　　cd vue_prj

15、安裝vue項目依賴

　　npm install

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

　　npm run dev

 17、每次改動 vue_prj 里的文件之后，均要執行一次 build

　　npm run build

 

四：---------將VUE項目放到EXPRESS項目並建立聯系 --------------

18、將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