node环境下集成 vue+express
写在前面
前端小白一个,刚加入前端这个浩浩荡荡的大军的时候,前后端分离已经是一个大趋势了,所以秉持着一个学习的态度,尝试着搭建了一个vue+express的环境
创建vue项目
- 搭建脚手架
- npm install -g vue-cli
- 创建基于webpack的项目
- vue init webpack testapp
- 安装依赖并运行项目
- cd testapp
- npm install
- npm run dev
此时vue项目已经启动,在浏览器输入localhost:8080,页面会显示
此时你会想,怎么把express和vue集成在一起呢?不要着急,往下看。
集成express
- 根目录新建一个server文件夹
- server文件夹下新建文件app.js
- 安装express
- 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')
})
- 启动,部署项目
- 本地启动项目的话,需要同时启动vue和express,分别是npm run dev(vue启动)和 node server/app.js(启动server下面的app.js)
- 部署到服务器上只需要启动express就好了,部署之前打包:npm run build
示例代码已经推到码云上了,传送门:https://gitee.com/jbIngram/vue-express