详细讲解如何从头构建Express Vue开发环境

准备工作/即将工作

1.为前端选择合适的预处理工具和资源管理工具

预处理工具分为js预处理工具和css预处理工具。Javascript一直被诟病缺乏原生模块机制，所有的js代码文件引入html页面后都会共享同一个命名空间。这就是为什么有各种各样的“标准”试图解决这个问题，但它们不是本地的，需要额外的工具来专门处理代码。虽然ES6最终引入了模块机制，但目前的浏览器支持水平还不足以“无后顾之忧地使用”。因此，js预处理工具的主要工作是帮助解决js的模块问题。虽然css预处理工具很容易理解，也就是将sass、less或手写笔代码翻译和合并成css代码。

资源管理工具是帮助我们管理各种资源文件(如css、js、图片、字体等。)前端需要，方便我们参考。目前常用的解决方案是直接编码成js代码，然后像js模块一样引用。这比手写各种网址方便多了。

正如标题所说，我们将采用Webpack，因为它具有上述所有功能。此外，它还支持代码热替换，这样在修改代码后不用刷新页面，就可以在浏览器中立即看到效果。

2.为后端选择合适的预处理工具

后端面向js代码，不像前端那样需要资源管理工具。此外，Node强制您至少使用一个模块管理方案(导入CommonJS或ES6)，而不考虑代码依赖性。

因此后端要简单得多，唯一需要考虑的是如何将ES6转化为ES5(如果您计划使用ES6)。目前普遍的做法是使用巴别塔。可以使用Babel命令行工具独立执行编译过程，也可以配置Babel寄存器实现运行时代码的动态翻译，这对于开发场景来说无疑是最方便的。所以我们选择后一种方式。

3.为整个项目选择合适的过程控制工具

过程控制工具的目的是帮助我们管理诸如代码检查、编译、压缩、移动和部署等任务。最初，我们是通过手动键入命令(或者编写更高级别的脚本)来实现的。有了过程控制工具，我们只需要提供配置文件和少量代码。

目前最流行的解决方案是大口。然而，因为我们在这里构建开发环境，所以不需要移动代码、压缩和部署，所以我们不需要强大的大口。我们只需要使用nodemon作为工具来监控代码更改，并在适当的时候重启服务器。

正式开工建设

1.使用快速脚手架快速构建应用程序

通过使用express提供的Express应用程序生成器，可以在1秒内构建最基本的应用程序。

如果您以前没有尝试过，首先执行以下命令来安装它

Npm install express-generator -g然后执行下面的命令来生成代码，在执行命令的过程中需要输入一些参数。

express myapp完成后的文件结构如下。app.js宾 www package.json公共 影像 JavaScript样式表 style.css路线索引. js 用户. js视图错误。玉 指数。玉 布局。杰德。但是这个文件结构只是后端代码，如果和前端代码结合起来，需要做一些改动。我们计划最终的文件结构应该是这样的。 src src 客户端 server .所以有必要把上面自动生成的Express代码放在/src/server/路径中。

接下来，我们需要删除一些不必要的东西，添加一些缺失的东西。

首先，由于我们打算在前端使用Vue框架，Vue-Router管理大部分路由，后端Express只保留少量RESTful API路由，因此后端不需要复杂的路由设置，因此routes文件夹中的内容可以简化为一个routers.js文件。

然后，我们需要配置巴贝尔寄存器，所以我们需要添加两个文件。项目和路径下的babelrc和index.js。内容如下：

/.babelrc

{ '预设' : ['es2015']，}。巴别塔是巴别塔6.0的必备文件。

/.index.js

