版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012414590/article/details/79043757
该项目是在学习vue过程中,秉着前后端分离的态度,尝试着自己搭建vue+express环境
搭建vue项目
- 安装vue-cli脚手架
npm install -g vue-cli
- 创建基于webpack模版的项目
vue init webpack firstapp
- 安装包依赖并运行
cd firstapp
npm install
npm run dev
在浏览器上输入localhost:8080,这就是一个完整的基于vue-cli脚手架的项目。
那么怎么样集成进express呢?我们接着往下看。
集成express
修改文件结构
- 将src文件夹修改为client
- 将webpack.base.conf.js内的src地址修改为client
根目录下新建一个文件夹,命名为server
server目录下新建一个文件,命名为app.js
安装express
npm install express --save
server目录下新建一个文件夹,命名为routes
app.js中启动服务器,代码如下:
var express = require('express');
var fs = require('fs');
var path = require('path');
var bodyParser = require('body-parser');
var app = express();
// 注册users接口
var users = require('./routes/users');
app.use('/users', users);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
// 访问静态资源
app.use(express.static(path.resolve(__dirname, '../dist')));
// 访问单页
app.get('*', function (req, res) {
var html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8');
res.send(html);
});
// 监听
app.listen(8081, function () {
console.log('success listen...8081');
});
打包
npm run build
node server/app.js
示例代码已经推到github上,地址:https://github.com/minteliuwm/FirstApp
扫描二维码关注公众号,回复:
6746359 查看本文章
![](/qrcode.jpg)
走过路过千万不要忘记留个star哟~~