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

问题规模

问题规模本身并没有非常精准的定义吧一般都是指运行时间t和输入参数个数n的关系用O(n)表示比如max([x])就是O(n)而冒泡排序则是O(n^2)

SSM+mybatis单元测试

初学SSMmybatis单元测试遇到的问题,dao注入后为nullDao层注入失败,查看后,发现注解都写的无误,经朋友的指点,在测试类上加了一句“RunWith(SpringJUnit4ClassRunner.class) ContextConfiguration(locations{“classpat…

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

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

接口测试

集成: 接口,代码级,service层 unit-》service-》UI 接口测试和界面没有任何关系 A->B  数据流向 理论 我们学过,集成测试主要测接口,通过学习集成测试,我们发现是把单元测试通过后的方法直接需要对接的…

React-Router ---withRouter

import React from react import { withRouter } from react-router const Hello (props) > { return ( <div><button onClick{ () > props.history.push(/about) }>Hello</button></div> ) } const WithRouterHello withRouter(Hello);//也可…

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

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

自动计算请假工时 排除周六周日

/*** 请假工时计算* starttime 开始时间 "2019-03-28 16:02", endtime 结束时间 "2019-03-29 16:02"*/ function leaveTime(starttime, endtime) {var start new Date(starttime); //start Thu Mar 28 2019 16:02:00 GMT0800 (中国标准时间)var end new…

垃圾回收与内存管理

垃圾回收机制 Javascript采用 自动垃圾收集机制&#xff0c;执行环境会负责跟踪代码执行过程中使用的内存&#xff0c;而在C和C类的语言中&#xff0c;需要开发人员手工跟踪内存的使用情况。 该机制的实现原理&#xff1a;找出那些不再继续使用的变量&#xff0c;然后释放其占用…

spring官方网站

https://docs.spring.io/spring/docs/current/spring-framework-reference/overview.html#overview

vue从入门到精通之进阶篇(三)axios

基本使用 Axios.method(url,[,..data],options) .then(function(res){ }) .catch(function(err) { } ) 合并请求 this.$axios.all([请求1,请求2]) .then( this.$axios.spread(function(res1,res2){ }) ) 拦截器 单请求配置options: axios.post(url,data,options); 全局配…

使用CSS实现图片未加载完成时占位显示

通过css控制&#xff0c;可以实现加载网络图片时&#xff0c;未加载完成的时候显示本地一张占位图&#xff0c;加载完成后显示网络图片&#xff1b; 原理&#xff1a;通过在img标签的after伪元素上添加一张占位图&#xff0c;并且img都设置为position:relative;after设置positi…

数学符号历史

https://baike.baidu.com/item/%E6%95%B0%E5%AD%A6%E7%AC%A6%E5%8F%B7/685756?fraladdin

POJ2828 Buy Ticket

传送门 题目大意&#xff1a;给一段空序列&#xff0c;每次向序列中某一个位置插入一个数&#xff0c;插入的位置后面所有数相应后移。 这个题比较令人头疼的是后移操作&#xff0c;我们不可能大面积后移。那怎么办呢&#xff1f;后面的人对前面有影响&#xff0c;那我们能不能…

vue从入门到精通之进阶篇(四)模块化工具 webpack

模块化 webpack命令 npm init -y npm install webpack3.6.0 --save-dev --registry https://registry.npm.taobao.orgpackage.json文件 "scripts": { "test": "webpack ./main.js ./build.js" },命令行运行 npm run test ES6模块 导入和导出只…

微观经济学

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

树结构

https://baike.baidu.com/item/%E6%A0%91%E7%BB%93%E6%9E%84/3399688?fraladdin

C#事务提交

using (System.Transactions.TransactionScope transcope new System.Transactions.TransactionScope()) { //code something transcope.Complete(); }转载于:https://www.cnblogs.com/WuHZ/p/9797373.html

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…

ES6 数值的扩展

ES6 规范了二进制和八进制的表示方法&#xff0c;代码如下&#xff1a; console.log(0o2000 1024) //true 使用0o表示八进制 0是数字0 o是小写字母oconsole.log(0b10000000000 1024) //true 使用0b表示二进制 0是数字…