{"id":15193933,"url":"https://github.com/mrboomer/vuecharged-template","last_synced_at":"2025-10-27T20:32:01.029Z","repository":{"id":88283551,"uuid":"121730550","full_name":"mrboomer/vuecharged-template","owner":"mrboomer","description":"A highly opinionated Vue 2.0 template.","archived":false,"fork":false,"pushed_at":"2018-09-17T03:58:26.000Z","size":609,"stargazers_count":17,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-01T08:07:05.794Z","etag":null,"topics":["feature-first","offline-first","vue","vue-router","vuecharged-template","vuex","webpack3"],"latest_commit_sha":null,"homepage":"","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/mrboomer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-16T08:51:48.000Z","updated_at":"2021-03-24T05:22:20.000Z","dependencies_parsed_at":"2023-03-13T18:27:13.174Z","dependency_job_id":null,"html_url":"https://github.com/mrboomer/vuecharged-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/mrboomer%2Fvuecharged-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrboomer%2Fvuecharged-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrboomer%2Fvuecharged-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrboomer%2Fvuecharged-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrboomer","download_url":"https://codeload.github.com/mrboomer/vuecharged-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553289,"owners_count":19491400,"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":["feature-first","offline-first","vue","vue-router","vuecharged-template","vuex","webpack3"],"created_at":"2024-09-27T22:08:15.510Z","updated_at":"2025-10-27T20:32:00.569Z","avatar_url":"https://github.com/mrboomer.png","language":"JavaScript","funding_links":[],"categories":["Scaffold [🔝](#readme)","脚手架","Components \u0026 Libraries","Scaffold"],"sub_categories":["源代码编辑","Scaffold","Source Code Editing"],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mrboomer/vuecharged-template/master/src/views/img/VueChargedLogo.png\" alt=\"VueCharged Logo\" width=\"256\" /\u003e\n  \u003cbr /\u003e\n  VueCharged Template\n  \u003cbr /\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  An opinionated feature-first Vue 2.0 template with CLI scaffolding superpowers.\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- Build Status --\u003e\n  \u003ca href=\"https://travis-ci.org/mrboomer/vuecharged-template\"\u003e\n    \u003cimg src=\"https://img.shields.io/travis/mrboomer/vuecharged-template/master.svg\" alt=\"Build Status\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- Test Coverage --\u003e\n  \u003ca href=\"https://coveralls.io/github/mrboomer/vuecharged-template?branch=master\"\u003e\n    \u003cimg src=\"https://img.shields.io/coveralls/github/mrboomer/vuecharged-template/master.svg\" alt=\"Test Coverage\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- Dependency Status --\u003e\n  \u003ca href=\"https://david-dm.org/mrboomer/vuecharged-template\"\u003e\n    \u003cimg src=\"https://img.shields.io/david/mrboomer/vuecharged-template.svg\" alt=\"Dependency Status\" /\u003e\n  \u003c/a\u003e\n  \u003c!-- devDependency Status --\u003e\n  \u003ca href=\"https://david-dm.org/mrboomer/vuecharged-template?type=dev\"\u003e\n    \u003cimg src=\"https://img.shields.io/david/dev/mrboomer/vuecharged-template.svg\" alt=\"devDependency Status\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n## Key Features\n\n\u003cdl\u003e\n  \u003cdt\u003eFeatures First!\u003c/dt\u003e\n  \u003cdd\u003eEach component created is its own application that functions in isolation.\u003c/dd\u003e\n\n  \u003cdt\u003eScaffolding Superpowers\u003c/dt\u003e\n  \u003cdd\u003eCreate components, views, and routes right from the CLI.\u003c/dd\u003e\n\n  \u003cdt\u003eSimple Request Routing\u003c/dt\u003e\n  \u003cdd\u003eAdding pages to your application has never been easier.\u003c/dd\u003e\n\n  \u003cdt\u003eCentralized State Management\u003c/dt\u003e\n  \u003cdd\u003eKeeping your state predictable the first time, every time.\u003c/dd\u003e\n\n  \u003cdt\u003eInternationalization Ready\u003c/dt\u003e\n  \u003cdd\u003eYour app is ready to speak to anyone around the world.\u003c/dd\u003e\n\n  \u003cdt\u003eBeautiful Stylesheets\u003c/dt\u003e\n  \u003cdd\u003e...using Sassy CSS. All properly formatted CSS is valid Sass!\u003c/dd\u003e\n\n  \u003cdt\u003eLive Development\u003c/dt\u003e\n  \u003cdd\u003eLightning fast development changes after every save! No state loss either!\u003c/dd\u003e\n\n  \u003cdt\u003eOffline First\u003c/dt\u003e\n  \u003cdd\u003eUsers can use your app in the middle of nowhere. No internet required!\u003c/dd\u003e\n\n  \u003cdt\u003e\"Delightful\" Testing\u003c/dt\u003e\n  \u003cdd\u003eAs much as you don't want it, you need it. But it's all set up and ready for you.\u003c/dd\u003e\n\u003c/dl\u003e\n\n\n## VueCharged!\n\nGuarantee component reusability with this feature first Vue template. Every component created is independently owned and operated. All of its logic, state, styles, and tests live together under one roof as one big happy family. Don't fret! You won't be concerning yourself with this structure at all, as this can all be generated automatically with a few keystrokes. You just worry about building the best app ever.\n\n\n## Getting Started\n\nIt's as easy as 1, 2, 3.\n\n### 1. Clone It\n\n```sh\n$ git clone https://github.com/mrboomer/vuecharged-template.git my-vuecharged-app\n$ cd my-vuecharged-app\n```\n\n### 2. Install It\n\n```sh\n$ npm install\n```\n\n### 3. Develop It\n\n```sh\n$ npm start\n```\n\n## Deployment\n\nRun the following command to build your project.\n\n```sh\n$ npm run build\n```\n\nAll compiled files can be found in the `build` folder.\n\n\n## Documentation\n\n- [Introduction](#introduction)\n- [Structure](#structure)\n- [Generators](#generators)\n\n\n## Introduction\n\nThis template is highly opinionated to help with scaling large apps and follow industry best practices. As people develop more, they find better ways to do certain things. This Vue template hopes to encapsulate some popular accepted ideas and patterns from the many who have found better ways of doing things.\n\nThis project is primarily built around:\n\n- vue\n- vuex\n- vue-router\n\n\n## Structure\n\nAll your developmental concerns should live in the `src` folder. Here is a high-level structure highlighting the parts that are important to you:\n\n    .\n    ├── src\n    │   ├── components\n    │   │   ├── container            # \"how things work\" components\n    │   │   ├── presentational       # \"how things look\" components\n    │   ├── helpers                  # app specific helper files\n    │   ├── i18n                     # globally defined localization\n    │   ├── router\n    │   │   ├── routes.js            # add \"view\" routes here\n    │   │   └── ...\n    │   ├── static                   # static files/directories go here\n    │   │   ├── manifest.json        # web app manifest (pwa)\n    │   │   └── ...\n    │   ├── store                    # global state goes here\n    │   │   ├── index.js             # add store component modules here\n    │   │   └── ...\n    │   ├── views                    # \"view\" components\n    │   ├── index.html               # add any global libraries/scripts here\n    │   └── ...\n    └── ...\n\n### `./src/components`\n\nThe bulk of your work will reside here. The components folder is split up into two subfolders to help differentiate the type of component you write.\n\nThe `container` folder should contain components that are concerned with _how things work_.\n\nThe `presentational` folder should contain components that are concerned with _how things look_.\n\nThis is intentional to help separate the types of components that are created. For example, this should help with identifying components that have logic and state in them (containers), vs components that only render things like headers, footers, etc. (presentational).\n\nI would encourage you to [read this article](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) by Dan Abramov to help you better understand the distinction between container and presentational components.\n\nYou can automatically create container components from the command line by running `npm run generate container`, and create presentational components with `npm run generate presentational`.\n\n### `./src/helpers`\n\nKeep all of your app specific helper files here. This is where you add functions that help you solve specific tasks that are usually reoccurring.\n\n### `./src/i18n`\n\nInternationalization should always be supported in an app even if you're only using one language. You never want to find yourself reworking the whole app to support other languages. It’s always much easier if you do it right from the beginning. Luckily for you, this template has got you covered.\n\nWhile this folder lets you set global translations, you should only use it as a fallback option. Just like each component carries its own logic, it should also carry its own translations.\n\n### `./src/router/routes.js`\n\nIf you want a webpage that goes to `https://mywebsite.com/about`, this is where you create it. Basically, your \"view\" page routes should be added here.\n\nYou can automate this from the command line by running `npm run generate route`.\n\nRoutes can only be created from view components. See \"./src/view\" section below.\n\n### `./src/static`\n\nThis is where you add individual files or entire directories that you want to be copied over to the build directory. Sometimes you have external assets that just need to be included in your app, so this is where you add them.\n\nYou can then reference your static files in the index.html file like this: `\u003clink rel=\"stylesheet\" href=\"\u003c%= webpackConfig.output.publicPath %\u003eassets/css/reset.css\"\u003e`\n\n### `./src/static/manifest.json`\n\nFrom [MDN](https://developer.mozilla.org/en-US/docs/Web/Manifest):\n\n\u003e The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience.\n\n\u003e Web app manifests are part of a collection of web technologies called progressive web apps, which are web applications that can be installed to the homescreen of a device without needing the user to go through an app store, along with other capabilities such as  being available offline and receiving push notifications.\n\n### `./src/store`\n\nOur store is divided into modules per component. While you should keep all your logic encapsulated within each component, sometimes there exists a need for global state. This is where that logic should live.\n\n### `./src/store/index.js`\n\nYour component store modules need to be added to this file to be included into the store. This can be automatically done if you use the CLI generators to build your components.\n\n### `./src/views`\n\nSeparating your components between container and presentational types is not enough. While it helps you quickly figure out what type of component it is, it doesn't tell you if it's connected to a route.\n\nThink of these \"view\" components as webpage containers. They should contain a collection of container/presentational components, along with page layout elements to create its structure. This way you know which components belong to a certain page.\n\nLimit the focus of these components to layout, high level page elements, text, and styles. The bulk of the view component's concern should just be including container/presentational components created in the `components` folder.\n\nYou can automatically create a view component and its route from the command line by running `npm run generate view`.\n\n### `./src/index.html`\n\nThe entry point of our app. This is where you can add anything that needs to be globally included like tracking pixels, custom scripts, etc.\n\n## Generators\n\nFocus on writing code and automatically generate all your container/presentational components, views, and routes.\n\n```sh\n$ npm run generate\n```\n\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrboomer%2Fvuecharged-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrboomer%2Fvuecharged-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrboomer%2Fvuecharged-template/lists"}