vue-cli-plugin-nsoft

NSoft General Vue CLI Plugin

⭐ Features

• Vue CLI Plugin to generate a project structure for your project.

Table of contents

• Getting started
• Commands
• Source Structure
• Plugin options
• Generated project structure
• Testing

---

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 @nsftx/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 communication
• assets/: module assets (processed by module bundler)
• components/: all components that are not main view in flat structure
• directives/: all directives in flat structure
• filters/: all filters in flat structure
• mixins/: all mixins in flat structure
• plugins/: for plugins inclusion
• utility/: helper functions in flat structure
• pages/: component pages
• layouts/: component template pages
• store/: store stuff
• router/: routing stuff
• main.js: app entry file
• App.vue: main app component

Router structure:

• index.js: app routes
• {pageRouter}.js: nested routes can be defined in separated file with appropriate name
• navigatonGuards.js: definition of global guards

Store structure:

• state.js: state tree
• getters.js: all getters
• mutations.js: all mutations
• mutationTypes.js: keep all mutation types here
• actions.js: all actions
• plugins/: plugins in flat structure
• modules/: keep modules with appropriate named folders with same structure of files
• index.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 to package.json
• Project description - description of your repository, written to package.json
• Author - author of your repository, written to package.json

Additional plugins

Seven Gravity Gateway

In case Seven Gravity Gateway is accepted on project creation:

• @nsftx/seven-gravity-gateway is added as NPM dependecy
• two utilities are created under src/plugins/seven-gravity-gateway which are promise based wrappers around master/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)

Publish

We use SemVer for versioning. For the versions available, see the releases on this repository.

In order to release next version of the library pull request is required. Use following steps for release.

• Merge approved pull requests that should be in next version to master
• Create version-$nextVersion branch from master
• run npm version -$versionType
• Push branch & tag to remote
• After pull request is merged, create a new Release
• GitHub will trigger action (.github/workflows/release.yml) and it will publish package