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