vue源码目录结构

Vue.js 的源码目录结构如下：

1. compiler

包含 Vue.js 所有编译相关的代码，包括模板解析成 AST 语法树、AST 语法树优化等功能。

2. core

包含 Vue.js 的核心代码，包括内置组件、全局 API 封装、Vue 实例化、观察者、虚拟 DOM、工具函数等。

具体子目录包括：

`observer`：数据观测的核心代码。

`vdom`：虚拟 DOM 创建和打补丁的代码。

`instance`：Vue 构建函数设计相关的代码。

`global-api`：给 Vue 构造函数挂在全局（静态方法）或属性的代码。

`components`：抽象出来的通用组件。

3. platform

Vue.js 是一个跨平台的 MVVM 框架，可以运行在 web、weex、native 客户端上。

主要入口目录包括：

`web`：打包成运行在 web 上的 Vue.js。

`weex`：打包成运行在 weex 上的 Vue.js。

4. server

Vue.js 2.0 支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下。

具体子目录包括：

`web`：web 平台的相关代码。

`entry-runtime.js`：运行在 web 平台上的入口文件。

5. 其他目录

`package.json`：项目信息、依赖文件、命令定义等。

`node_modules`：依赖文件。

`public`：存放外部静态文件，如 index.html、favicon.ico 等。

`src`：主要的代码文件，包括 assets、components、router、store、views、App.vue、main.js 等。

Vue 3 的目录结构

Vue 3 的目录结构通常遵循传统的前端项目开发约定，具体如下：

1. public

存放与业务逻辑无关的静态资源，例如 index.html、favicon.ico 等。

`index.html`：应用程序的入口文件。

2. src

主要工作目录，包含整个应用程序的源代码。

`assets`：存放应用程序使用的静态资源文件，例如图片、样式表等。

`components`：存放应用程序的公共组件。

`router`：定义应用程序的路由配置。

`store`：管理应用程序的状态，通常使用 Vuex。

`views`：存放页面级别的组件。

`App.vue`：根组件，入口 Vue 文件。

`main.js`：项目的主文件，入口文件。

3. tests

存放单元测试和端到端测试的代码。

4. 其他目录

`.circleci`：包含 CircleCI 持续集成/持续部署的配置文件。

`.github`：项目相关的说明文档。

`benchmarks`：基准测试文件，Vue 的跑分 demo。

`dist`：构建后输出的不同版本 Vue 文件（UMD、CommonJS、ES）。

`examples`：一些示例，用 Vue 写的小 demo。

`flow`：Flow 静态类型检查的配置文件和类型声明文件。

`packages`：包含服务端渲染和模板编译器两种不同的 NPM 包。

`scripts`：存放 npm 脚本配置文件，结合 webpack、rollup 进行编译、测试、构建等操作。

`alias.js`：模块导入所有源代码和测试中使用的别名。

`config`：包含在 `dist/` 中找到的所有文件的生成配置。

`build`：构建脚本目录，包含 `server.js`（运行本地构建服务器）和 `client.js`（开发服务器热重载脚本）。

`utils.js`：构建相关工具方法。

`webpack.base.conf.js`、`webpack.dev.conf.js`、`webpack.prod.conf.js`：webpack 配置文件。

`config.js`：项目配置文件。

`dev.env.js`、`prod.env.js`、`test.env.js`：环境变量配置文件。

`mock`：mock 数据目录。

`hello.js`：示例代码。

`package.json`：npm 包

其他小伙伴的相似问题：

vue3.0源码目录结构图在哪里可以找到？

vue3的入口文件在哪里？

vue源码中postcss是如何配置的？