1.0.0 • Published 3 years ago
cliofzwx v1.0.0
cliofzwx 说明文档
cliofzwx: 一个帮助你快速搭建和开发前端(vue,后期可能引入 react,angular 就算了,你懂的)项目的 CLI,功能比 vue 官方的脚手架更牛逼,详情见下文
如何安装?
npm install cliofzwx -g
项目开发的背景
vue-cli 官方脚手架创建的项目功能比较局限,主要有以下几点
- 拉取的只是一些普通模板
- 配置基本上没有,都需要自己去手动配置,比如新建一个页面,必须手动去新建,然后填写内容,还要去配置路由,麻烦的要死
- 对于常见的 vue 全家桶项目,axios,vue-router,vuex 都没有很好的配置
创建项目
目前支持 Vue,后期会支持 React,Angular 就不考虑了
vue 项目模块已经帮你配置:
- 常用的目录结构(你可以在此基础上修改)
- vue.config.js(其中配置了别名,你可以自行修改和配置更多)
- axios(网络请求 axios 的安装以及二次封装)
- vue-router(router 的安装和配置,另外有路由的动态加载,后面详细说明)
- vuex(vuex 的安装和配置,另外有动态加载子模块,后面详细说明)
创建项目
cliofzwx create project_name
项目开发
项目开发目前提供三个功能 :
- 创建 Vue 组件(cliofzwx addCpn -d xxx/xxx/xxx)
- 创建 Vue 页面,并配置路由(cliofzwx addPage -d xxx/xxx/xxx)
- 创建 Vuex 子模块 (cliofzwx addStore -d xxx/xxx/xxx)
创建 Vue 组件:
cliofzwx addCpn YourComponentName # 例如cliofzwx addCpn NavBar,默认会存放到src/components文件夹中
cliofzwx addCpn YourComponentName -d src/pages/home # 也可以指定存放的具体文件夹,-d 后面的就是放置组件的位置
创建 Vue 页面,并配置路由
cliofzwx addPage YourPageName # 例如cliofzwx addPage login,默认会放到src/pages/login/login.vue中,并且会创建src/page/login/router.js
cliofzwx addPage YourPageName -d src/views # 也可以指定文件夹,但需要手动集成路由
为什么会创建 router.js 文件?
router.js
文件是路由的其中一个配置;- 创建该文件中
src/router/index.js
中会自动加载到路由的routes
配置中,不需要手动配置了(如果是自己配置的文件夹需要手动配置)
src/router/index.js
中已经完成如下操作:
// 动态加载pages中所有的路由文件
const files = require.context("@/pages", true, /router\.js$/);
const routes = files.keys().map((key) => {
const page = require("@/pages" + key.replace(".", ""));
return page.default;
});
创建 Vuex 子模块
cliofzwx addStore YourVuexChildModuleName # 例如cliofzwx addStore home,默认会放到src/store/modules/home/index.js和types.js
cliofzwx addStore YourVuexChildModuleName -d src/vuex/modules # 也可以指定文件夹
创建完成后,不需要手动配置,已经动态将所有子模块集成进去:
// 动态加载modules
const modules = {};
const files = require.context("./", true, /index\.js$/);
files
.keys()
.filter((key) => {
if (key === "./index.js") return false;
return true;
})
.map((key) => {
// 获取名字
const modulePath = key.replace("./modules/", "");
const moduleName = modulePath.replace("/index.js", "");
const module = require(`${key}`);
modules[`${moduleName}`] = module.default;
});
建议:安装组件时,建议自定义文件夹,跟上-d,增加页面和增加 vuex 时,不建议自定义文件夹~
1.0.0
3 years ago