写个自己的vue-cli
- 1.插件代码
- [2. 发布流程](#2. 发布流程)
- [3. 模板代码讲解](#3. 模板代码讲解)
-
- [3.1 vue2模板的运行流程:](#3.1 vue2模板的运行流程:)
- [3.2 vue3模板的运行流程:](#3.2 vue3模板的运行流程:)
1.插件代码
写一个自己的vue-cli插件
插件地址：插件地址
流程：
javascript
实现简单版 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-extra
2. 创建基本目录结构
/qsl-vue-cli
├── bin/ # 可执行文件目录
│ └── cli.js # 入口文件
├── lib/ # 核心逻辑目录
│ ├── create.js # 项目创建逻辑
│ └── generator.js # 模板生成逻辑
├── template/ # 项目模板目录
└── package.json
mkdir bin lib template
touch bin/cli.js lib/create.js lib/generator.js
3. 实现核心功能
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}`);
});
- 实现基本命令：create
c) 实现项目创建逻辑 (lib/create.js)
- 收集用户输入信息
- 验证项目名称
- 处理已存在目录的情况
d) 实现模板生成器 (lib/generator.js)
- 下载模板
- 修改模板配置
- 生成项目文件
4. 创建基础模板
- 创建一个基础的 Vue 项目模板
- 包含必要的项目结构和配置文件
5. 测试与优化
- 本地测试命令行工具
- 处理错误情况
- 优化用户体验
6. 发布
- 完善 README.md
- 发布到 npm2. 发布流程
发布更新流程看这里怎么把自己的包发布到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 渲染函数
处理指令和插值语法
脚本处理：
处理