从零搭建 vue+express 开发环境

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

搭建vue项目

  • 安装vue-cli脚手架

    1
    npm install -g vue-cli
  • 创建基于webpack模版的项目

    1
    vue init webpack firstapp
  • 安装包依赖并运行

    1
    2
    3
    cd firstapp
    npm install
    npm run dev

    在浏览器上输入localhost:8080,这就是一个完整的基于vue-cli脚手架的项目。

那么怎么样集成进express呢?我们接着往下看。

集成express

  • 修改文件结构
  1. 将src文件夹修改为client
  2. 将webpack.base.conf.js内的src地址修改为client
  • 根目录下新建一个文件夹,命名为server

  • server目录下新建一个文件,命名为app.js

  • 安装express

    1
    npm install express --save
  • server目录下新建一个文件夹,命名为routes

  • app.js中启动服务器,代码如下:

    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
    29
    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');
    });

打包

1
2
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

走过路过千万不要忘记留个star哟~~

查看评论