【vue-cli】vue-cli@2源码学习

embedded/2024/9/22 15:03:18/

vue-cli 2 源码

@vue/cli: 3.11.0创建项目

vue create 项目名称

@vue/cli: 2.x.x 创建项目

vue init webpack yhh-project

脚手架初始化项目流程:
<a class=脚手架初始化项目流程">

下载vue/cli@2 源码
下载完成后初始化

npm i

创建项目

vue init webpack yhh-project

vue-init:

bin/vue-init

#!/usr/bin/env node// 下载远程仓库
const download = require('download-git-repo')
// 命令行处理工具
const program = require('commander')
// 路径检查
const exists = require('fs').existsSync
// path
const path = require('path')
// 作为等待图标使用
const ora = require('ora')
// 用户根目录
const home = require('user-home')
// 波浪符路径转换
const tildify = require('tildify')
// 高亮打印
const chalk = require('chalk')
// 命令行与开发者交互工具
const inquirer = require('inquirer')
// 
const rm = require('rimraf').sync
// 日志打印
const logger = require('../lib/logger')// 内部自定义方法
const generate = require('../lib/generate')
const checkVersion = require('../lib/check-version')
const warnings = require('../lib/warnings')
const localPath = require('../lib/local-path')// 是否为本地路径
const isLocalPath = localPath.isLocalPath
// 本地模版存放路径
const getTemplatePath = localPath.getTemplatePath/*** Usage. 配置commander 使用方法 */
program.usage('<template-name> [project-name]').option('-c, --clone', 'use git clone').option('--offline', 'use cached template')/*** Help.*/program.on('--help', () => {console.log('  Examples:')console.log()console.log(chalk.gray('    # create a new project with an official template'))console.log('    $ vue init webpack my-project')console.log()console.log(chalk.gray('    # create a new project straight from a github template'))console.log('    $ vue init username/repo my-project')console.log()
})/*** Help.*/function help () {program.parse(process.argv)if (program.args.length < 1) return program.help()
}
help()/*** Settings. 配置项变量的设置*/
// 模板名称
let template = program.args[0] 
// 是否包含/
const hasSlash = template.indexOf('/') > -1
// 项目构建目录名称
const rawName = program.args[1]
// 是否存在当前路径名称
const inPlace = !rawName || rawName === '.'
const name = inPlace ? path.relative('../', process.cwd()) : rawName
const to = path.resolve(rawName || '.')
const clone = program.clone || false// 本地模板地址
const tmp = path.join(home, '.vue-templates', template.replace(/[\/:]/g, '-'))
if (program.offline) {console.log(`> Use cached template at ${chalk.yellow(tildify(tmp))}`)template = tmp
}/*** Padding.*/
// 结束行
console.log()
process.on('exit', () => {console.log()
})
// 命令: vue init webpack yhh-project
// const rawName = program.args[1] // yhh-project
// const inPlace = !rawName || rawName === '.' // false
// to : 项目名称文件路径 // User/../../yhh-project/
// 判断:当前项目名称不存在相同名称的文件夹时询问:在当前目录中生成项目?
//        否则询问:目标目录已存在,是否继续?
// inPlace : 是否为当前路径下构建项目
// exists(to) : 存在当前路径
if (inPlace || exists(to)) {inquirer.prompt([{type: 'confirm',message: inPlace? 'Generate project in current directory?': 'Target directory exists. Continue?',name: 'ok'}]).then(answers => {if (answers.ok) {run()}}).catch(logger.fatal)
} else {run()
}/*** Check, download and generate the project.*/
// init 主函数
function run () {// check if template is local// 检查是否为本地模版// let template = program.args[0] // webpackif (isLocalPath(template)) {// 获取模版文件路径const templatePath = getTemplatePath(template)// 判断模版文件是否存在if (exists(templatePath)) {// 开始生成框架generate(name, templatePath,

http://www.ppmy.cn/embedded/90722.html

相关文章

rust 初探 -- 常用的集合

rust 初探 – 常用的集合 Vector 存储在堆内存上的数据&#xff0c;运行时可以动态变大或者变小。 Vec 特性&#xff1a; 由标准库提供&#xff0c;可以存储多个相同类型的值&#xff0c;并且值在内存中连续存放 Vector 的创建 fn main() {// Vec::new()let v: Vec<i32…

Java中等题-最长回文子串(力扣)

给你一个字符串 s&#xff0c;找到 s 中最长的 回文子串。 示例1&#xff1a; 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 解释&#xff1a;"aba" 同样是符合题意的答案。示例 2&#xff1a; 输入&#xff1a;s "cbbd" 输…

redis面试(三)Hash数据结构

HASH 哈希&#xff0c;在redis底层实现的时候&#xff0c;数据的结构叫做dict 这个Dict就是一个用于维护key和value映射关系的数据结构&#xff0c;与很多语言中的Map类型相似。 本质上也是一个数组链表的形式存在&#xff0c;不同的点在于&#xff0c;每个dict中是可以存在…

机械拆装-基于Unity-本地数据持久化

目录 1. 数据结构简介&#xff1a;数据的集合 1.1 线性数据结构 1.2 非线性数据结构 2. 对数据集合的操作&#xff1a; 3. 数据持久化 3.1 数据的序列化存储 3.2 JSON文件硬盘存储 3.2.1 Json文件允许存储的数据类型 3.2.2 Json文件的语法格式 3.2.3 Json文件的读取 3.2…

手撕算法题4(附思路和源码)

算法 1.单值二叉树2.相同的树3.另一棵树的子树4.二叉树的前序遍历5.二叉树的中序遍历6.二叉树的后序遍历7.二叉树遍历8.TopK问题 1.单值二叉树 单值二叉树 思路 比较父节点和子结点&#xff0c;相同返回true&#xff0c;否则返回false&#xff0c;递归 设计程序 若结点为空返回…

大模型学习笔记 - 大纲

LLM 大纲 LLM 大纲 1. LLM 模型架构 LLM 技术细节 - 注意力机制LLM 技术细节 - 位置编码 2. LLM 预训练3. LLM 指令微调 LLM 高效微调技术 4. LLM 人类对齐 LLM InstructGPTLLM PPO算法LLM DPO 算法 5. LLM 解码与部署6. LLM 模型LLaMA 系列7. LLM RAG 1. LLM 模型架构 大模…

二维码生成原理及解码原理

☝☝☝二维码配图 二维码 二维码&#xff08;Quick Response Code&#xff0c;简称QR码&#xff09;是一种广泛使用的二维条形码技术&#xff0c;由日本公司Denso Wave在1994年开发。二维码能有效地存储和传递信息&#xff0c;广泛应用于商品追溯、支付、广告等多个领域。二维…

设计模式15-门面模式

设计模式15-门面模式 "接口隔离"模式典型模式1. 适配器模式&#xff08;Adapter Pattern&#xff09;2. 装饰模式&#xff08;Decorator Pattern&#xff09;3. 桥接模式&#xff08;Bridge Pattern&#xff09;4. 代理模式&#xff08;Proxy Pattern&#xff09;5. …