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

Create a language locale module quickly

yarn new:locale-module [module name]

This script will create a [module name].js file in every locale in src/i18n/messages/locales The content of the file is as shown below:

export default {
  // name: value

}

See more:

Vue
Vue cli
Vue Router
Vuex
Vue i18n
Quasar

Liscense