🗒️vue3源码学习-1-生成配置信息
2022-5-15
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

本次主要学习目标是构建一个vue3源码的工程项目。需要用到
  1. monorepo来作为项目管理的主体。
  1. pnpm作为包管理(pnpm作为新型的包管理器,最大优势,快,小
  1. 语法选择typescript,目前较为流行的编程语言,JS的扩展版
    1. 项目的文件构成截图
      notion image

开始项目搭建

新建一个文件夹名字就称为vue3-plan吧,然后确认是否安装了pnpm

进入vue3-plan,初始化项目

文件主体构成

本项目目前作为基础的项目学习,在vue3-plan文件夹下新建一个文件夹packages,以及一个pnpm-workspace.yaml的配置文件,该文件时来引导monorepe管理项目的

安装依赖

上面4个模块安装完之后,这里注意一个问题:幽灵依赖 ,这个是指例如vue模块中有个abc依赖,这样我们在安装vue之后就可以直接使用abc模块的东西,但是在未来的时候vue不再使用abc模块,那么就会出现幽灵依赖的问题。为了不出现这种问题我们在vue3-plan的文件夹下建立一个.npmrc 文件
删除node_modules重新install之后你会发现之前node_module存在.pnpm中的模块会出现在node_module的根目录下,不推荐这么做,万不得已可以这么做。

功能代码规划

主要功能代码实现都在packages文件夹下,例如要实现reactivity和shared功能,我们直接新建2个改名称的文件夹。为了统一的写法。我们采用命令来初始化
同样的对shared也做一样的事情,然后我们在2个文件夹下都新建src文件夹并在src里面新建一个index.ts文件,在`shared/src/index.ts`文件中写入
并在`reactivity/src/index.ts`中写入
在这里先删除vue模块,因为这里正常会提示一个错误,无法找到@vue/shared,
那么错误提示找不到模块,那么我们怎么让shared和reactivity之间关联呢。在vue3-plan下建立一个tsconfig.json文件

结束

通过上面的操作,构建了一个基础的vue源码学习项目 源代码地址
 
  • Vue
  • Proxmox 搭建K8服务vue3源码学习-2-实现构建流程
    • Waline
    目录