Vueckman-cli NPM

Vueckman-cli

Introduction

Vuckman-cli is based on vue-cli3.0 and quasar, you can use it to speed up your prototype development

Usage

use npm

npm install -g vueckman-cli

check if installed

vueckman -v

to create a project base on vue-cli3.0 with the features below:

vueckman init <project name>

Project setup

yarn install --production=false

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Run your tests

yarn test

Lints and fixes files

yarn lint

Features:

Auto import

All the files in src/components/ end with .js or .vue will be auto imported as global component, the name of which is the fileName
All the files in src/plugins/ end with .js will be auto imported as Vue plugin. The axios plugin has already been installed.
All the file end with .css or .styl in the src/styles/globalStyle directory will be auto imported as global style in main.js
All the modules in src/i18n/messages/locales/modules will be imported as i18n modules.

Useful installed plugins and dependencies

The Axios plugin has already been installed
The Quasar vue plugin has already been installed
The Axios request loading status is already been setup with the Loading which use QSpinnerBall as the spinner plugin of Quasar
The stylus-loader has already been installed. You can directly use it And the variables defined in src/styles/quasar.variables.styl will be auto import as global variables
The vue-router and vuex and vue-i18n has already been installed. You can directly use them
The 404 not found page has already been setup. But you may want to modify the content

Scripts

Create a vuex store quickly

yarn new:store [store name]

This script will create a vue sotre module in src/store/modules/. It is a directory that contains five files:

index.js
state.js
mutations.js
actions.js
getters.js

Create a vue plugin quickly

yarn new:plugin [plugin name]

This script will create a vue plugin in src/plugins/. It is a [plugin name].js file, the content of which is:

import [plugin name] from '[plugin name]';
export default ({ Vue, store, router, i18n }) => {
  Vue.use([plugin name])
}

Create a page quickly

yarn new:page [page name]

This script will create a directory in src/views/pages/, the name of which is page name. Within the directory is a index.vue file. The content is shown as below:

<style scoped lang="stylus">

</style>
<template lang="html">

</template>
<script>
export default{
  name: '${pageName}'
}
</script>

Create a language locale quickly

yarn new:locale [locale name]

This script will create a directory in src/i18n/messages/locales, the name of the directory is [locale name] Within the directory is a modules directory and a index.js file. The content of the index.js is as shown below:

// Auto import all modules in './modules' package
const requireLang = require.context(
  './modules',
  false,
  /\.js$/
);
requireLang.keys().forEach(fileName => {
  let langConfig = requireLang(fileName)
  let moduleName =
    fileName
    .split('/')
    .pop()
    .replace(/\.\w+$/, '')
  lang[moduleName] = langConfig.default || langConfig
})

export default lang