5个Vue.js项目的令人敬畏的模板

开发人员查看使用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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249267.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

测试多个输入条件的方法

转载于:https://www.cnblogs.com/www-qcdwx-com/p/10641281.html

Sublime text 2/3 中 Package Control 的安装与使用方法

Package Control 插件是一个方便 Sublime text 管理插件的插件,但因为 Sublime Text 3 更新了 Python 的函数,API不同了,导致基于 Python 开发的插件很多都不能工作,Package Control 原来的安装方法都失效了。 网上有2种使用 Git…

vue从入门到精通之进阶篇(一)vue-router基础

路由原理 传统开发方式 url改变后 立刻发起请求,响应整个页面,渲染整个页面SPA 锚点值改变后 不会发起请求,发起ajax请求,局部改变页面数据 页面不跳转 用户体验更好 SPA single page application(单页应用程序)前端路由 锚点值监视ajax获取动态数据…

微观经济学

chapter1 导论 学经济学有啥用?找工作有用吗?没有用,但是当你失业的时候你就知道为什么了。为什么会有经济学?资源的稀缺性导致的问题! 1.1.稀缺性 既定的资源无法满足人们的欲望。稀缺性存在于任何地方,产…

vue从入门到精通之进阶篇(五)脚手架vue-cli

vue-cli2.x脚手架的使用 参考链接&#xff1a;https://github.com/vuejs/vue-cli/tree/v2#vue-cli-- 安装&#xff1a; npm install -g vue-cli用法&#xff1a; $ vue init < template-name > < project-name >例&#xff1a; $ vue init webpack my-projec…

Unity 新手入门 如何理解协程 IEnumerator yield

Unity 新手入门 如何理解协程 IEnumerator 本文包含两个部分&#xff0c;前半部分是通俗解释一下Unity中的协程&#xff0c;后半部分讲讲C#的IEnumerator迭代器 协程是什么&#xff0c;能干什么&#xff1f; 为了能通俗的解释&#xff0c;我们先用一个简单的例子来看看协程可以…

百万级数据库优化方案

一、百万级数据库优化方案 1.对查询进行优化&#xff0c;要尽量避免全表扫描&#xff0c;首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where 子句中对字段进行 null 值判断&#xff0c;否则将导致引擎放弃使用索引而进行全表扫描&#xff0c;如&#…

EM算法 小结

猴子吃果冻 博客园首页新随笔联系管理订阅随笔- 35 文章- 0 评论- 3 4-EM算法原理及利用EM求解GMM参数过程 1.极大似然估计 原理&#xff1a;假设在一个罐子中放着许多白球和黑球&#xff0c;并假定已经知道两种球的数目之比为1:3但是不知道那种颜色的球多。如果用放回抽样方…

SPSS-回归分析

回归分析&#xff08;一元线性回归分析、多元线性回归分析、非线性回归分析、曲线估计、时间序列的曲线估计、含虚拟自变量的回归分析以及逻辑回归分析&#xff09; 回归分析中&#xff0c;一般首先绘制自变量和因变量间的散点图&#xff0c;然后通过数据在散点图中的分布特点选…

HTML5概要与新增标签

一、HTML5概要 1.1、为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要&#xff0c;特别是移动互联网。为了增强浏览器功能Flash被广泛使用&#xff0c;但安全与稳定堪忧&#xff0c;不适合在移动端使用&#xff08;耗电、触摸、不开放&#xff09;。 HTML5增强了浏览器的…

Tomcat启动失败错误解决Could not publish server configuration for Tomcat v8.0 Server at localhost....

这个问题本质是我们有多个重名项目&#xff0c;为什么我们会有多个重名项目&#xff0c;其实一般都是我们删除以前的项目&#xff0c;然后再把它重新导进eclipse时以前的项目删除不彻底造成的&#xff0c;以前的项目在"Servers"里面的"server.xml"文件下的…

Mock.js 和Node.js详细讲解

​​​​原文地址&#xff1a;http://www.manongjc.com/article/10503.html 《一统江湖的大前端》系列是自己的前端学习笔记&#xff0c;旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库&#xff0c;不定期更新。如果你对前端的理解还是写写页面绑绑事件&am…

架构图

负载均衡 分布式 转载于:https://www.cnblogs.com/jiqing9006/p/10672280.html

文本聊天室(TCP-中)

开始我们今天的代码实现&#xff0c;我们接着上一回&#xff0c;上回实现了服务器的代码这次实现客户端的UI(界面)层, 我们界面层采用javafx来进行绘制,首先有个登录服务器的界面然后切换到聊天界面运行结果如下.源代码如下: 1 package jffx.blogs.net;2 3 import javafx.appli…

爱好-摩托车:铃木

ylbtech-爱好-摩托车&#xff1a;铃木1.返回顶部 2.返回顶部3.返回顶部4.返回顶部5.返回顶部 1、http://www.suzuki-china.com/motor/2、6.返回顶部作者&#xff1a;ylbtech出处&#xff1a;http://ylbtech.cnblogs.com/本文版权归作者和博客园共有&#xff0c;欢迎转载&#x…

vue面试题,知识点汇总(有答案)

一. Vue核心小知识点 1、vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法&#xff0c;在新旧nodes对比时辨识VNodes。如果不使用key&#xff0c;Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key&#xff0c;它会基于…

EF中Take和Skip的区别

以例子来说明&#xff1a; 数据库中Orders表如下&#xff1a; 代码部分&#xff1a; 运行结果&#xff1a; 可以看出&#xff1a;Take()方法的作用是从查询结果中提取前n个结果&#xff1b;而Skip()方法则是跳过前n个结果&#xff0c;返回剩余的结果。转载于:https://www.cnblo…

详解Vuex常见问题、深入理解Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 状态&#xff1f;我把它理解为在data中的属性需要共享给其他vue组件使用的部分&#xff0c;就叫做状态。简单的…

Mac OS Git 安装

一、Git是一个分布式的代码版本管理工具。类似的常用工具还有SVN,CVS。最大的特点也是优点在于提供分布式的代码管理 1、分支代码只有一份&#xff01; 使用过svn的童鞋想必都知道&#xff0c;当我们要开发一个新功能或者增加一个新版本或者修改一个复杂bug的时候&#xff0c…

JS对象与jQuery对象

JS对象大致可以分为三种&#xff0c;如下图&#xff1a; JS常用内置对象&#xff08;JS自身所持有的对象&#xff0c;不需要创建&#xff0c;直接可用&#xff09;&#xff1a; String&#xff1a;API跟java的字符串API大致相同 两种创建对象的方式&#xff1a;String s1 “…