5 Awesome Vue.js Project Templates

Are you about to start a major Vue project? To ensure that you start from a solid foundation, you can use a template (also called a boilerplate, skeleton, starter, or scaffolding) , instead of starting from npm init or vue init.

Many experienced developers have gathered their experience on building high-quality Vue applications in the form of open source templates. These templates include best configurations and project structures, best third-party tools, and other development best practices.

Unlike Vue CLI 3 which is optimized for flexibility, templates are customizable. Therefore, it's important to choose one that fits your development philosophy and has roughly the same features you need out of the box.

Some considerations for choosing a Vue template include:

• Webpack

• PWA

• Full-stack with authentication

• ##Good documentation

• GraphQL

• Testing

etc.

There are many great Vue.js templates out there, but in this article, we will introduce 5 templates that contain key features that new projects often require.

1. Best for Webpack

If you need a reliable Webpack setup, then look no further than the Vue CLI The Webpack template included in 2 will do. With nearly 7000 stars on GitHub and developed and maintained by Vue team members, this template is your best choice for creating a highly optimized webpack-powered SPA.

This template takes advantage of many cutting-edge features of Webpack and its ecosystem, including hot reloading, CSS extraction, linting , and of course single-file component loading. It also includes individual configurations optimized for development, production and even testing.

As part of Vue CLI 2, this is one of the least opinionated templates we will provide and therefore does not contain many needed extras Features such as server-side rendering.

#If you find Webpack templates a bit overkill, you can try its little brother, Webpack Simple templates.

Link: https://github.com/vuejs-templates/webpack

Note: Vue CLI version 3, which is leaving beta, has abandoned the template architecture in favor of plugins, so this template is technically unpopular, but can still be used from Vue CLI 3 Used in legacy settings. Learn more in our article Vue CLI 3: A game changer for front-end development.

2. The most suitable PWA

You need advanced applications An advanced user experience? Vue Starter is a SPA template for server-rendered PWAs. It includes Vuex and Vue Router, configured to use server-side rendering (SSR) out of the box.

This project has put a lot of effort into ensuring that the projects you deploy have great UX from the start, such as support for internationalization in multiple languages ​​and a Lighthouse score of 90 , thanks to SSR and service worker caching.

Additionally, use vue-meta to manage document header tags for SEO, while SSR ensures that your pages will be indexed by search engines that support JavaScript content.

Link: https://github.com/devCrossNet/vue-starter

Demo: https://vue-starter.herokuapp.com

If you are building a PWA, another good option is VuePack, and of course, the Vue CLI 2 PWA template

3. Best for Authentication

If you need user authentication, check out the Vue Express Mongo sample files. This project provides a boilerplate of a full-stack "MEVN" web application with out-of-the-box authentication, including user registration and social login for Google, Facebook, Twitter and GitHub.

This template follows security best practices, using OAuth 2, Helmet (adding secure HTTP headers), and Express Validator for input sanitization. It also provides support for multiple remote logging services.

For the database, MongoDB with Mongoose is provided. The repo also contains Docker configuration so you can easily spin up an instance.

Link: https://github.com/icebob/vue-express-mongo-boilerplate

Demo: http://vemapp.moleculer.services/

Tip: If you prefer using Laravel as the backend for your authenticated Vue application, try using the Laravel Vue Boilerplate which contains many similar features.

4. Best for documents

The reason many templates fail is due to lack of documentation. Vue Enterprise BoilerplateNot so. The project is created and maintained by Chris Fritz, who wrote most of the Vue documentation, so it is well organized and aligned with Vue best practices.

The great thing about this template's documentation is that it not only explains what is included, but often also what is not included and why. For example, Chris explained why there are no common templates such as TypeScript, Babel polyfill, Pug, etc.

Don't let the simple default page of this app fool you, it has a lot of features too. Some of my favorites include a mocking API for testing, and include generators that allow you to automatically add unit tests for setting up components, views, and layouts.

Vue Enterprise Boilerplate also supports Vue CLI 3, so projects can be easily extended with other Vue CLI 3 plugins.

Link: https://github.com/chrisvfritz/vue-enterprise-boilerplate

5. Most suitable for GraphQL

GraphQL is all the rage right now and many developers are looking to use it in their new Vue projects. While there aren't many Vue templates, be sure to check out Vuexpresso if you need GraphQL.

This project uses GraphQL, Apollo and GraphiQL UI, a browser for studying GraphQL Within the IDE. Additionally, you get a well-configured Webpack setup, Vuex and Vue Router. You also get Storybook, which allows interactive development, testing and sharing of UI components.

The only downside to Vuexpresso is that it's still fairly new, so be sure to take the time to thoroughly test any application you build with it.

Link: https://github.com/Ethaan/vuexpresso

Another boilerplate that supports GraphQL is Friendly Vue Starter , it also includes critical path CSS extracted via Critical.

Related recommendations: vue tutorial

The above is the detailed content of 5 Awesome Vue.js Project Templates. For more information, please follow other related articles on the PHP Chinese website!