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