{"id":19224948,"url":"https://github.com/atsistemas/vue-base","last_synced_at":"2026-03-17T02:42:49.734Z","repository":{"id":21912464,"uuid":"94414518","full_name":"atSistemas/vue-base","owner":"atSistemas","description":"atSistemas Vue/Vuex based developing platform standard","archived":false,"fork":false,"pushed_at":"2018-07-25T11:10:09.000Z","size":741,"stargazers_count":5,"open_issues_count":0,"forks_count":4,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-04-13T23:55:20.416Z","etag":null,"topics":["babel","jest","postcss","standard-js","vue","vuex","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atSistemas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-15T07:52:43.000Z","updated_at":"2023-02-02T18:10:21.000Z","dependencies_parsed_at":"2022-07-27T02:47:31.996Z","dependency_job_id":null,"html_url":"https://github.com/atSistemas/vue-base","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Fvue-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Fvue-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Fvue-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Fvue-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atSistemas","download_url":"https://codeload.github.com/atSistemas/vue-base/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249980067,"owners_count":21355349,"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":["babel","jest","postcss","standard-js","vue","vuex","webpack"],"created_at":"2024-11-09T15:13:29.260Z","updated_at":"2026-03-17T02:42:49.693Z","avatar_url":"https://github.com/atSistemas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Vue-Base logo](./src/app/assets/images/vue-base-logo.png)\n\n# Vue-Base\n\n![Npm-Version](https://img.shields.io/badge/npm-6.2.0-blue.svg)\n![License](https://img.shields.io/badge/license-MIT-blue.svg)\n\n**A starter kit for VueJs Applications**\n\nThis repository is a modular abstraction to build a [VueJS](https://vuejs.org/) web application based on [Redux](https://vuex.vuejs.org/en/intro.html) paradigm using [Vuex](https://vuex.vuejs.org/en/intro.html).\nYou can use it to quickly scaffold your Vue web application projects and development environments.\n\nThis seed should clarify how to wire up all the modules of your application, even when we understand that in some cases\nthere must be some changes needed by the structure to fit your needs correctly\n\n## Overview\n\n**Vue-Base** makes use of the latest tools to improve your workflow, and enables you to create future ready applications:\n\n- [Vuex](https://vuex.vuejs.org/en/intro.html) based architecture\n- [Webpack 3](https://webpack.github.io/) build configuration depending on enviroment \n- Development \u0026 Production server using [express](https://github.com/expressjs/express) and [webpack-dev-server](https://webpack.github.io/)\n- Hot Reload/Live Reload support for Js \u0026 Css using  [Webpack HMR](https://webpack.github.io/docs/hot-module-replacement.html)\n- ES6 transpilation using [Babel](https://babeljs.io/)\n- [PostCSS](http://postcss.org/) processing with isomorphic support.\n- [CssModules](https://github.com/css-modules/css-modules) based\n- Code Linting using [Eslint](https://github.com/eslint/eslint)\n- [Standard](https://standardjs.com/) Javascript Standard Style\n- SSR - Server Side Rendering ...coming soon :)\n\n## Getting Started\n\nTo get you started, you need to meet the prerequisites, and then follow the installation instructions.\n\n### Prerequisites\n\nVue-Base makes use a number of NodeJS tools to initialize and test Vue-Base. You must have node.js 6.2.0 at least, and its package manager (npm) installed. You can get it from [nodejs.org](node).\n\n### Installing\n\nYou can clone our Git repository:\n\n`$ git clone https://github.com/atSistemas/vue-base.git`\n\nThis method requires Git to be installed on your computer. You can get it from\n[here](http://git-scm.com).\n\n### Wiring up your development environment\n\nSetting up **Vue-Base** is as easy as running:\n\n`$ yarn install`\n\nThis command will install all the required dependencies and start your development server, which takes care of all the changes you make to your code and runs all the awesome stuff that ends with your code automagically transpiled and running on your browser.\n\nPlease note that `yarn install` is only required on your first start, or in case of updated dependencies.\n\n\n### Initializing development server\n\n  Once all the dependencies are installed, you can run `$ yarn start` to initialize your development server using [webpack-dev-server](https://webpack.github.io/) express middleware.\n\n  The dev server uses  [HMR](https://webpack.github.io/docs/hot-module-replacement.html) (Hot module replacement) that injects updated modules into the bundle in runtime. It's like LiveReload\n\n\n## Architecture\n\nVue-base is based on [Redux](http://redux.js.org/) paradigm so you can find all the typical entities of an Redux project like [reducers](http://redux.js.org/docs/basics/Reducers.html) , [store](http://redux.js.org/docs/basics/Store.html), [actions](http://redux.js.org/docs/basics/Actions.html) , etc.\n\nThere are four main folders:\n\n* `server` contains Vue-Base development \u0026 production server based in express with Universal/Isomorphic support and custom middlewares like Gzip.\n\n```javascript\nserver\n  api/ //Api mocks\n  lib/ //Universal rendering files\n  middleware/ //enviroment middleware\n  statics/ //definition of  statics path\n  templates/ //universal templates\n    server  //Server  \n    routing  //Routing middleware  \n```\n\n* `webpack` contains Vue-Base Webpack configuration separated by enviroment that allows to use different plugins and loaders in each target enviroment.\n\n```javascript\nwebpack\n  webpack.common.config/ //Common config\n  webpack.dev.config/ //Development config\n  webpack.prod.config/ //Production config\n  webpack.test.config/ //Testing config\n  webpack.dll.config/ //Dll config\n```\n\n* `src/base/` contains Vue-Base platform bootstrapping code.\n\n```javascript\nbase\n  client/ //client bootstrap\n  conf/ //Configuration files and Yeoman templates\n  reducers/  //reducer index\n  routes/ //routes index\n  shared/ // shared base folder\n    regenerators/ //index regenerators\n    CreateReducer //Custom reducer creator\n    ENV //Env handler\n    Errors //Errors handler\n    FetchData //Isomorfic data handler\n    FileSystem //Filesystem manager\n    JsDomSetup //JsDom Configuration FileSystem\n    Regenerate // Regenerate indexes\n  store/ //Store configuration\n  types/ //Action request Types\n  wp-plugins/ //Custom webpack plugins\n  ...\n```\n\n* `src/app/` is the place where to put your application source code.\n\nVue-Base uses a \"featured based\" distribution, so all the necessary code for each page/features is located in its own folder inside containers folder as in `src/app/containers/myContainer`\n\nA container is a Vue component who contains other components, Redux entities, functions and store subscriptions. Each container is self-contained and represents a feature like \"clients\" or \"products\" and it contains all the necessary stuff.\n```javascript\napp/\n  containers/\n    myContainer/\n      actionTypes/ //action types definition\n      actions/ //action creators\n      components/ //container components\n      getters/  //container getters\n      mutations/ //containers mutations\n      reducers/ //container reducers\n      services/ //container services\n      myContainer.container.vue //container component\n  ...\n```\n\n## **Vuex**\nVuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official [devtools extension](https://github.com/vuejs/vue-devtools) to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.\n\n![Vuex](https://vuex.vuejs.org/en/images/vuex.png)\n\nVuex is inspired by Flux, Redux and The Elm Architecture. Unlike the other patterns, Vuex is also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates.\n\n### **Vuex Core concepts**\n* **State**\n* **Getters**\n* **Mutations**\n* **Actions**\n* **Modules**\n\n#### State\nVuex uses a single state tree - that is, this single object contains all your application level state and serves as the \"single source of truth\". This also means usually you will have only one store for each application. A single state tree makes it straightforward to locate a specific piece of state, and allows us to easily take snapshots of the current app state for debugging purposes.\n\n#### Getters\nYou can think of them as computed properties for stores. Like computed properties, a getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.\n\n#### Mutations\nThe only way to actually change state in a Vuex store is by committing a mutation. Vuex mutations are very similar to events: each mutation has a string type and a handler. The handler function is where we perform actual state modifications, and it will receive the state as the first argument:\n```javascript\nimport WeatherActionTypes from '../action-types'\n\nexport const mutations = {\n  [WeatherActionTypes.SET_STATION] (state, stations) {\n    state.stations = stations\n  }\n}\n```\nYou cannot directly call a mutation handler. Think of it more like event registration: \"When a mutation with type increment is triggered, call this handler.\" To invoke a mutation handler, you need to call store.commit with its type:\n\n```javascript\nexport const getStations = ({ commit }) =\u003e (\n  services.getStations()\n    .then(stations =\u003e \n    commit(WeatherActionTypes.SET_STATION, stations))\n)\n```\n\n### Actions\nActions are similar to mutations, the differences being that:\n\n* Instead of mutating the state, actions commit mutations.\n* Actions can contain arbitrary asynchronous operations.\n\n```javascript\nimport WeatherActionTypes from '../action-types'\nimport { services } from '../services'\n\nexport const actions = {\n\n  getStations ({ commit }) {\n    services.getStations()\n      .then(stations =\u003e commit(\n          WeatherActionTypes.SET_STATION, \n          stations \u0026\u0026 stations.list))\n  }\n\n}\n```\n\n#### Action Types\nActionTypes it's a representation using constants of your possible actions:\n\n```javascript\nimport { createActionType } from 'base'\n\nexport default createActionType([\n  'SET_STATION'\n])\n``` \n\n### Modules\nModules describe how the state of your application changes in response to a new Action. Modules are similar to reducer concept.\n\n```javascript\nimport { getters } from '../getters'\nimport { actions } from '../actions'\nimport { mutations } from '../mutations'\n\nconst state = {\n  stations: [],\n  forecasts: [],\n}\n\nexport default {\n  state,\n  getters,\n  actions,\n  mutations\n}\n\n```\n## **Vue Tips**\n### **Component communication**\n\n* **From parent to child component**\nWe use props to pass data from parent to child components. Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.\n\n```javascript\nVue.component('blog-post', {\n    props: ['title'],\n    ...\n})\n```\nOnce a prop is registered, you can pass data to it as a custom attribute, like this:\n```html\n\u003cblog-post title=\"Welcome to VueBase\"\u003e\u003c/blog-post\u003e\n```\n* **From child to parent componentt**\nWe use events to communicate with our direct parent component. We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. From a child method we can do something like:\n```javascript\n this.$emit('myEvent', params)\n```\nTo capture this event, we only have to register v-on directive when we define the child component in the html of our parent component like:\n```html\n\u003cmy-child-component v-on:my-event=\"doSomething\"\u003e\u003c/my-child-component\u003e\n```\n**doSomething** can be a method registered on our parent component which can do anything we want to do.\n\n\n\n### **Lifecycle**\nVue components have the following methods during his life:\n* **beforeCreate()**\n* **created()**\n* **beforeMount()**\n* **mounted()**\n* **beforeUpdate()**\n* **update()**\n* **beforeDestroy()**\n* **destroy()**\n\nThe next picture, shows a visual representation of this lifecycle methods:\n![vue lifecycle](https://vuejs.org/images/lifecycle.png)\n\n### Computed Properties\nIn-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain\n\navoid\n```html\n\u003cdiv id=\"example\"\u003e\n  {{ message.split('').reverse().join('') }}\n\u003c/div\u003e\n```\ndo\n```html\n\u003cdiv id=\"example\"\u003e\n  \u003cp\u003eOriginal message: \"{{ message }}\"\u003c/p\u003e\n  \u003cp\u003eComputed reversed message: \"{{ reversedMessage }}\"\u003c/p\u003e\n\u003c/div\u003e\n```\n```javascript\nvar vm = new Vue({\n  el: '#example',\n  data: {\n    message: 'Hello'\n  },\n  computed: {\n    // a computed getter\n    reversedMessage: function () {\n      // `this` points to the vm instance\n      return this.message.split('').reverse().join('')\n    }\n  }\n})\n```\n\n### **Watchers**\nWhile computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That’s why Vue provides a more generic way to react to data changes through the watch option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data.\n\n## **Distribution**\n\nYou can generate a complete distribution source ready for production enviroments.\n\n### Building your production application\n\n`$ yarn build:prod` will create a minified version for your application, ready for production.\n\n### Running production server\n\n`$ yarn start:prod` will run production enviroment of your application serving content from dist directory.\n\n\n## Testing your application\n\nYou can write your tests normally using Mocha and Chai for assertions.\n\n### Running your tests\n\n`$ yarn test` will perform your unit testing, or `yarn test:coverage` to run your tests and display a code coverage report.\n\n### Generating code coverage\n\nVue base uses [Nyc](https://github.com/bcoe/nyc) for code coverage and you can generate reports in console or icov/html format.\n\n`$ yarn test` will perform your code coverage, generating an html report located in coverage/ folder.\n\n## Contributing\n\nAnyone and everyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the [guidelines](CONTRIBUTING.md):\n\n* [Bug reports](CONTRIBUTING.md#bugs)\n* [Feature requests](CONTRIBUTING.md#features)\n* [Pull requests](CONTRIBUTING.md#pull-requests)\n\n## License\n\n**Vue-Base** is available under the [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatsistemas%2Fvue-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatsistemas%2Fvue-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatsistemas%2Fvue-base/lists"}