搭建VUE + Expresss开发环境

从零搭建VUE + Expresss开发环境

一、准备环境

1、安装nodeJs
官网地址：https://nodejs.org/en/
下载适合自己电脑的版本安装
2、安装VUE脚手架
官网地址：https://cli.vuejs.org/zh/

安装：
npm install -g @vue/cli
# OR
yarn global add @vue/cli

3、安装express
npm install express -g
4、安装express生成器 express-generator
npm install express-generator -g
5、检查是否安装成功

E:\test>express --version
4.16.1

E:\test>vue -V
@vue/cli 4.4.1

E:\test>

二、创建服务器端

1、打开cmd，进入工作目录
2、创建项目
express -e nodejs-demo
3、安装依赖并启动项目

   change directory:
     > cd nodejs-demo

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=nodejs-demo:* & npm start

三、创建客户端

1、打开cmd，进入public文件夹
2、创建项目
vue create vue-demo
3、安装依赖并启动项目

// Project setup
npm install
// Compiles and hot-reloads for development
npm run serve

// Compiles and minifies for production 
npm run build
// Lints and fixes files
npm run lint

四、关联前后端

1、将express项目的服务器静态文件根目录 指向 vue 执行build后的输出文件夹 dist

修改app.js文件里的代码如下
app.use(express.static(path.join(__dirname, 'public/vue-demo/dist')));

调试及打包

1、调试
前端启动: 进入public目录，npm run serve
后端启动 进入根目录，node start
2 、打包调试
前端打包: 进入public目录，npm run build
后端启动 进入根目录，node start