1.1.2 • Published 3 years ago
fjrcli v1.1.2
说明文档
fjrcli
: 自己练习创建的CLI,只是一个简单的学习成果
如何安装?
npm install fjrcli -g
创建项目
vue项目模块配置(使用王红元coderwhy的vue-template模板):
- 常用的目录结构(你可以在此基础上修改)
- vue.config.js(其中配置了别名,你可以自行修改和配置更多)
- axios(网络请求axios的安装以及二次封装)
- vue-router(router的安装和配置,另外有路由的动态加载,后面详细说明)
- vuex(vuex的安装和配置,另外有动态加载子模块,后面详细说明)
创建项目
fjr create your_project_name
自动拉取项目模板、安装项目依赖、自动启动项目并打开浏览器
项目开发
项目开发目前提供的功能:
- 创建Vue组件
- 创建Vue页面,并配置路由
创建Vue组件:
fjr addcpn YourComponentName # 例如fjr add NavBar,默认会存放到src/components文件夹中
fjr addcpn YourComponentName -d src/pages/home # 也可以指定存放的具体文件夹
创建Vue页面,并配置路由
fjr addpage YourPageName # 例如fjr addpage Home,默认会放到src/pages/home/Home.vue中,并且会创建src/page/home/router.js
fjr 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;
})