写个自己的vue-cli

1.插件代码

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

1. 实现简单版 vue-cli 步骤文档
3. 1. 项目初始化
4. - 创建项目文件夹 qsl-vue-cli
5. - 初始化 package.json  //npm init -y
6. - 安装必要的依赖包：
7.   * commander (命令行工具) 作用：解析命令行参数，执行相应的命令
8.   * inquirer (交互式命令行) 作用：收集用户输入信息
9.   * download-git-repo (下载模板) 作用：下载模板
10.   * chalk (命令行美化) 作用：美化命令行输出
11.   * ora (加载动画) 作用：显示加载动画
12.   * fs-extra (文件操作) 作用：文件操作
13.   //npm install commander inquirer download-git-repo chalk ora fs-extra
15. 2. 创建基本目录结构
16. /qsl-vue-cli
17.   ├── bin/              # 可执行文件目录
18.   │   └── cli.js       # 入口文件
19.   ├── lib/             # 核心逻辑目录
20.   │   ├── create.js    # 项目创建逻辑
21.   │   └── generator.js # 模板生成逻辑
22.   ├── template/        # 项目模板目录
23.   └── package.json
25. mkdir bin lib template
26. touch bin/cli.js lib/create.js lib/generator.js
28. 3. 实现核心功能
29. a) 配置 package.json
30. - 设置 bin 字段，指定可执行文件
31. - 添加必要的脚本命令
33. "bin": {
34. "qsl_vue_cli": "./bin/cli.js"
35. }
36. bin/cli.js 文件开头添加 shebang(作用：指定脚本解释器)
37. #! /usr/bin/env node
38. 将脚手架链接到全局
39. npm link （将当前项目链接到全局，为什么要链接到全局?
40. 1. 命令行全局可用
41. 当我们开发一个 CLI 工具时，希望在终端的任何位置都能使用这个命令
42. 比如我们想在任何目录下都能执行 qsl_vue_cli create project-name
43. 如果不链接到全局，就只能在项目目录下使用这个命令
44. 2. 开发调试方便
45. 在开发过程中，我们需要频繁测试 CLI 命令
46. npm link 创建一个符号链接，指向我们的开发项目
47. 这样修改代码后可以立即测试效果，不需要每次都重新安装
48. 3.模拟 npm 全局安装
49. 最终用户会通过 npm install -g qsl_vue_cli 全局安装我们的工具
50. npm link 在开发阶段模拟了这种全局安装的效果
51. 帮助我们验证工具在真实环境中的表现
52. ）
55. b) 实现命令行工具 (bin/cli.js)
56. - 配置 commander
57.     * 引入 commander
58. const { program } = require('commander');
59.     * 创建 commander 实例
60. program.version('1.0.0').description('A simple vue cli tool').usage('<command> [options]');
61.     * 添加 create 命令
62. program.command('create <project-name>').description('Create a new Vue project').action((projectName) => {
63.   console.log(`Creating project ${projectName}`);
64. });
65. - 实现基本命令：create
68. c) 实现项目创建逻辑 (lib/create.js)
69. - 收集用户输入信息
70. - 验证项目名称
71. - 处理已存在目录的情况
73. d) 实现模板生成器 (lib/generator.js)
74. - 下载模板
75. - 修改模板配置
76. - 生成项目文件
78. 4. 创建基础模板
79. - 创建一个基础的 Vue 项目模板
80. - 包含必要的项目结构和配置文件
82. 5. 测试与优化
83. - 本地测试命令行工具
84. - 处理错误情况
85. - 优化用户体验
87. 6. 发布
88. - 完善 README.md
89. - 发布到 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 渲染函数
  处理指令和插值语法
  脚本处理：
  处理
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。