Awesome Vue Cli3 Example

🦅 Awesome example for rapid Vue.js development using vue-cli3 .
Alternatives To Awesome Vue Cli3 Example
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Awesome Vue68,115
3 days ago45mit
🎉 A curated list of awesome things related to Vue.js
Awesome Cheatsheets32,908
2 days ago85mitJavaScript
👩‍💻👨‍💻 Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
Awesome Lowcode11,262
21 hours ago4cc0-1.0
7 days ago75mitVue
🚀 A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more!
Awesome Vite9,368
a day ago15mitJavaScript
⚡️ A curated list of awesome things related to Vite.js
Awesome Learning Resources4,844
3 days ago4mit
🔥 Awesome list of resources on Web Development.
Awesome Nuxt4,721
5 days ago23
A curated list of awesome things related to Nuxt.js
Awesome Spring Boot4,015
5 months ago3
Spring Boot Resources
Awesome Typescript3,570
6 days ago65
A collection of awesome TypeScript resources for client-side and server-side development
Awesome Stacks2,957
2 months ago10cc0-1.0JavaScript
A curated list of tech stacks for building different applications & features
Alternatives To Awesome Vue Cli3 Example
Select To Compare

Alternative Project Comparisons

Awesome Vue-Cli3 Example

🦅 (Vue Webpack Vuex Vue-router Element-ui/...) out of the box
🦅 Awesome example for rapid Vue.js development using vue-cli3.

English | 中文

Goal and Philosophy

To facilitate developers to use Vue-cli3 more conveniently, and to build Web applications more efficiently and reasonably.


Node.js (>= 8.*), Npm version 4+(Yarn preferred), and Git.

Online Demo

Online Demo Page:


# 🎉 clone the project
git clone your-project-name
cd your-project-name

# ➕ install dependencies & start dev
yarn && yarn start


This boilerplate built on Vue-Cli3 inheriting the previous vue-boilerplate-template project to explore the more efficient construction for high-quality web applications (recommended to read 开箱即用的 Vue Webpack 脚手架模版), Some optimization items are designed, the specific list as followed:

  • [x] Import & configure Vue-router to make the building of a single-page application (SPA) breeze;
  • [x] Import & configure Vuex to handle the management of status for application development;
  • [x] Import Element-ui to build a website quickly without paying too much attention to the UI;
  • [x] Import & encapsulating Axios to response the Http requests more elegant;
  • [x] Import Dayjs to handle date-time correlation in a slight cost;
  • [x] Import & encapsulate the Marked plugin so that it can be used as a rich text editor,and it also can achieve Markdown to draw the page due to its parsing function.
  • [x] Import vue-meta plugin so that allows you to manage your app's meta information, much like react-helmet does for React. It'm awesome for SEO.
  • [x] Making the optimization based on the new features of Webepack 4.*. Getting the details on vue.config.js;
  • [x] Opening & using Jest to test the component with the Demo;
  • [x] Integrate & configure the Prettier plugin to enable the team to code with better and consistent style. Getting the details on the 使用 ESLint & Prettier美化Vue代码;
  • [x] Import cli-plugin-pwa plugin,and configure in `vue.config.js` ,you can get started easily with PWA using Vue;
  • [x] Import the prerender-spa-plugin plugin to pre-render static HTML, optimizing SEO and first-screen rendering in a single-page application .
  • [x] Import the webpack-bundle-analyzer plugin so that to get the contents of the building packages with optimization while running Yarn analyz. Getting the details: Webpack 打包优化之体积篇.
  • [x] Import the size-plugin plugin to print the Gzip size of the Webpack asset and the changes since the last building while building the app.
  • [x] Import the hard-source-webpack-plugin plugin for webpack to provide an intermediate caching step for modules. It make the second build will be signficantly faster.
  • [x] The combination of this scaffolding with Node.js (Koa2) Nginx MondoDb Redis is integrated into Docker to make Front-End Developer build easily the entire web application.Its currently open sourced in Docker Vue Node Nginx Mongodb Redis.
  • [ ] Optimizing the built-in Icon (Svg) component so that you can receive input in different ways and extract Svg into a separate file to avoid repeated loading of resources;

TIP: prerender-spa-plugin: Prerenders static HTML in a single-page application. But, it is not required. If you don't need it, you can remove it. Because it requires a lot of dependencies(puppeteer,Chromium: ~170MB Mac, ~282MB Linux, ~280MB Win) to download, this is time consuming.

Recommended links



Copyright (c) 2018-present, nicejade.

Popular Vue Projects
Popular Awesome List Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vue Router
Vue Cli