vue-cli 源码日记-1

源码官网git自行下载
一、vue-cli

1. 初始化：当你使用 vue create 命令时，vue-cli 首先会初始化一个新的项目目录。
2. 模板解析：vue-cli 使用了一个模板系统（如 EJS 或 Pug）来生成项目结构。模板中的 <%= %> 标签会被相应的值替换。例如，一个模板可能包含 <%= name %>，其中 name 是一个你在创建项目时提供的变量。
3. 插件系统：vue-cli 允许你使用插件来扩展其功能。例如，你可以使用 Babel 和 ESLint 插件来转译和检查你的代码。
4. 配置：vue-cli 使用了一个配置文件（通常是 vue.config.js）来允许用户自定义其项目的设置。
5. 命令行参数：你可以通过命令行参数来覆盖模板中的变量。例如，vue create my-project --name my-app 会将 name 设置为 my-app。
6. 构建过程：一旦项目创建完成，你可以使用 npm run build 来构建项目。这个过程通常包括转译（Babel）、代码压缩（UglifyJS）和资源优化（Webpack）。
7. 插件和预设：你可以在创建项目时选择预设或插件，例如 Vue Router、Vuex 等。这些预设和插件会帮助你快速设置和配置项目

二、代码部分
1、通过执行脚本 找到cli对应入口
// bin/vue.js 2、在cli/lib/create.js 中 （ 就是我们创建项目指令 《vue create project 》 后执行的代码）
2.1、查看创建项目名称是否存在，且是否替换、 校验名称规范
2.2、从文件中引入creator 构造函数

// 省略中间。。 看最终处理

// creator.js 文件导入的依赖
// 主要处理提示及配置

const path = require('path')
// node 内置模块
const debug = require('debug')
//debug 库
const inquirer = require('inquirer')
// 交互式命令行界面
const EventEmitter = require('events')
//  node 内置事件模块
const Generator = require('./Generator')

const cloneDeep = require('lodash.clonedeep')
// 深度克隆
const sortObject = require('./util/sortObject')
// 对象属性unicode 排序
const getVersions = require('./util/getVersions')
// 版本相关
const PackageManager = require('./util/ProjectPackageManager')
// 项目依赖包管理
const { clearConsole } = require('./util/clearConsole')
// 
const PromptModuleAPI = require('./PromptModuleAPI')

const writeFileTree = require('./util/writeFileTree')
// 写入文件
const { formatFeatures } = require('./util/features')
const loadLocalPreset = require('./util/loadLocalPreset')
const loadRemotePreset = require('./util/loadRemotePreset')
const generateReadme = require('./util/generateReadme')
// 生产readme文件
const { resolvePkg, isOfficialPlugin } = require('@vue/cli-shared-utils')

---

// Generator.js 主要构建 模块处理

文章个人学习理解，有不对大佬们多指点

未完待续。。。