vue+express 环境搭建

vue+express 环境搭建

该项目是在学习vue过程中,秉着前后端分离的态度,尝试着自己搭建vue+express环境

搭建vue项目
安装vue-cli脚手架
npm install -g vue-cli
1
创建基于webpack模版的项目
vue init webpack firstapp
1
安装包依赖并运行

firstapp
1
2
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中启动服务器,代码如下:

express
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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

搭建过程参考文章:https://julytian.github.io/2017/04/06/vue%E4%B8%8Enode%E7%BB%93%E5%90%88%E5%BC%80%E5%8F%91%E9%83%A8%E7%BD%B2/

示例代码已经推到github上,地址:https://github.com/minteliuwm/FirstApp

© 2018 Ken的博客 All Rights Reserved. 本站访客数人次 本站总访问量