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 thesrc/styles/globalStyle
directory will be auto imported as global style inmain.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