今天我们这一篇的主题就是 “快速搭建开发环境”。快速，有多快？答案：取决于你的网速。因为我们真的有这么一个脚手架：qvk。
什么是 qvk
qvk 是一个集成现代前端工程化最佳实践的通用 Web 开发环境，可用于开发传统 C/S 架构的 Web 应用、SPA（单页应用）、H5（App 内嵌页）等。
qvk 脱胎于多个 360 前端项目，集成了开源社区中涌现的优秀框架、工具和最佳实践。qvk 初始版集成以下 Web 框架和打包工具。
- ThinkJS：基于 MVC 模式的简单易用、功能强大的 Node.js 开发框架。
- Vue.js：渐进式 JavaScript 框架，前端组件式开发主流选择。
- Webpack：目前使用最广泛的前端资源模块打包工具。
什么，这里有些新面孔？没关系，不久你就会发现它们都很友好、简单。
搭建开发环境
qvk 的 Github 仓库地址是：github.com/qqvk/qvk。
打开这个页面，点击 “Clone or download” 按钮：
点击 “复制到剪贴板” 图标。打开常用的终端，进入或新建某个项目目录，比如 myProject，克隆 qvk 的代码：
注意，我们给新项目起了一个名字，叫 h5project。进入这个目录：
LICENSE 和 README.md，当然一个是协议，一个是项目介绍。而 client、server 两个目录，则分别用于保存前端和服务端代码（及依赖）。
为方便开发，我们建议使用 VSCode，并通过把code命令添加到路径，从命令行启动 VSCode（参见这个链接：code.visualstudio.com/docs/setup/…）：
这样，在项目路径下运行code .就可以启动 VSCode：
VSCode 启动后，按快捷键 Ctrl+` 切换到终端，再按 Cmd + 拆分终端（或者鼠标点击图标
进行拆分），结果如下：
接下来，分别安装前端和服务端的依赖。左、右终端窗口分别进入 server 和 client 目录，并运行npm install安装依赖：
根据每个人的网络状况不同，安装依赖大约耗时 10～30 秒不等。事实上，这是我们搭建环境中最慢的一步。至于如何加速这个过程，大家可以自行上网搜索相关文章。
安装完依赖，还需要构建一下前端代码，以便生成服务端所需的模板文件和静态资源。简单，只要在 client 目录下运行npm run build即可：
这一步执行完之后，会在 server 目录（没错，是在 server 目录，本文后面会解释）下生成两个目录。
- view：保存构建生成的模板，供服务端使用
- www：保存构建生成的模板引用的静态资源（js/css 等）
好了，现在我们的开发环境已经具备启动条件了！稍等，在启动之前，还需要说明一下。
如前所述，qvk 默认将开发环境分成了前端（client）和服务端（server），两端分别启动 Web 服务器，端口默认为：
- 前端：9090
- 服务端：8900
启动服务后，前端会把所有浏览器请求代理到服务端，即浏览器会自动打开：http://localhost:9090，而所有请求实际上由服务端 8900 端口响应。之所以这样配置，是为了实现前、后端开发的实时编译和刷新（为什么选这两个端口？没有原因，就是随便选的而已）。
说明结束。接下来就启动服务吧——由于前端服务要代理到后端服务，所以启动顺序是……？没错：先启动后端，后启动前端。
怎么启动？npm start。
先启动服务端：
再启动前端：
启动前端，会触发 Webpack 的初始构建过程，构建完成后，会自动在浏览器中打开 http://localhost:9090/。
恭喜，看到这个网页，就说明你的开发环境搭建完成了！你说快不快？
上手开发
光搭建好环境还不成，关键是要知道怎么使用这个环境开发自己的项目。
ThinkJS 是一个优秀的 Node.js MVC 开发框架，上手非常容易。这里，server 目录其实就是 ThinkJS 的工作目录。如果忽略保存依赖的 node_modules 和用于保存运行时配置的 runtime，开发中实际用到的只有 src、view 和 www 目录，如下图所示：
（考虑到 view 和 www 是前端构建生成的，所以这里真正用到的就只有 src 目录了，哈哈哈。是不是又简单了？）
用 ThinkJS 开发一个页面，只要简单两步：
- 根据确定的路由编写控制器方法
- 在控制器方法中指定渲染页面的模板
我们就以现有的代码为例。src/controller 里保存所有控制器代码，其中 index.js 是默认控制器，而 index.js 中的indexAction是默认的响应处理函数（如果方法不带Action，则不能响应外部请求，可作为内部方法）。
src/controller/index.js
const Base = require("./base.js");
module.exports = class extends Base {
async indexAction() {
return this.display()
}
pixelAction() {
return this.display('pixel_demo')
}
};
所谓默认，意思就是 http://localhost:9090 / 这个请求，默认会由 index.js 的indexAction方法来处理。怎么处理的呢？这里倒是极其简单，只有一行代码：
return this.display()
this.display()方法会返回使用默认模板引擎渲染默认模板之后的 HTML，作为服务器的响应返回给浏览器。默认模板引擎是 Nunjucks（mozilla.github.io/nunjucks/），而默认的模板文件就是 view/index_index.html：
view/index_index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta >
<title>qvk: A Web integrated development environment.</title>
<link href="/static/css/index_index_79ed.css" rel="stylesheet"></head>
<body>
<div class="welcome">
<div reminder>
<h2>欢迎使用qvk创建开发环境</h2>
<p><a href="/index/pixel">H5必知必会之像素级还级设计稿DEMO</a></p>
</div>
</div>
<script type="text/javascript" src="/static/js/commons_6a84.js"></script><script type="text/javascript" src="/static/js/index_index_79ed.js"></script></body>
</html>
当然，这个 HTML 模板中可以使用模板引擎支持的各种语法，嵌入变量和语句，以及其他服务端逻辑（这里没有，哈哈，具体可以参考模板引擎的文档：mozilla.github.io/nunjucks/）。
服务端开发说完了，接下来看前端。前端代码在 client 目录中，同样开发中真正用到的只有 src 目录：
如图所示，src 目录下面有一个 Webpack 的入口文件：index_index.js，而在模板目录_templates_ssr 中，有一个同名但不同扩展名的 index_index.njk 文件（njk 就是 Nunjucks 的简写）。
Webpack 会根据这个命名规则，以 index_index.njk 为模板生成 ThinkJS 渲染所需的 server/view/index_index.html 模板，同时会将入口文件中指定的依赖打包后注入到该模板中。
我们看一下入口文件 index_index.js：
client/src/index_index.js
import './_static/css/index_index.scss'
哇，只有一行，使用import模块语法引入了一个 SCSS 文件。这个文件在通过相应的转换生成普通 CSS 后，会被注入 index_index.html 模板中：
<link href="/static/css/index_index_79ed.css" rel="stylesheet">
如果这个页面有交互逻辑呢？那就要在入口文件中引入相应的 JavaScript 文件（可以放在./_static/js / 目录下）。同样，Webpack 会在构建时把 JavaScript 打包注入到模板中。
写在最后
本文到此就结束了，真的结束了。此时，难免有读者会问，我们搭建的是 H5 开发环境吗？是的。你可以点击这个页面中的链接看一看：
你会发现，我们card组件中的所有 CSS 像素单位都被转换成了视口宽度单位：
如果读者不明白 “把像素单位转换成视口宽度单位” 是什么意思，请参考本系列第二篇文章“H5 必知必会之像素级还原设计稿”，当然还有这个项目源代码。
大家有什么想法，欢迎留言吧。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！