从零搭建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