开发人员查看使用SPA,Webpack,身份验证,GraphQL,文档和测试的Vue开发人员的资源。

你准备开始一个重要的Vue项目吗?为了确保从坚实的基础开始,您可以使用模板(也就是样板,骨架,起动器或脚手架)而不是从npm init或开始vue init。

许多经验丰富的开发人员已经掌握了以开源模板的形式构建高质量Vue应用程序的智慧。这些模板包括最佳配置和项目结构,最佳第三方工具以及其他开发最佳实践。

与Vue CLI 3不同,Vue CLI 3针对灵活性进行了优化,因此模板具有观点。因此,重要的是选择符合您的开发理念并且具有开箱即用的大致相同的功能。

选择Vue模板的一些注意事项包括:

WebpackPWA具有身份验证的全栈好文档GraphQLTesting

有很多很棒的Vue.js模板,但是,在本文中,我们将看看包含新项目通常需要的关键功能的5个模板。

1.最适合Webpack

如果你需要一个可靠的Webpack设置,那么Vue CLI 2附带的Webpack模板就是最好的。在GitHub上有近7000颗星,Vue团队成员开发和维护,这个模板是创建高度优化的Webpack驱动的最好选择。

该模板利用了Webpack及其生态系统的许多前沿功能,包括热重载,CSS提取,linting以及单文件组件加载。它还包括针对开发,生产甚至测试而优化的独立配置。

作为Vue CLI 2的一部分,这是我们将要展示的最不具意见的模板之一,因此不包括服务器端渲染等许多理想的附加功能。

如果你发现Webpack模板有点过分,你可以试试它的小兄弟,Webpack Simple模板。

链接:https://github.com/vuejs-templates/webpack

注意:即将退出测试版的Vue CLI版本3已经放弃了模板体系结构,转而使用插件,因此该模板在技术上将被弃用,但仍可从Vue CLI 3的旧版设置中获取。了解更多信息文章Vue CLI 3:用于前端开发的游戏改变者。

2.最适合PWA

您是否需要渐进式应用的卓越用户体验?Vue Starter是服务器呈现的PWA的SPA模板。它包括Vuex和Vue Router,配置为开箱即用的服务器端渲染(SSR)。

该项目已经考虑到确保您的部署项目从一开始就具有惊人的用户体验,如多语言支持的国际化和灯塔得分为90+,这要归功于SSR和服务工作者的缓存。

此外,使用vue-meta的文档头标签管理用于SEO,而SSR确保您的页面将被支持JavaScript内容的搜索引擎编入索引。

链接:https://github.com/devCrossNet/vue-starter

演示:https://vue-starter.herokuapp.com

如果您正在构建PWA,另一个不错的选择是VuePack,当然,还有Vue CLI 2 PWA模板。

3.最适合身份验证

如果您需要用户身份验证,请查看Vue Express Mongo Boilerplate。该项目提供了一个全栈“MEVN”Web应用程序样板,具有开箱即用的身份验证,包括用户注册和Google,Facebook,Twitter和GitHub的社交登录。

此模板遵循安全最佳实践,使用OAuth 2,Helmet(添加安全HTTP标头)和Express Validator进行输入清理。它还为多个远程日志记录服务提供支持。

对于数据库,提供了Mongo和Mongoose。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,它还包括通过Critical提取的关键路径CSS。

5个Vue.js项目的令人敬畏的模板相关推荐

  1. 宝塔面板部署nuxt_MacOS下创建及部署vue.js项目(及Nuxt.js、PM2等相关流程)

    开发环境 权限准备 为避免后续流程出现权限不足的相关提示,首先在终端中输入以下代码检查当前系统是否已开启了对系统文件夹的保护: csrutil status 若结果为csrutil enabled,则 ...

  2. vue怎么运行html,怎样运行一个vue.js项目

    怎样运行一个vue.js项目? 下载并安装node,安装过程很简单,一路"下一步"就可以了,安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明 ...

  3. Vue.JS项目输入框中使用v-model导致number类型值自动转换成string问题的解决方案

    老文章了,目前用el-input v-model.number就能解决 很简单的操作,不知道当初在做什么,下文请直接忽略- Vue.JS项目中v-model导致输入框中number类型值自动转换成st ...

  4. Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案

    1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...

  5. 多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...

    在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...

  6. Vue.js项目去除url中的#/ - 解决篇

    文章目录 `Vue.js`项目`去除`url中的`#/` 一.解决办法 二.前后效果图,对比如下 Vue.js项目去除url中的#/ 使用vue路由,新建项目的url地址总是带有锚点#/,如下url: ...

  7. vue.js项目中,关于element-ui完整引入、按需引入的介绍

    element-ui引入方式,简单说来有两种:完整引入.按需引入 首先谈一下npm安装element-ui的方法: cmd到项目目录,然后执行cmd命令:npm i element-ui -S稍等片刻 ...

  8. 本地运行vue.js项目,如何更改调试的默认端口?

    运行本地vue.js项目,如何更改调试的默认端口? 之前学会了安装和使用node.js.npm.cnpm.webpack等相关的一些知识和技巧, 但是在搭建vue.js框架,进行开发的时候,会发现在进 ...

  9. 本地如何安装运行多个vue.js项目?

    如何安装多个vue.js项目? 在研究vue.js框架的时候,往往会从网站上搜一些别人已经写好的vue小项目,然后安装到本地,运行,查看浏览器的UI界面和功能效果. 本文着重讲解一下,如何安装已经下载 ...

最新文章

  1. python绘制条形图-Python数据分析条形图的各种绘制方式
  2. sql 中的导航函数 FIRST_VALUE, LAST_VALUE
  3. the next journal submission for mechanism should be at this journal
  4. @staticmethod用法
  5. 今日代码(200924)--缺失值处理
  6. Java EE 8安全性API:概述
  7. 阿里开发者们的第16个感悟:让阅读源码成为习惯
  8. 中高级开发面试必问的Redis面试题,看这篇就够了!
  9. python自动化办公-python自动化办公?学这些就够用了
  10. vivo x6plus支持html,vivo x6plus手机USB驱动
  11. ROS路由器做PCQ限速教程
  12. MySQL数据分析-(12)表操作补充:字段属性
  13. 宏碁服务器u盘装系统,宏基u盘装系统教程图解
  14. win8.1删除桌面的IE图标
  15. 电磁场与仿真软件(28)
  16. 图像恢复(加噪与去噪)
  17. 腾讯云服务器配置code-server
  18. Python 实战系列-微信或网页远程控制电脑
  19. MSIL 教程(一)
  20. 主流服务器的raid(磁盘阵列)配置

热门文章

  1. 安卓创建快捷方式相关问题 Intent Intent-filter
  2. candence 16.6 win8.1 x64 破解
  3. html如何设置文本斜体,CSS/HTML:使文本斜体的正确方法是什么?
  4. python亲和度_数据挖掘——亲和性分析
  5. IAR在写结构体时不提示_智能物流装车系统的结构优化与改进
  6. 鸿蒙系统下拉菜单,鸿蒙的js开发部模式17:鸿蒙的系统能力的应用模块
  7. python中str和int区别_python中eval与int的区别浅析
  8. dbscan算法python实现_挑子学习笔记:DBSCAN算法的python实现
  9. 3D人脸表情驱动——基于eos库
  10. day2---while else