你要开始一个重要的 vue 项目吗? 为了确保您从一个坚实的基础开始, 您可以使用一个模板(也称为样板, 骨架, 启动器或脚手架), 而不是从 NPM init 或 vue init 开始.
许多经验丰富的开发人员都以开源模板的形式收集了关于构建高质量 Vue 应用程序的经验. 这些模板包括最佳配置和项目结构, 最佳第三方工具和其他开发最佳实践.
与为灵活性进行优化的 Vue CLI 3 不同, 模板是自定义的. 因此, 选择一个适合您的开发理念, 并且具有与您需要的开箱即用的特性大致相同的特性是很重要的.
选择 Vue 模板的一些考虑事项包括:
- webpack
- PWA
- Full-stack with authentication
- Good documentation
- GraphQL
- Testing
等等.
现在有很多 great vue.js 模板, 但是在本文中, 我们将介绍 5 个包含新项目经常需要的关键特性的模板.
1. 最适合 Webpack
如果您需要一个可靠的 Webpack 设置, 那么只需查看 Vue CLI 2 中包含的 Webpack 模板即可. GitHub 上有近 7000 颗星星, Vue 团队成员负责开发和维护, 这个模板是您创建高度优化的 webpack 支持的 SPA 的最佳选择.
这个模板利用了 Webpack 及其生态系统的许多前沿特性, 包括热重载, CSS 提取, linting, 当然还有单文件组件加载. 它还包括为开发, 生产甚至测试优化的单独配置.
作为 Vue CLI 2 的一部分, 这是我们将提供的最不固执己见的模板之一, 因此不包含许多需要的额外功能, 比如服务器端呈现.
如果你发现 Webpack 模板有点过分, 你可以试试它的小兄弟, Webpack Simple 模板.
链接: https://github.com/vuejs-templates/webpack
注意: 即将离开 beta 版的 Vue CLI version 3 已经放弃了模板体系结构, 转而支持插件, 因此这个模板在技术上是不受欢迎的, 但是仍然可以从 Vue CLI 3 的遗留设置中使用. 在我们的文章 Vue CLI 3 中了解更多: 前端开发的游戏规则改变者.
2. 最适合的 PWA
你需要先进应用程序的高级用户体验吗? Vue Starter 是一个用于服务器呈现的 PWAs 的 SPA 模板. 它包括 Vuex 和 Vue 路由器, 配置为使用服务器端呈现 (SSR) 开箱即用.
这个项目在确保您部署的项目从一开始就具有出色的 UX 方面投入了大量的精力, 比如支持多种语言的国际化和 Lighthouse 评分 90+, 这要归功于 SSR 和 service worker 缓存.
此外, 使用 vue-meta 管理文档头部标签用于 SEO, 而 SSR 确保您的页面将被支持 JavaScript 内容的搜索引擎索引.
链接: https://github.com/devCrossNet/vue-starter
演示: https://vue-starter.herokuapp.com
如果你正在建造一个 PWA, 另一个不错的选择是 VuePack, 当然, 还有 Vue CLI 2 PWA templat
3. 最适合身份验证
如果您需要用户身份验证, 请查看 Vue Express Mongo 样本文件. 该项目提供了一个完整的堆栈 "MEVN"Web 应用程序的样板, 具有开箱即用的身份验证, 包括用户注册和谷歌, Facebook,Twitter 和 GitHub 的社交登录.
此模板遵循安全最佳实践, 使用 OAuth 2,Helmet(添加安全 HTTP 标头)和 Express Validator 进行输入清理. 它还为多个远程日志记录服务提供支持.
对于数据库, 提供了带有 Mongoose 的 MongoDB.repo 还包含 Docker 配置, 因此您可以轻松地启动一个实例.
链接: https://github.com/icebob/vue-express-mongo-boilerplate
演示: http://vemapp.moleculer.services/
提示: 如果您更喜欢使用 Laravel 作为经过身份验证的 Vue 应用程序的后端, 请尝试使用包含许多类似功能的 Laravel Vue Boilerplate.
4. 最适合文档
许多模板失败的原因是缺乏文档. Vue Enterprise Boilerplate 不是这样. 该项目由 Chris Fritz 创建和维护, 他编写了大部分 Vue 文档, 因此它组织良好并与 Vue 最佳实践保持一致.
这个模板的文档最棒的地方在于, 它不仅解释了包含了什么, 而且通常还解释了不包含什么, 以及为什么不包含. 例如, Chris 解释了为什么没有 TypeScript,Babel polyfill,Pug 等模板中常见的模板.
不要让这个应用程序的简洁默认页面欺骗你, 它也有很多功能. 我最喜欢的一些包括用于测试的模拟 API, 以及包含生成器, 允许您自动添加单元测试来设置组件, 视图和布局.
Vue Enterprise Boilerplate 还支持 Vue CLI 3, 因此可以使用其他 Vue CLI 3 插件轻松扩展项目.
链接: https://github.com/chrisvfritz/vue-enterprise-boilerplate
5. 最适合 GraphQL
GraphQL 现在风靡一时, 许多开发人员都希望在他们的新 Vue 项目中使用它. 虽然没有多少 Vue 模板, 但如果您需要 GraphQL, 请务必查看 Vuexpresso.
这个项目使用 GraphQL,Apollo 和 GraphiQL UI, 这是一个用于研究 GraphQL 的浏览器内 IDE. 此外, 您还可以获得一个配置良好的 Webpack 设置, Vuex 和 Vue 路由器. 您还可以获得 Storybook, 它允许交互式开发, 测试和共享 UI 组件.
Vuexpresso 唯一的缺点是它仍然相当新, 所以一定要有时间彻底测试你用它构建的任何应用程序.
链接: https://github.com/Ethaan/vuexpresso
支持 GraphQL 的另一个样板是 Friendly Vue Starter https://github.com/mcongy/friendly-vue-starter , 它还包括通过 Critical 提取的关键路径 CSS.
来源: http://www.css88.com/web/vue-js/11907.html