![30acc083968de0e0dbc64a824a967230.png](https://i-blog.csdnimg.cn/blog_migrate/95687857617b3cdc4caf202ed27a56f6.jpeg)
今天我们这一篇的主题就是 “快速搭建开发环境”。快速,有多快?答案:取决于你的网速。因为我们真的有这么一个脚手架: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” 按钮:
![0118837b1e05e9cc5ade653b8063a7bc.png](https://i-blog.csdnimg.cn/blog_migrate/a6c3110a6437545af965818417ae092d.jpeg)
点击 “复制到剪贴板” 图标。打开常用的终端,进入或新建某个项目目录,比如 myProject,克隆 qvk 的代码:
![b65906e5f7b3ff7b8122a8df0a1c60e8.png](https://i-blog.csdnimg.cn/blog_migrate/869e31a2b41998411e2424e7ff5fd3c2.jpeg)
注意,我们给新项目起了一个名字,叫 h5project。进入这个目录:
![58c2ed14dac2944d901d58ead9aaa32f.png](https://i-blog.csdnimg.cn/blog_migrate/52b04b3eb0133dadfa4ea2b47440b92c.jpeg)
LICENSE 和 README.md,当然一个是协议,一个是项目介绍。而 client、server 两个目录,则分别用于保存前端和服务端代码(及依赖)。
为方便开发,我们建议使用 VSCode,并通过把code
命令添加到路径,从命令行启动 VSCode(参见这个链接:code.visualstudio.com/docs/setup/…):