写个自己的vue-cli

1.插件代码
2. 发布流程
3. 模板代码讲解
- 3.1 vue2模板的运行流程:
- 3.2 vue3模板的运行流程:

1.插件代码

写一个自己的vue-cli插件
插件地址：插件地址
流程：

实现简单版 vue-cli 步骤文档1. 项目初始化
- 创建项目文件夹 qsl-vue-cli
- 初始化 package.json  //npm init -y
- 安装必要的依赖包：* commander (命令行工具) 作用：解析命令行参数，执行相应的命令* inquirer (交互式命令行) 作用：收集用户输入信息* download-git-repo (下载模板) 作用：下载模板* chalk (命令行美化) 作用：美化命令行输出* ora (加载动画) 作用：显示加载动画* fs-extra (文件操作) 作用：文件操作//npm install commander inquirer download-git-repo chalk ora fs-extra2. 创建基本目录结构
/qsl-vue-cli├── bin/              # 可执行文件目录│   └── cli.js       # 入口文件├── lib/             # 核心逻辑目录│   ├── create.js    # 项目创建逻辑│   └── generator.js # 模板生成逻辑├── template/        # 项目模板目录└── package.jsonmkdir bin lib template
touch bin/cli.js lib/create.js lib/generator.js3. 实现核心功能
a) 配置 package.json
- 设置 bin 字段，指定可执行文件
- 添加必要的脚本命令"bin": {"qsl_vue_cli": "./bin/cli.js"
}bin/cli.js 文件开头添加 shebang(作用：指定脚本解释器)
#! /usr/bin/env node
将脚手架链接到全局
npm link （将当前项目链接到全局，为什么要链接到全局?
1. 命令行全局可用
当我们开发一个 CLI 工具时，希望在终端的任何位置都能使用这个命令
比如我们想在任何目录下都能执行 qsl_vue_cli create project-name
如果不链接到全局，就只能在项目目录下使用这个命令
2. 开发调试方便
在开发过程中，我们需要频繁测试 CLI 命令
npm link 创建一个符号链接，指向我们的开发项目
这样修改代码后可以立即测试效果，不需要每次都重新安装
3.模拟 npm 全局安装
最终用户会通过 npm install -g qsl_vue_cli 全局安装我们的工具
npm link 在开发阶段模拟了这种全局安装的效果
帮助我们验证工具在真实环境中的表现
）b) 实现命令行工具 (bin/cli.js)
- 配置 commander* 引入 commander const { program } = require('commander');* 创建 commander 实例program.version('1.0.0').description('A simple vue cli tool').usage('<command> [options]');* 添加 create 命令program.command('create <project-name>').description('Create a new Vue project').action((projectName) => {console.log(`Creating project ${projectName}`);
});
- 实现基本命令：createc) 实现项目创建逻辑 (lib/create.js)
- 收集用户输入信息
- 验证项目名称
- 处理已存在目录的情况d) 实现模板生成器 (lib/generator.js)
- 下载模板
- 修改模板配置
- 生成项目文件4. 创建基础模板
- 创建一个基础的 Vue 项目模板
- 包含必要的项目结构和配置文件5. 测试与优化
- 本地测试命令行工具
- 处理错误情况
- 优化用户体验6. 发布
- 完善 README.md
- 发布到 npm

2. 发布流程

发布更新流程看这里怎么把自己的包发布到npm。

3. 模板代码讲解

3.1 vue2模板的运行流程:

执行命令npm run serve:
启动 vue-cli-service serve
编译项目代码
启动开发服务器（默认端口 8080）
启用热重载
构建过程：
webpack 通过 vue-loader 处理 .vue 文件
babel-loader 转译 JS 代码
处理样式、图片等资源
生成开发服务器所需的文件
浏览器中：
加载index.html(在 Vue CLI (Vue 2 模板) 中，index.html 的处理是通过 webpack 的 html-webpack-plugin 插件完成的，这个插件是 @vue/cli-service 内部配置好的。
// @vue/cli-service 内部配置
new HtmlWebpackPlugin({
template: ‘public/index.html’, // 指定模板文件
filename: ‘index.html’, // 输出文件名
inject: true // 自动注入打包后的 JS 和 CSS
})
)
执行打包后的 JS
Vue 实例创建并挂载到 #app
渲染页面内容

3.2 vue3模板的运行流程:

让我更详细地解释 Vue 3 + Vite 的运行流程：

启动开发服务器
当运行 npm run dev 时：
Vite 会：
启动一个开发服务器（默认端口 5173）
监听文件变化
准备处理浏览器的各种请求
首次加载(当访问 http://localhost:5173/ 时Vite 会自动返回根目录下的 index.html)
浏览器请求 index.html：
处理主入口文件
浏览器请求 main.js：
Vite 会：
拦截对 vue 的导入，返回预构建的 vue 模块
处理 App.vue 的导入请求
处理 Vue 组件
当请求 App.vue 时：
Vite 插件处理
通过 vite.config.js 配置的插件处理各种文件：
具体处理流程：
模板编译：
解析 template 为虚拟 DOM 渲染函数
处理指令和插值语法
脚本处理：
处理