为什么要改名为 index.js ？这是因为 require('./src/server') 在默认情况下会去找 ./src/server/index.js，如果你想用别的名字，那就记得将 Babel register 的配置文件里改为 require(./src/<your entry file> 。
好了，现在后端的事情先暂时告一段落，接下来看看前端。
2. 利用 Vue 脚手架快速搭建应用
同样地，推荐使用 Vue 自带的template 工具，在 1s 内生成基本代码。
虽然利用这个工具生成的代码的后端就是基于 Express 的，但是后端部分的代码结构太简单，不适合做后续开发。所以建议这里先将 Vue 生成的代码放在另外一个地方，然后按需移动到前面用 Express 生成的代码文件夹里。
首先安装 template 工具
npm install -g vue-cli
然后执行命令生成代码。命令执行过程中需要输入一些参数
vue init webpack <my-project>
生成的代码结构是这样的
. ├── build │ ├── dev-server.js # development server script │ ├── karma.conf.js # unit testing config │ ├── webpack.base.conf.js # shared base webpack config │ ├── webpack.dev.conf.js # development webpack config │ ├── webpack.prod.conf.js # production webpack config │ └── ... ├── src │ ├── main.js # app entry file │ ├── App.vue # main app component │ ├── components # ui components │ │ └── ... │ └── assets # module assets (processed by webpack) │ └── ... ├── static # pure static assets (directly copied) ├── dist # built files ready for deploy ├── test │ └── unit # unit tests │ ├── index.js # unit test entry file │ └── ... ├── .babelrc # babel config ├── .eslintrc.js # eslint config ├── index.html # main html file └── package.json # build scripts and dependencies
我们发现这里也有一个 .babelrc，内容跟之前自己创建的基本一致，可以忽略它。此外，它还提供了 .eslintrc.js，是为了配合 eslint 检查代码是否符合规范的。这里面的内容很简单，想要偷懒就直接拿过来，觉得定制的规则不太符合自己的习惯的可以另外配置。
然后看到 build 路径下有 3 个 webpack 有关的配置文件，因为我们是要搭建开发环境，所以挑里面的 webpack.base.conf.js 和 webpack.dev.conf.js 就可以，建议把内容合并到一个 webpack.conf.js 文件里，放在项目的根目录下。
之后，基本上就是把 src 目录移动到之前用 Express 创建的 /src/client/，我习惯将所有 js 的入口文件都改为 index.js 所以，这里也可以将 src/client/main.js 改名为 src/client/index.js。
其他的文件先忽略不管。
到这里，前端部分的代码也基本整理完毕了。
3. 配置 Webpack
我们计划让 Webpack 将前端文件打包成一个 build.js 文件，然后放在 /src/server/public/javascripts 中供 jade 模板使用。所以设置好 webpack 的路径部分（其他的保留原来的就好）：
{ ... entry: path.join(__dirname, 'src/client/index.js'), output: { path: path.join(__dirname, 'src/server/public/javascripts/'), publicPath: '/javascripts/', filename: 'build.js' }, ... }
至于如何启动 Webpack，你可以选择单独用一个 shell 窗口运行它，也可以以 Express 中间件的形式提供代理。采用后一种方式，webpack 并不会把打包好的代码生成在磁盘上，而是保留在内存里。我们选择后一种方式，因为更方便。
只应该在开发环境中以 Express 中间件的形式部署 Webpack
所以需要修改 /src/server/index.js，关键是增加这几句
import webpack from 'webpack' import webpackDevMiddleware from 'webpack-dev-middleware' import webpackHotMiddleware from 'webpack-hot-middleware' import config from '../../webpack.config' const compiler = webpack(config) app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath, stats: { colors: true }, })) app.use(webpackHotMiddleware(compiler))
这样每次启动 Express 后，Webpack 中间件会拦截 config.output.publicPath 地址的请求并返回正确的结果，同时，如果被 Webpack 监听的文件发生变动，会立即通知前端产生相应变化。
4. 配置 Nodemon
之前提到过，计划用 Nodemon 启动 server 并监听代码变动。而 Nodemon 默认会监听除了 .git 和 node_modules 路径外的所有 js 代码，因为我们已经有 Webpack 监听前端代码了，所以得做相关配置让 Nodemon 只监听某一块代码。
在项目根路径下新增文件 nodemon.json，内容为