kr-vue-cli v1.0.21

Kr Vue Cli

Installation

sudo npm install kr-vue-cli -g

Project Structure

_YOUR_PROJECT
 |_.kr-vue-cli
   |_command( your private command )
 |_build
   |_webpack
 	 |_config-factory( webpack config factory )
 	   |_standard.js( standard config factory )
 	 |_loader( webpack loader )
 	 |_plugin( webpack plugin )
 	 |_task( webpack task )
 	   |_develop.js( run a webpack dev server )
 	   |_release.js( generate release files )  
 |_code
   |_kr-vue( some transformations about vue )
 	 |_store( vuex transformations )
 	   |_modules.js( store module requires, change by kr-vue-cli automatic )
 	 |_router( vue router transformations )
 	   |_router-input.js( change input of vue-router )
 	   |_router.js( router defination, change by kr-vue-cli automatic )
   |_entry( webpack entries )
 	 |_index( default entry )
 	   |_index.html
 	   |_index.js
   |_mixin-factory( vue mixin factory )
   |_plugin( vue plugin )
   |_wrapper
   |_view( vue components )
 	 |_index.vue( root component )
 	 |_router.js( vue router initialize )	  |_theme.less
 	 |_.assets( static resource of root component )	    |_image
 	   |_locale
 	   |_zh.json	
   |_store( vue store ) 
 	 |_index.js   	
 |_.gitignore
 |_package.json
 |_yarn.lock

Commands

-h

Get help.

kr-vue-cli -h

-V

Get version.

kr-vue-cli -v

init

Initialize project.

kr-vue-cli init

add-view

Add node which type is view to component tree.

kr-vue-cli add-view

add-comp

Add node which type is component to component tree.

kr-vue-cli add-comp

add-store-module

Add store module to store.

kr-vue-cli add-store-module

Private Command

You can define your private command. Here are some rules you should follow:

• A private command is a directory in YOUR_PROJECT/.kr-vue-cli/command
• This directory must have index.js file
• In index.js module.exports must has 3 attrs: key( command name ), desc( command desc, show in kr-vue-cli -h), default( a function )
• Default function must return a promise.

In default function, you can use several util or common template.

this.util.tf

Let user submit a form in cmd.

/*
 * @param desc: An array, each item has several attrs: key, label, detail, default, onJudge. 
 * @return: A promise.
 */
tf(desc).then(...)

this.util.log

See winston.

log.info('demo')

this.util.di

Inject directories to a directory.

/*
 * @param src: A config file path or an array to define relative path to dist of directory.
 * @param dist: A destination directory.
 */
di(src, dist)

this.util.fi

Inject files to a directory.

/*
 * @param src: A directory path or an array to point at files that need to inject, each file has a name which can be split by '_'. If you use '_', the file will get extra relative path to dist.
 * @param dist: A destination directory. 
 * @param envCb: A callback function to get template env.
 */
fi(src, dist, envCb)

this.util.ci

Inject codes to a file.

/*
 * @param dist: A destination file. 
 * @param reg: A regexp or a function that point at which string in destination file you want to replace.
 * @param replaceCb: A callback function like String.prototype.replace.
 */
ci(dist, reg, replaceCb)

this.util.isKr

Judge current work directory is using kr-vue-cli init.

/*
 * @return: A promise. 
 */
isKr().then(...)