kxxvy v1.2.3
Documentation
kxxvy
: A CLI to help you quickly build and develop front-end projects
The project aims to make front-end development engineering and improve development efficiency.
一、Installation
npm install kxxvy -g
二、Features
Currently Vue is supported, including the project of vue2 and vue3, (React will be supported later)
The vue project module has been configured, including:
Common directory structure (you can modify on this basis)
vue.config.js (something has configured,you can modify and configure more by yourself)
axios (network request axios installation and secondary packaging)
vue-router (router installation and configuration, in addition to dynamic loading of routing)
vuex (installation and configuration of vuex, there are also dynamic loading sub-modules)
etc...
Create project
kv create your_project_name
Automatically pull project templates, install project dependencies, open browsers, http://localhost:8083/
and automatically start projects
ps: If there are problems such as directory structure and port, they can be modified according to the needs of your project:)
三、Command
1、Create page
kv vue2-page yourPageName # eg: kv vue2-page HelloWord, the default will be stored in src / pages folder
kv vue2-page yourPageName -d src/pages/home # You can also specify a folder
kv vue3-page yourPageName # eg: kv vue3-page HelloWord, the default will be stored in src / views folder
kv vue3-page yourPageName -d src/views/home # You can also specify a folder
2、Create component
kv vue2-cpn yourCpnName # eg: kv vue2-cpn HelloWord, the default will be stored in src/components/common folder
kv vue2-cpn yourCpnName -d src/components/modules # You can also specify a folder
kv vue3-cpn yourCpnName # eg: kv vue3-cpn HelloWord, the default will be stored in src/components/common folder
kv vue3-cpn yourCpnName -d src/components/modules # You can also specify a folder
3、Create router
kv vue2-router yourRouterName # eg: kv vue2-router Home, the default will be stored in src/router/map folder
kv vue2-router yourRouterName -d src/router # You can also specify a folder
kv vue3-router yourRouterName # eg: kv vue3-router Home, the default will be stored in src/router/map folder
kv vue3-router yourRouterName -d src/router # You can also specify a folder
After the creation is completed, no manual configuration is required, and all routes have been dynamically integrated:
const routes = [];
const files = require.context("./map", false, /.js$/);
files.keys().forEach((key) => {
const route = files(key).default;
if (Array.isArray(route)) {
for (let item of route) {
routes.push(item);
}
} else {
routes.push(route);
}
});
4、Create Vuex submodule
kv vue2-store yourModuleName # eg: kv vue2-store Home, the default will be stored in src/store/modules folder
kv vue2-store yourModuleName -d src/store # You can also specify a folder
# When a vue3 project creates a vuex sub module, the types file will be created by default
kv vue3-store yourModuleName # eg: kv vue3-store Home, the default will be stored in src/store/modules folder
kv vue3-store yourModuleName -d src/store # You can also specify a folder
After the creation is completed, no manual configuration is required, and all sub-modules have been dynamically integrated:
const modules = {};
const files = require.context("./modules", false, /.js$/);
files.keys().forEach((key) => {
const name = path.basename(key, ".js");
modules[name] = files(key).default || files(key);
});