网站首页 » 前端开发 » Vue » Vue2+Express 项目开发环境搭建
上一篇:
下一篇:

Vue2+Express 项目开发环境搭建

前言

之前分享过一篇《Vue+Express+MongoDB 搭建极简版个人博客(增删改查)》,但没有怎么细说如何搭建 Vue+Express 开发环境。所以在这里就分享下。也算是一个记录吧!

Vue+Express 项目开发环境搭建之旅

首先我们依次执行如下命令行,

安装 vue 环境

// 安装 vue-cli 脚手架
npm install -g vue-cli
// 创建并初始化一个项目目录
vue init webpack myapp
// 切换到项目目录
cd myapp
// 安装所需模块
npm install

安装完后,通过下面的命令就可以启用 vue 的服务了

npm run dev

把根目录下的 src 改名为 client。

修改 webpack 配置,把里面路径用到 src 的都改为 client。

文件目录为 build/webpack.base.conf

其实这个目录只是我们平时开发代码的目录,把它改名为 client 也没什么不可,毕竟网上很多资料也是这么说的,这个其实都不重要,只是为了让人看起来更容易明白目录的作用而已。

集成 Express

为了更方便,我们通过安装 express-generator 来引入 express 命令

npm install -g express-generator

然后我们就可以通过 express 命令来创建基本的目录结构

express -e server

创建完后,我们就通过下面的命令,切换到 server 目录并安装所需依赖

cd server && npm install

最后一步就是启动项目了

SET DEBUG=blog:* & npm start

看到这个提示说明服务启动成功了

提示

server:server Listening on port 3000 +0ms

除了通过 express 命令来自动生成 express 的文件目录外,我们还可以手动自己来创建一些目录和文件

在根目录下创建 server 目录,进入 server 创建 app.js 文件,文件内容大概如下:

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

不过我们可以把之前通过 express 生成的 app.js 中的代码拷贝过来,同时把引入了的模块添加到 package.json 中,然后在 cmd 切换到 server 目录执行npm install 把所依赖的模块安装上就 OK。自己手动创建 express 服务可以让项目更加简洁,不会有太多无用的文件和目录。

到这里,我们就完成了前端后端各自的环境部署。

下面你就可以在前后端中进行代码编辑了。前端代码编辑完后,就可以直接打包,生成 dist 目录,然后在 server 中修改下 app.js 中的默认首页为 ../dist/index.html 就好,然后访问后端服务,就可以看到页面效果了。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/vue-express-development-environment-to-build/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END