本文共 2066 字，大约阅读时间需要 6 分钟。

Vue.js 开发环境搭建及源码结构分析

一、开发环境搭建

在开始 Vue.js 开发之前，需要先搭建一个高效的开发环境。以下是详细的操作步骤：

1. 拉取源码

通过 git 克隆 Vue.js 仓库：

git clone https://github.com/vuejs/vue.git

此步骤会将 Vue.js 的完整源码仓库克隆到本地。

2. 安装 Rollup

为了进行代码打包，需要先安装 Rollup：

npm install -g rollup

3. 安装项目依赖

运行安装命令：

npm install

这一步会下载所有项目所需的依赖项，包括 Rollup plugin 等。

4. 配置开发脚本

在项目的 package.json 文件中，更新 scripts.dev 脚本，添加 --sourcemap 开关：

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

5. 启动开发服务器

执行 npm run dev 命令启动开发服务器：

npm run dev

随着命令执行，浏览器会自动打开开发页面，提示信息表明打包正在进行中。如果存在 Rollup plugin compatibility 错误，请继续按照以下步骤操作。

6. 处理 Rollup plugin compatibility 错误

在面对兼容性问题时：

npm uninstall rollup-plugin-alias

2.重新安装 rollup-plugin-alias：

npm install rollup-plugin-alias

3.进入 node_modules/rollup-plugin-alias 目录，安装其他依赖并打包：

cd node_modules/rollup-plugin-alias
npm install
npm run build

回到项目根目录，重新打包：

cd ..
npm run build

7. 验证打包成功

在 dist 文件夹中核对是否生成 vue.js.map 源码映射文件。出现该文件说明打包成功。

二、源码目录结构

1. 项目根目录

• 包含 package.json、package.lock、vue.config.js 等文件。
• 主要子目录：
  • src：源码目录
  • dist：打包输出目录

2. src 目录

为开发者提供主要工作目录，包含：

• core：Vue 核心代码库
• platforms：多平台支持目录（如 web、weex 等）
• src/core：核心组件和逻辑库

3. dist 文件夹

保存最终打包输出，包含：

• vue.js：主 Vue 实例
• vue.js.map：代码源映射文件

三、查找打包入口文件

1. 查看 scripts/config.js

找到对应平台（如 web-full-dev）的具体配置。例如：

// Runtime+compiler development build (Browser)
'web-full-dev': {
  entry: resolve('web/entry-runtime-with-compiler.js'),
  dest: resolve('dist/vue.js'),
  format: 'umd',
  env: 'development',
  alias: { he: './entity-decoder' },
  banner: '...',
},

可见，打包入口文件位于 web/entry-runtime-with-compiler.js。

2. 了解打包逻辑

• 从 scripts/config.js 获取完整打包配置。
• resolve 方法用于路径处理，根据配置文件可得完整绝对路径。

四、new Vue() 初始化流程

1. 执行 _init() 函数

• 初始化组件实例属性，如 $children。
• 处理自定义事件和插槽解析。
• 初始化组件状态（如 props, methods, data），调用相关生命周期钩子。

2. 主要文件路径

• src/platforms/web/entry-runtime-with-compiler.js：负责渲染处理。
• src/core/index：初始化全局 API。
• src/instance/index：定义 Vue 实例方法和属性。
• src/instance/init：处理初始配置和数据初始化。

3. Vue 实例创建流程

• new Vue 初始化时传入的参数依次被处理。
• 渲染参数优先级：render > template > el。
• 统一调用 lifeCycle hooks 和其他初始化逻辑。

通过以上步骤，可以清晰地了解 Vue.js 的初始化流程及打包配置，进一步加速开发过程。