Awesome Vue-Cli3 Example
Goal and Philosophy
To facilitate developers to use
Vue-cli3 more conveniently, and to build Web applications more efficiently and reasonably.
Online Demo Page: https://vue-cli3.lovejade.cn
# 🎉 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
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
Markdownto 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
- Making the optimization based on the new features of
Webepack 4.*. Getting the details on
- 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.
- NICE LINKS
- About Me
- Latest Blog
- First Blog
- Second Blog
- Auxiliary blog
Copyright (c) 2018-present, nicejade.