require('倍倍尔寄存器')require('。/src/server’)上面的句子完成了BEBEBEL注册，它将根据require或import模式对所有模块进行爬网，并将它们翻译成ES5。

自动生成的代码中有一个www文件，是Express应用的入口文件。我们将其放在服务器路径下，并将其重命名为index.js，这样上面配置的Babel register就可以正确找到它。

你为什么把它的名字改成index.js？这是因为require('。/src/server)将查找。/src/server/index.js默认情况下。如果想用别的名字，记得把Babel寄存器的配置文件改成require()。/src/您的条目文件。

好了，现在后端业务暂时告一段落，再来看看前端。

2.使用Vue脚手架快速搭建和应用

同样，建议使用Vue自己的模板工具在1s内生成基本代码。

虽然这个工具生成的代码后端是基于Express的，但是后端部分的代码结构对于后续的开发来说太简单了。所以建议先把Vue生成的代码放在别的地方，然后根据需要移动到Express生成的代码文件夹中。

首先安装模板工具

npm install -g vue-cli然后执行该命令来生成代码。一些参数需要在命令执行期间输入

vue init webpack my-project生成的代码结构如下。 build dev-server.js #开发服务器脚本 karma.conf.js #单元测试配置 webpack.base.conf.js #共享基础webpack配置 webpack.dev.conf.js #开发webpack配置 webpack.prod.conf.js #生产webpack配置 . src main.js # app入口文件 App.vue #主app组件 组件# ui组件 . 资产#模块资产(由webpack处理) .静态#纯静态资产(直接copied)区#建文件准备deploy测试 单元#单元测试 索引. js #单元测试入口文件 . . 。index.html # main html文件 包. json # buildscripts和依赖项。我们发现这里也有一个. babelrc，内容和之前自己创作的基本一致，所以可以忽略。此外，它还提供。eslintrc.js配合eslint检查代码是否符合规范。这里的内容很简单。想偷懒就直接拿。如果觉得定制的规则不符合自己的习惯，可以单独配置。

然后，我们看到在构建路径下有三个与webpack相关的配置文件。因为要构建开发环境，可以选择webpack.base.conf.js和webpack.dev.conf.js，建议将内容合并到一个webpack.conf.js文件中，放在项目的根目录下。

之后，基本上，src目录被移动到/src/client/，这是以前用Express创建的。我习惯于把所有的js入口文件都改成index.js，所以在这里，src/client/main.js也可以改名为src/client/index.js。

首先忽略其他文件。

至此，代码的前端部分基本整理完毕。

3.配置网络包

我们计划让Webpack将前端文件打包成一个build.js文件，然后将其放入/src/server/public/JavaScript中，供jade模板使用。因此，设置webpack的路径部分(保持其余部分不变):

{ .entry : path . join(_ dirname，' src/client/index.js ')，output : { path : path . join(_ dirname，' src/server/Public/JavaScript/')，Public path : '/JavaScript/'，filename :' build.js'}，}至于如何启动Webpack，可以选择单独在shell窗口中运行，也可以以Express中间件的形式提供代理。在后一种方式中，webpack不会在磁盘上生成打包的代码，而是将其保存在内存中。我们选择后一种方式是因为它更方便。

在开发环境中，网络包只能以快速中间件的形式部署

所以需要修改/src /src/server/index.js关键是要加上这些字

从“webpack”导入webpack从“webpack-dev-中间件”导入web pack从“web pack-hot-中间件”导入webpackHotMiddleware从“导入c onfig”././webpack.config'const编译器=web pack(config)app . use(webpackkdevmiddleware(编译器，{ public path : config . output . public path，Stats: { colors: true }，})app)。使用(Webpackhotmiddleware(编译器))让每次启动Express后，Webpack中间件都会拦截config.output.publicPath地址的请求并返回正确的结果。同时，如果WebPack监控的文件发生变化，会立即通知前端进行相应的更改。

4.配置节点

如前所述，计划用Nodemon启动服务器并监听代码更改。默认情况下，Nodemon将监听除。git和node_modules路径。因为我们已经有了一个Webpack来监听前端代码，所以我们必须进行相关的配置，让Nodemon只能监听某一段代码。

在项目的根路径下添加一个文件nodemon.json，内容为

{ 'verbose': true，' ignore ' :[' src/server/public/']，' events ' : { ' restart ' : ' osascript-e ' display notification ' App因：\n'$FILENAME'\ '而重新启动，标题为' nodemon \，' watch': ['src/server/']，' ENV ' : { ' NODE _ ENV ' 3: ' development ' } }

我们选择让Nodemon监听src/服务器/目录，忽略src/服务器/公共目录，因为前端webpack就是在这里生成打包文件的。注意我们使用的是Express中间件形式的Webpack，并没有真正在磁盘上生成文件，所以这个忽略规则可以省略。

不要忘记在文件扩展名中添加玉石类型，因为Express使用的是玉石模板。

5.配置package.json

首先，向脚本添加一个命令来启动整个应用程序

{.脚本' : {'dev' : '节点monindex.js'}，}这样，您只需要运行命令npm run dev来启动服务器并同时开发它。

完整的代码已经上传到Github，点击访问

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。