vue3 相关知识

基本知识点

示例

浏览器解析

*.css, *.js, *.html,
*.scss *.less *.ts, *.vue

补充知识点

nginx

Web 服务器: nginx、IIS、Apache

vue-html 示例

var Vue = (function (exports) {
  function effectScope(detached) {
    return new EffectScope(detached);
  }
  exports.effectScope = effectScope
  return exports;
})({});

其他格式

统称 IIFE 立即执行函数

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined'
    ? factory(exports, require('vue')) :
    typeof define === 'function' && define.amd
      ? define(['exports', 'vue'], factory) :
      (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ElementPlus = {}, global.Vue));
})(this, (function (exports, vue) {
  'use strict';
  //


exports.version = '1.0';


Object.defineProperty(exports, '__esModule', { value: true });


}))

vue 目录结构

CORE
├─changelogs		// 更新日志
├─packages		// 源码和测试代码
│  ├─compiler-core		// 跨平台的框架
│  ├─compiler-dom 		// 浏览器端编译器
│  ├─compiler-sfc 		// .vue 文件解析器
│  ├─compiler-ssr 	  	// 服务端解析器
│  ├─dts-test			//
│  ├─reactivity			// 响应式系统的实现
│  ├─reactivity-transform         // 提供响应性语法糖，听说已经被移除了，但在最新的包里面还可以看见
│  ├─runtime-core 		// 包含虚拟 DOM 渲染器、组件实现、全局的js API。
│  ├─runtime-dom  		// 对 原生DOM API、属性、样式、事件等管理。
│  ├─runtime-test 		// 用于测试 runtime-core 的轻量级运行时，仅适用于vue内部测试
│  ├─server-renderer	        // 服务端渲染的核心实现
│  ├─sfc-playground		// 与 template-explorer 类似，不仅包含 template 部分的编译，还包含了 script 与 style 部分的编译。
│  ├─shared			// 包含多个包共享的内部实用工具库
│  ├─template-explorer    	// 用于调试模板编译输出工具。
│  ├─vue  		        // vue完整包
│  └─vue-compat			// vue3 的构建版本，提供可配置的 vue2兼容行为。
└─scripts 		//编译构建代码

compiler-core： Vue.js 是一个跨平台的框架，既可以在浏览器端编译，也可以在服务器端编译。compiler-core 包含所有与平台无关的代码转换插件。
compiler-dom：在浏览器端编译时，会使用 compiler-dom 提供的编译器，它是在 compiler-core 的基础上进行的封装。compiler-dom 包含了专门针对浏览器的代码转换插件。
compiler-sfc：用于实现 .vue 文件的解析，以及 template、script、style 的解析的相关代码都是由 compiler-sfc 模块实现的。
compiler-ssr：在服务端编译时，会使用 compiler-ssr 提供的编译器。它是专门针对服务端渲染的转换插件。
runtime-core：包含了与平台无关的运行时核心实现（vue核心代码），包括虚拟DOM的渲染器、组件实现和一些全局的 JS API。
runtime-dom：基于 runtime-core 创建的以浏览器为目标的运行时，包括对原生 DOM API、属性、样式、事件等管理。
reactivity：包含响应式系统的实现，是 runtime-core 包的依赖，也可以作为与框架无关的包独立使用。
server-renderer：包含服务端渲染的核心实现，是用户在使用 Vue.js 实现服务端渲染时所需要依赖的包

vue 目录结构 - 完整版本

.
├── .eslintrc.cjs              // eslint代码风格检查工具的配置文件
├── .prettierignore            // Pretttier格式化工具忽略文件的配置文件
├── .prettierrc                // Pretttier格式化工具配置文件
├── BACKERS.md                 // 支持者列表
├── CHANGELOG.md               // 代码版本变更日志
├── LICENSE                    // 软件许可证，vue3遵循The MIT License (MIT)协议
├── README.md                  // 本项目说明
├── SECURITY.md                // 安全相关信息说明
├── changelogs                 // 存放版本变更日志的文件夹
│   ├── CHANGELOG-3.0.md
│   ├── CHANGELOG-3.1.md
│   └── CHANGELOG-3.2.md
├── netlify.toml               // Netlify 部署工具的配置文件
├── package.json               // 项目依赖和脚本的配置文件
├── packages
│   ├── compiler-core          // 编译器核心，独立于平台
│   ├── compiler-dom           // 针对浏览器的 DOM 模板编译器
│   ├── compiler-sfc           // 单文件组件(.vue)编译器的实现
│   ├── compiler-ssr           // 服务端渲染编译器的实现
│   ├── dts-test               // TypeScript 类型声明测试
│   ├── global.d.ts            // 全局 TypeScript 类型声明文件
│   ├── reactivity             // 响应式系统的实现
│   ├── reactivity-transform   // 实验性代码，会在 3.4 中从 Vue 核心中删除
│   ├── runtime-core           // 运行时核心实例相关代码
│   ├── runtime-dom            // 针对浏览器的运行时实现
│   ├── runtime-test           // 运行时测试相关代码
│   ├── server-renderer        // 服务端渲染的实现
│   ├── sfc-playground         // 单文件组件在线调试器
│   ├── shared                 // package 之间共享的工具库
│   ├── template-explorer      // 模板代码在线编译器
│   ├── vue                    // vue编译后dist产物，不同场景的引入文件
│   └── vue-compat             // 兼容旧版 API 的代码
├── pnpm-lock.yaml             // pnpm 包管理器的依赖锁定文件
├── pnpm-workspace.yaml        // pnpm 包管理器的工作区配置文件
├── rollup.config.js           // Rollup 打包工具的配置文件
├── rollup.dts.config.js       // Rollup 打包工具用于生成 TypeScript 类型声明文件的配置文件
├── scripts                    // 存放脚本文件的文件夹
│   ├── aliases.js
│   ├── build.js
│   ├── const-enum.js
│   ├── dev.js
│   ├── pre-dev-sfc.js
│   ├── release.js
│   ├── setupVitest.ts
│   ├── size-report.ts
│   ├── usage-size.ts
│   ├── utils.js
│   └── verifyCommit.js
├── tsconfig.build.json         // 用于编译打包后的代码的 TypeScript 配置文件
├── tsconfig.json               // 项目 TypeScript 配置文件
├── vitest.config.ts            // Vitest 测试工具的基础配置文件
├── vitest.e2e.config.ts        // Vite 测试工具的端到端测试配置文件
└── vitest.unit.config.ts       // Vite 构建工具的单元测试配置文件

vue3 相关知识 ​

基本知识点 ​

浏览器解析 ​

nginx ​

vue-html 示例 ​

vue3 相关知识

基本知识点

浏览器解析

nginx

vue-html 示例