vue-cli-plugin-nsoft

NSoft General Vue CLI Plugin

⭐ Features

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

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 @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 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:

@nsoft/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)

kovacevjosip / vue-cli-plugin-nsoft