0.5.0 ā¢ Published 2 years ago
@nsoft/vue-cli-plugin-nsoft v0.5.0
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)