{"id":13623350,"url":"https://github.com/nicejade/vue-boilerplate-template","last_synced_at":"2025-04-05T02:09:46.460Z","repository":{"id":21997290,"uuid":"94609327","full_name":"nicejade/vue-boilerplate-template","owner":"nicejade","description":"🍎 Efficient development of web SPA using Vue.js(2.*) + Webpack + Element-ui + Pwa + Vuex + Vuex-router + Vue-i18n + Dayjs + Lodash.","archived":false,"fork":false,"pushed_at":"2022-12-07T11:54:29.000Z","size":5174,"stargazers_count":471,"open_issues_count":22,"forks_count":128,"subscribers_count":27,"default_branch":"master","last_synced_at":"2024-04-14T11:01:38.737Z","etag":null,"topics":["admin","element-ui","front-end","lodash","pwa","vue-boilerplate","vue-i18n","vue-router","vuejs2","vuex","vuex3"],"latest_commit_sha":null,"homepage":"https://nicelinks.site","language":"JavaScript","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":"2017-06-17T07:57:58.000Z","updated_at":"2024-04-06T11:20:58.000Z","dependencies_parsed_at":"2023-01-12T03:46:11.412Z","dependency_job_id":null,"html_url":"https://github.com/nicejade/vue-boilerplate-template","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fvue-boilerplate-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fvue-boilerplate-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fvue-boilerplate-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fvue-boilerplate-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicejade","download_url":"https://codeload.github.com/nicejade/vue-boilerplate-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276189,"owners_count":20912288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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"}},"keywords":["admin","element-ui","front-end","lodash","pwa","vue-boilerplate","vue-i18n","vue-router","vuejs2","vuex","vuex3"],"created_at":"2024-08-01T21:01:30.767Z","updated_at":"2025-04-05T02:09:46.436Z","avatar_url":"https://github.com/nicejade.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://vuejs.org\" 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\u003eVue Boilerplate Template\u003c/strong\u003e\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n   \u003ca href=\"https://twitter.com/intent/tweet?text=Cool:\u0026url=https://github.com/nicejade/vue-boilerplate-template\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/url/https://github.com/nicejade/vue-boilerplate-template/blob/master/assets/images/logo.svg?style=for-the-badge\" alt=\"twitter\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003e\n    🍒(vue webpack vuex vue-router vue-i18n element-ui) out of the box\n  \u003c/strong\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n🍎 Nice Boilerplate Template for creating medium plus Vue.js(2.*) project\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://circleci.com/gh/nicejade/vue-boilerplate-template\"\u003e\n    \u003cimg src=\"https://circleci.com/gh/nicejade/vue-boilerplate-template/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://hacpai.com/article/1527681795228\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/chat-hacpai-brightgreen.svg\" alt=\"Chat\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://nice.lovejade.cn/zh/article/vue-webpack-boilerplate-template.html\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/chat-on%20%20spectrum-green.svg\" alt=\"Chat\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://about.me/nicejade\"\u003e\u003cimg src=\"https://img.shields.io/badge/Author-nicejade-%23a696c8.svg\" alt=\"Author nicejade\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003e\n    \u003ca rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://jeffjade.com/2018/05/20/140-vue-webpack-boilerplate-template/\"\u003e中文 WIKI\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/div\u003e\n\n## Goal and Philosophy\n\nFor how to build medium-sized (+) **VUE** projects, provide some reference based on past experience. **The latest Vue Boilerplate based on `vue-cli3` has been open source: [awesome-vue-cli3-example](https://github.com/nicejade/awesome-vue-cli3-example), If you pay attention to it, I believe it is very worthwhile** 🎉.\n\n## Prerequisites\n\n[Node.js](https://nodejs.org/en/) (\u003e=4.x, 8.x preferred), Npm version 4+(Yarn preferred), and [Git](https://git-scm.com/).\n\n## Demo\n\n[Online Demo Page](https://blog.lovejade.cn/vue-boilerplate-template/)\n\n## Advantage\n- Based on `vue-cli` build， Make more optimization for how to to facilitate the use of vue .\n- Has already included a lot of commonly used libraries， such as `vue-i18n`, `axios`, `lodash` ...\n- With some experience articles about `Vue`, Such as: [如何写一手漂亮的 Vue](https://jeffjade.com/2017/03/11/120-how-to-write-vue-better/). And is still updated.\n- Make more optimization about how to build the application using `WebPack` .\n  - [Webpack 打包优化之体积篇](http://jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/)\n  - [Webpack 打包优化之速度篇](http://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/)\n  - [Optimize your libraries with webpack](https://github.com/GoogleChromeLabs/webpack-libs-optimizations)\n  - [Webpack Nice Tutorial](https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/webpack-tutorial.md)\n\n## Usage\n\n```\ngit clone https://github.com/nicejade/vue-boilerplate-template (your-project-name)\ncd your-project-name\nnpm install (npm i / yarn)\nnpm start / npm run dev / yarn run dev\n```\n\nGo to http://localhost:8080/. If port 8080 is already in use on your machine, **the program will specify the available port (incremental) for you, for example, `8081` / `8082` ...**. Of course, you can temporarily replace the port using the following command:\n\n```\nPORT=8888 npm run dev\n```\n\n\u003e**Additional supplement**： You need to make sure that PORT is a command that can be executed on your machine .\n\n\u003cdetails\u003e\n\u003csummary\u003eMore Command\u003c/summary\u003e\n\n```\nnpm run build\n```\nEquivalent execution `node build.js`, initiate a build project .\n\n```\nnpm run build:dll\n```\nEquivalent execution `webpack --config build/webpack.dll.conf.js`, For more information see [webpack.DllPlugin](https://webpack.js.org/plugins/dll-plugin/).\n\n```\nnpm run jarvis / yarn run jarvis\n```\n\nrun [webpack-jarvis](https://github.com/zouhir/jarvis)(A very intelligent browser based Webpack dashboard)，In your browser open: localhost:1337 , you have it.\n\n![JARVIS for Webpack](https://raw.githubusercontent.com/nicejade/vue-boilerplate-template/master/static/img/JARVIS%20for%20Webpack.png)\n\n```bash\nnpm run pretest\n```\nUsing nodejs to build the local server: http://localhost:3000/ , do a simple pre test for the code after the package.\n\n```\nnpm run analyz\n```\n\nWebpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. It will automatically open this address：http://localhost:8888/ .\n\n![webpack-bundle-analyzer](https://cloud.githubusercontent.com/assets/302213/20628702/93f72404-b338-11e6-92d4-9a365550a701.gif)\n\n\u003c/details\u003e\n\n## Dependent plugin list\n\n- vue2\n- vue-router\n- vuex\n- vue-i18n\n- axios\n- bootstrap\n- element-ui\n- lodash\n- ~~moment~~ dayjs\n- js-cookie\n- ... ...\n\n## Operation request\nYour backend can return the following format data， it's better .\n```\n{\n  success: true,\n  message: 'err message content',\n  value: [\n    // Useful data\n  ]\n}\n```\n\nAt the front end, you can handle the request like this：\n```\nlet params = {\n  // Interface required parameters\n}\nthis.isLoading = true\nthis.$apis.moduleName.getProfile(params).then(result =\u003e {\n  // Handle the correct data you received\n}).catch(error =\u003e {\n  this.$message.error(`Error: ${error}`)\n}).fin(() =\u003e {\n  this.isLoading = false\n})\n```\n\nSo considerate, Template has been helped to handle the request uniformly, so you can be so easy to use, of course, you can change your own as needed in the `helper/ajax.js` file .\n\n## Links\n\n- [Example](https://github.com/nicejade/nicelinks-vue-client)\n- [**NICE LINKS**](https://nicelinks.site?from=github)\n- [About Me](https://about.me/nicejade/)\n- [First Blog](https://jeffjade.com)\n- [Second Blog](https://blog.lovejade.cn/)\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/jeffjade2)\n- [Facebook](https://www.facebook.com/yang.gang.jade)\n\n## Writing\n\nSee the example in the boilerplate template. Or An [example](https://github.com/nicejade/nicelinks-vue-client) that has been applied, Online address: https://nicelinks.site.\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2017-present, [nicejade](https://about.me/nicejade/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicejade%2Fvue-boilerplate-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicejade%2Fvue-boilerplate-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicejade%2Fvue-boilerplate-template/lists"}