View developer resources Vue developer SPA, Webpack, authentication, GraphQL, documentation and testing.
Are you ready to start an important Vue project? In order to ensure a solid foundation from the start, you can use the template (ie a model, skeleton, or scaffold starter) instead of from npm init or start vue init.
Many experienced developers have mastered the wisdom to build high-quality Vue applications in the form of open source template. These templates include optimal configuration and project structure, the best third-party tools, and other development best practices.
Vue CLI with different 3, Vue CLI 3 is optimized for flexibility, so the template has a point of view. Therefore, it is important to choose your development in line with the concept and have substantially the same functionality out of the box.
Select a template Vue Some considerations include:
WebpackPWA has a good full stack authentication documents GraphQLTesting
There are a lot of great Vue.js template, however, in this article we will take a look at the template contains five key features of the new projects are usually needed.
1. The most suitable Webpack
If you need a reliable Webpack set, Webpack template that comes with Vue CLI 2 it is the best. There are nearly 7,000 stars on GitHub, Vue team members to develop and maintain, this template is the best choice to create a highly optimized Webpack driven.
The template utilizes many cutting-edge features Webpack their ecosystems, including thermal overload, CSS extraction, linting and single-file assemblies loaded. It also includes for the development, testing and optimization of production and even stand-alone configuration.
As part of Vue CLI 2, which is one of the best views of the non-template we are going to show, and therefore it does not include many additional features ideal for server-side rendering.
If you find Webpack template a little too much, you can try its little brother, Webpack Simple template.
Link: https: //github.com/vuejs-templates/webpack
Note: about to exit the beta version of Vue CLI version 3 template architecture has given up in favor of plug-ins, so the template will be deprecated in technology, but still available in the Vue CLI legacy settings 3. Learn more articles Vue CLI 3: game-changer for front-end development.
2. The most suitable PWA
Do you need gradual application of superior user experience? Vue Starter is presented PWA's SPA server template. It includes Vuex and Vue Router, the server is configured out of the box rendering (SSR).
The project has been considered to ensure your deployment project from the outset has amazing user experience, such as multi-language support and internationalization Lighthouse score of 90+, thanks to caching SSR and service workers.
In addition, the document header vue-meta tag management for SEO, and SSR ensure that your pages will be support JavaScript content indexed by the search engines.
Link: https: //github.com/devCrossNet/vue-starter
Demos: https: //vue-starter.herokuapp.com
If you are building PWA, another good choice is VuePack, of course, the Vue CLI 2 PWA template.
3. The most suitable authentication
If you require user authentication, check out Vue Express Mongo Boilerplate. The project provides a full-stack "MEVN" Web application model, with the authentication out of the box, including user registration and social login Google, Facebook, Twitter and GitHub's.
This template to follow security best practices, using OAuth 2, Helmet (add security HTTP header) and Express Validator input cleanup. It also provides support for multiple remote logging service.
For the database, provided Mongo and Mongoose. repo also includes Docker configuration, so you can easily start the instance.
Link: https: //github.com/icebob/vue-express-mongo-boilerplate
Demo: http: //vemapp.moleculer.services/
Tip: If you prefer to use Laravel as a back-end application Vue authenticated, try using Laravel Vue Boilerplate contains many similar functions.
4. The most suitable document
Many reasons for failure is the lack of documentation templates. Vue Enterprise Boilerplate is not the case. The project was created by Chris Fritz and maintenance, he wrote most of the Vue document, so it is well-organized and in line with best practices Vue.
The nice thing about this document template is that it not only explains the content contained in the content, and also explained the reasons are not included. For example, Chris explains why no TypeScript, Babel polyfill, Pug, etc., which is common in other templates.
Do not let this simple default page of the application deceive you, it also has a lot of features. Some of my favorite API includes simulation for testing, and includes generator, allows you to automatically add unit tests to set the component, view and layout.
Vue Enterprise Boilerplate also supports Vue CLI 3, so you can use other plug-Vue CLI 3 easy expansion project.
Link: https: //github.com/chrisvfritz/vue-enterprise-boilerplate
The most suitable GraphQL
GraphQL now all the rage, many developers want to use it in their new Vue project. Vue template, while small, but if you need GraphQL, be sure to check Vuexpresso.
The project uses GraphQL, Apollo and GraphiQL UI, which is a browser for browsing the internal IDE GraphQL. In addition, you can get a good Webpack configuration settings, Vuex and Vue router. You can also get Storybook, which allows the interactive development, testing and sharing UI components.
Vuexpresso only drawback is that it is still fairly new, so be sure you have time to thoroughly test any application it built.
Link: https: //github.com/Ethaan/vuexpresso
Another model is to support GraphQL Friendly Vue Starter, it also includes the critical path Critical extracted by CSS.