vue + express的集成

node环境下集成 vue+express

写在前面

前端小白一个，刚加入前端这个浩浩荡荡的大军的时候，前后端分离已经是一个大趋势了，所以秉持着一个学习的态度，尝试着搭建了一个vue+express的环境

创建vue项目

• 搭建脚手架

1. npm install -g vue-cli

• 创建基于webpack的项目

1. vue init webpack testapp

• 安装依赖并运行项目

1. cd testapp
2. npm install
3. npm run dev

此时vue项目已经启动，在浏览器输入localhost:8080，页面会显示
此时你会想，怎么把express和vue集成在一起呢？不要着急，往下看。

集成express

• 根目录新建一个server文件夹
• server文件夹下新建文件app.js
• 安装express

1. npm install express --save

• server目录下新建一个文件夹，命名为routes
• app.js中启动服务器，代码如下：

var fs = require('fs')
var path = require('path')
var bodyParser = require('body-parser')
var app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
// 路由
var goodsRouter = require('./routes/goods')
app.use('/goods', goodsRouter)
// 访问静态资源
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')
})

• 启动,部署项目

1. 本地启动项目的话，需要同时启动vue和express，分别是npm run dev（vue启动）和 node server/app.js(启动server下面的app.js)
2. 部署到服务器上只需要启动express就好了，部署之前打包：npm run build

示例代码已经推到码云上了，传送门：https://gitee.com/jbIngram/vue-express