创建自己的脚手架工具

Posted 2021-10-10 还是不会呀

创建自己的脚手架工具

• • 目录结构
  • 脚手架说明文档：fzb
  • • 安装脚手架
    • 使用脚手架
    • • 创建项目
      • 项目开发
      • • 创建Vue组件
        • 创建Vue页面，并配置路由
        • 创建vuex_module

这两天学习像 vue-cli 这些脚手架的东西，是如何创建的，自己也跟着写了写，今天发布在npm上,在之前开发的vue3+ts项目上是可以用到的，而且可以防止错误的出现

---

脚手架将会更具自己的学习进度持续更新

如果客官觉得有用，不妨给个 ⭐️叭。
GitHub地址
NPM地址

---

目录结构

脚手架说明文档：fzb

不知道以什么名字就以自己名字首字母吧

fzb 是一款工具可以帮助我们在开发前端项目时，快速完成一些重复性的工作。

安装脚手架

npm install fzb

使用脚手架

创建项目

目前只学习了Vue，脚手架也只支持到Vue

Vue项目使用fzb脚手架来搭建，做好的配置：

• 目录结构
• vue.config.js （目前只起了别名）
• axios (网络请求axios的安装以及二次封装)
• vue-router (router的安装和配置，另外有路由的动态加载)
• vuex (vuex的安装和配置，另外有动态加载子模块)

命令：

fzb create project_name

项目开发

• 创建Vue组件
• 创建Vue页面，并配置路由
• 创建Vuex子模块

创建Vue组件

必须传入组件的名字，组件文件默认放在src/components下，-d 可以手动指定文件路径

fzb cpn component_name

fzb cpn component_name -d src/page/about

创建Vue页面，并配置路由

必须传入页面的名称和对应路由的path ，页面文件默认放在 src/page也可以-d 手动指定，路由文件默认放在src/router 文件夹下

fzb page page_name /main/home

fzb page page_name /main/home -d

创建vuex_module

必须传入module名称 ，文件默认放在 src/store/也可以-d 手动指定

fzb store module_name

fzb store module_name -d src/store