{"id":12663,"url":"https://github.com/nicejade/awesome-vue-cli3-example","name":"awesome-vue-cli3-example","description":"🦅 Awesome example for  rapid Vue.js development using vue-cli3 .","projects_count":31,"last_synced_at":"2026-06-13T18:00:39.341Z","repository":{"id":37692361,"uuid":"134508926","full_name":"nicejade/awesome-vue-cli3-example","owner":"nicejade","description":"🦅 Awesome example for  rapid Vue.js development using vue-cli3 .","archived":false,"fork":false,"pushed_at":"2022-12-10T17:15:10.000Z","size":3559,"stargazers_count":168,"open_issues_count":23,"forks_count":39,"subscribers_count":3,"default_branch":"master","last_synced_at":"2026-03-26T20:34:35.133Z","etag":null,"topics":["eslint","lodash","pwa","vue-cli","vue-router","vuejs","vuex","webpack"],"latest_commit_sha":null,"homepage":"https://vue-cli3.lovejade.cn","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicejade.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-23T03:34:19.000Z","updated_at":"2025-03-22T23:25:46.000Z","dependencies_parsed_at":"2023-01-26T06:46:22.864Z","dependency_job_id":null,"html_url":"https://github.com/nicejade/awesome-vue-cli3-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nicejade/awesome-vue-cli3-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fawesome-vue-cli3-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fawesome-vue-cli3-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fawesome-vue-cli3-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fawesome-vue-cli3-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicejade","download_url":"https://codeload.github.com/nicejade/awesome-vue-cli3-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fawesome-vue-cli3-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32250599,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T04:23:17.126Z","status":"ssl_error","status_checked_at":"2026-04-25T04:21:53.360Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-01-12T20:23:41.118Z","updated_at":"2026-06-13T18:00:39.341Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Advantage","Recommended links","License"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://nicelinks.site/post/5b1a221c0526c920d6dfaada\" target=\"_blank\"\u003e\u003cimg width=\"100\"src=\"https://vuejs.org/images/logo.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\u003cstrong\u003eAwesome Vue-Cli3 Example \u003c/strong\u003e\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003e\n    🦅 (Vue Webpack Vuex Vue-router Element-ui/...) out of the box\n  \u003c/strong\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n 🦅 Awesome example for rapid Vue.js development using \u003ca href=\"https://github.com/vuejs/vue-cli\" target=\"_blank\"\u003evue-cli3\u003c/a\u003e.\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://circleci.com/gh/nicejade/awesome-vue-cli3-example\"\u003e\n    \u003cimg src=\"https://circleci.com/gh/nicejade/awesome-vue-cli3-example/tree/master.svg?style=svg\" alt=\"Build Status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://nodejs.org/en/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/node-%3E%3D%208.0.0-green.svg\" alt=\"node version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/nicejade/vue-boilerplate-template\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/nicejade/vue-boilerplate-template.svg\" alt=\"LICENSE\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://nicelinks.site/post/5c16083e819ae45de1453caa\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat\" alt=\"Prettier\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.jeffjade.com/2019/01/13/146-awesome-vue-cli3-example/??utm_source=awesome-vue-cli3-example\"\u003e\n   \u003cimg src=\"https://img.shields.io/badge/chat-on%20blog-brightgreen.svg\" alt=\"Chat On My Blog\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://aboutme.lovejade.cn/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Author-nicejade-%23a696c8.svg\" alt=\"Author nicejade\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n#### English | [中文](https://vue-cli3.lovejade.cn/??utm_source=awesome-vue-cli3-example)\n\n## Goal and Philosophy\n\nTo facilitate developers to use `Vue-cli3` more conveniently, and to build Web applications more efficiently and reasonably.\n\n## Prerequisites\n\n[Node.js](https://nodejs.org/en/) (\u003e= 8.*), Npm version 4+(Yarn preferred), and [Git](https://git-scm.com/).\n\n## Online Demo\n\nOnline Demo Page: https://vue-cli3.lovejade.cn\n\n## Usage\n\n```bash\n# 🎉 clone the project\ngit clone https://github.com/nicejade/awesome-vue-cli3-example.git your-project-name\ncd your-project-name\n\n# ➕ install dependencies \u0026 start dev\nyarn \u0026\u0026 yarn start\n```\n\n## Advantage\n\nThis boilerplate built on [Vue-Cli3](https://github.com/vuejs/vue-cli/) inheriting the previous [vue-boilerplate-template](https://github.com/nicejade/vue-boilerplate-template) project to explore the more efficient construction for high-quality web applications (recommended to read [开箱即用的 Vue Webpack 脚手架模版](https://www.jeffjade.com/2018/05/20/140-vue-webpack-boilerplate-template/)), Some optimization items are designed, the specific list as followed:\n\n- [x] Import \u0026 configure [Vue-router](https://router.vuejs.org/zh/) to make the building of a single-page application (SPA) breeze;\n- [x] Import \u0026 configure [Vuex](https://vuex.vuejs.org/zh/) to handle the management of status for application development;\n- [x] Import [Element-ui](http://element.eleme.io/#/zh-CN) to build a website quickly without paying too much attention to the UI;\n- [x] Import \u0026 encapsulating [Axios](https://github.com/axios/axios) to response the Http requests more elegant;\n- [x] Import [Dayjs](https://github.com/iamkun/dayjs) to handle date-time correlation in a slight cost;\n- [x] Import \u0026 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.\n- [x] Import [vue-meta](https://github.com/declandewet/vue-meta) plugin so that allows you to manage your app's meta information, much like [react-helmet](https://github.com/nfl/react-helmet) does for React. It'm awesome for `SEO`.\n- [x] Making the optimization based on the new features of `Webepack 4.*`. Getting the details on `vue.config.js`;\n- [x] Opening \u0026 using [Jest](https://jestjs.io/) to test the component with the Demo;\n- [x] Integrate \u0026 configure the [Prettier](https://prettier.io/) plugin to enable the team to code with better and consistent style. Getting the details on the [使用 ESLint ＆ Prettier美化Vue代码](https://www.jeffjade.com/2018/06/18/142-beautify-vue-by-eslint-and-prettier/);\n- [x] Import [cli-plugin-pwa](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa) plugin，and configure in \\`vue.config.js\\` ，you can get started easily with [PWA](https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/pwa-tutorial.md) using Vue;\n- [x] Import the [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) plugin to pre-render static HTML, optimizing SEO and first-screen rendering in a single-page application .\n- [x] Import the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) plugin so that to get the contents of the building packages with optimization while running `Yarn analyz`. Getting the details: [Webpack 打包优化之体积篇](https://jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/#%E5%AE%9A%E4%BD%8D-webpack-%E5%A4%A7%E7%9A%84%E5%8E%9F%E5%9B%A0).\n- [x] Import the [size-plugin](https://github.com/GoogleChromeLabs/size-plugin)  plugin to print the Gzip size of the Webpack asset and the changes since the last building while building the app.\n- [x] Import the [hard-source-webpack-plugin](https://github.com/mzgoddard/hard-source-webpack-plugin) plugin for webpack to provide an intermediate caching step for modules. It make the second build will be signficantly faster.\n- [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](https://github.com/nicejade/docker-vue-node-nginx-mongodb-redis).\n-  [ ] 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;\n\n\u003e**TIP**: [prerender-spa-plugin](https://github.com/chrisvfritz/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](https://github.com/GoogleChrome/puppeteer)，Chromium: ~170MB Mac, ~282MB Linux, ~280MB Win) to download, this is time consuming.\n\n## Recommended links\n\n- [**NICE LINKS**](https://nicelinks.site/?utm_source=awesome-vue-cli3-example)\n- [About Me](https://about.me/nicejade/?utm_source=awesome-vue-cli3-example)\n- [Latest Blog](https://quickapp.lovejade.cn/?utm_source=awesome-vue-cli3-example)\n- [First Blog](https://jeffjade.com/?utm_source=awesome-vue-cli3-example)\n- [Second Blog](https://nice.lovejade.cn/?utm_source=awesome-vue-cli3-example)\n- [Auxiliary blog](https://blog.lovejade.cn/?utm_source=awesome-vue-cli3-example)\n- [Weibo](http://weibo.com/jeffjade/)\n- [ZhiHu](https://www.zhihu.com/people/yang-qiong-pu/)\n- [SegmentFault](https://segmentfault.com/u/jeffjade)\n- [JianShu](http://www.jianshu.com/u/9aae3d8f4c3d)\n- [Twitter](https://twitter.com/nicejadeyang)\n- [Facebook](https://www.facebook.com/nice.jade.yang)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2018-present, [nicejade](https://aboutme.lovejade.cn/?utm_source=awesome-vue-cli3-example).","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/nicejade%2Fawesome-vue-cli3-example/projects"}