README
vue-cli-plugin-nsoft
NSoft General Vue CLI Plugin
:star: Features
- Vue CLI Plugin to generate a project structure for your project.
Table of contents
Getting started
If you haven't yet installed vue-cli 3, first follow the install instructions here: https://github.com/vuejs/vue-cli
Generate a project :
vue create my-app
To install nsoft plugin:
cd my-app
vue add @nsoft/nsoft
Commands
npm run serve
: Run app in development mode.npm run build
: Production ready build.npm run lint
: Lint the files using ESLint.npm run test:coverage
: Generate coverage with codecov.npm run test:e2e
: End-to-end tests with Nightwatch.npm run test:unit
Start the Jest Test Runner.npm run test:unitUpdate
:npm run test:unitWatch
: Watch changes and run unit test.
Source Structure
Folder structure:
api/
: abstraction for external communicationassets/
: module assets (processed by module bundler)components/
: all components that are not main view in flat structuredirectives/
: all directives in flat structurefilters/
: all filters in flat structuremixins/
: all mixins in flat structureplugins/
: for plugins inclusionutility/
: helper functions in flat structurepages/
: component pageslayouts/
: component template pagesstore/
: store stuffrouter/
: routing stuffmain.js
: app entry fileApp.vue
: main app component
Router structure:
index.js
: app routes{pageRouter}.js
: nested routes can be defined in separated file with appropriate namenavigatonGuards.js
: definition of global guards
Store structure:
state.js
: state treegetters.js
: all gettersmutations.js
: all mutationsmutationTypes.js
: keep all mutation types hereactions.js
: all actionsplugins/
: plugins in flat structuremodules/
: keep modules with appropriate named folders with same structure of filesindex.js
: where we assemble modules and export the store
Note: public/
is outside of src/
folder, keep static assets that are directly copied there
Component styleguide: Follow vue official styleguide
Plugin options
Project name
- name of your repository, written topackage.json
Project description
- description of your repository, written topackage.json
Author
- author of your repository, written topackage.json
Additional plugins
Seven Gravity Gateway
In case Seven Gravity Gateway is accepted on project creation:
@nsoft/seven-gravity-gateway
is added as NPM dependecy- two utilities are created under
src/plugins/seven-gravity-gateway
which are promise based wrappers aroundmaster/slave
instances
Example
// Using slave
import GatewaySlave from '@/plugins/seven-gravity-gateway/slave';
const config = {
slaveId: 'test',
data: {
dummyProp: 'dummyProp',
},
debug: true,
};
GatewaySlave.init(config).then(function() {
// emit when slave is ready for interaction/futher message exchange
GatewaySlave.api.emit({
action: 'Slave.Loaded',
data: {
someData: 'data'
}
})
});
// using master
import GatewayMaster from '@/plugins/seven-gravity-gateway/master';
GatewayMaster.init({
debug: false
});
GatewayMaster.addSlave({
frameId: 'DummyFrame',
slaveId: 'SlaveId',
}).then((message) => {
// slave finished with loading and ready for interaction
});
Generated project structure
.
├── 📂 config
│ └── .env.js
├── 📂 public
│ ├── favicon.ico
│ └── index.html
└── 📂 src
│ ├── 📂 api
│ │ ├── 📂 interceptors
│ │ ├── http.js
│ │ └── index.js
│ ├── 📂 assets
│ ├── 📂 components
│ │ ├── SampleBox.vue
│ │ ├── SampleBox.spec.js
│ │ └── index.js
│ ├── 📂 directives
│ │ └── index.js
│ ├── 📂 filters
│ │ └── index.js
│ ├── 📂 layouts
│ │ └── TemplateDefault.vue
│ ├── 📂 mixins
│ │ └── index.js
│ ├── 📂 pages
│ │ ├── Home.vue
│ ├── 📂 plugins
│ │ ├── index.js
│ ├── 📂 router
│ │ ├── index.js
│ │ └── navigationGuards.js
│ ├── 📂 store
│ │ ├── 📂 modules
│ │ ├── 📂 plugins
│ │ ├── actions.js
│ │ ├── getters.js
│ │ ├── index.js
│ │ ├── mutationTypes.js
│ │ ├── mutations.js
│ │ ├── state.js
│ │ └── storeConfig.js
│ ├── 📂 utility
│ │ └── index.js
│ ├── App.vue
│ ├── main.js
├── 📂 tests
│ ├── 📂 e2e
│ └── 📂 unit
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── CHANGELOG.md
├── README.md
├── babel.config.js
├── jest.config.js
├── package.json
├── postcss.config.js
└── vue.config.js
Testing
- test files should be located next to file (xy.js and xy.spec.js)