nicejade / awesome-vue-cli3-example

🦅 Awesome example for rapid Vue.js development using vue-cli3 .

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.

Prerequisites

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

Online Demo

Online Demo Page: https://vue-cli3.lovejade.cn

Usage

# 🎉 clone the project
git clone https://github.com/nicejade/awesome-vue-cli3-example.git your-project-name
cd your-project-name

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

Advantage

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:

• Import & configure Vue-router to make the building of a single-page application (SPA) breeze;
• Import & configure Vuex to handle the management of status for application development;
• Import Element-ui to build a website quickly without paying too much attention to the UI;
• Import & encapsulating Axios to response the Http requests more elegant;
• Import Dayjs to handle date-time correlation in a slight cost;
• 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.
• 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.
• Making the optimization based on the new features of Webepack 4.*. Getting the details on vue.config.js;
• Opening & using Jest to test the component with the Demo;
• Integrate & configure the Prettier plugin to enable the team to code with better and consistent style. Getting the details on the 使用 ESLint ＆ Prettier美化Vue代码;
• Import cli-plugin-pwa plugin，and configure in `vue.config.js` ，you can get started easily with PWA using Vue;
• Import the prerender-spa-plugin plugin to pre-render static HTML, optimizing SEO and first-screen rendering in a single-page application .
• 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 打包优化之体积篇.
• 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.
• 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.
• 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

• NICE LINKS
• About Me
• Latest Blog
• First Blog
• Second Blog
• Auxiliary blog
• Weibo
• ZhiHu
• SegmentFault
• JianShu
• Twitter
• Facebook

License

MIT

Copyright (c) 2018-present, nicejade.