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

原文地址:https://www.cnblogs.com/qinlongqiang/p/11505049.html