/mini-Vue2

手写 Vue2、Vue-Router、Vuex 核心源码，包括 Vue2 全家桶源码的详细解析

Primary LanguageJavaScriptMIT LicenseMIT

node rollup

项目说明

  • 基于 rollup 打包，仿照 Vue2 及其周边生态源码实现的一款简易 JavaScript 框架
  • 实现了 Vue 的数据劫持、响应式、diff等核心原理以及 watch、computed、$nextTick 、Vue.component 等部分 API
  • 实现了 Vue Router 的 hash 和 history 模式，支持路由跳转以及前置 / 后置路由守卫
  • 实现了 Vuex 的基本架构，内置有 logger 日志插件和 persists 持久化插件可供选择
  • 简化了 Vue2 冗杂难懂的源码，以最简单的方式实现最核心的功能，注释丰富，文档齐全，适合新手学习

分支说明

  • main：主分支
  • dev：开发测试分支

配套文档

快速开始

相关依赖

依赖 版本
node.js 16.14.0
rollup 2.79.1

模块说明

mini-Vue2  -- https://github.com/Nwu23787/mini-Vue2

mini-Vue2 -- 仿 Vue2
├── demo -- 测试用例文件夹
├── node_modules -- 依赖包文件夹
├── dist -- 打包出口
└── src -- 主模块
     ├── compiler -- 模版编译模块
			├── index.js -- 模版编译
			└── parse.js -- 模版解析
     ├── observe -- 响应式模块
			├── array.js -- 处理数组响应式
			├── dep.js -- dep 类及其相关操作
			├── index.js -- 数据劫持和监听
			└── watcher.js -- watcher 类及其相关操作
     ├── vdom -- 虚拟 DOM 模块
			├── index.js -- 创建 vnode
			└── patch.js -- diff 及 pitch 算法
     ├── globalAPI.js -- 全局 API
     ├── init.js -- Vue 初始化
     ├── lifecycle.js -- 生命周期相关
     ├── state.js -- 数据劫持相关
     ├── utils.js -- 工具文件
     └── index.js -- 主文件

mini-Vue-Router3 -- 仿 Vue-Router3
├── mini-vue-router3 -- 源文件
	├── components -- 路由相关组件
			├── link.js -- <router-link> 定义
			└── view.js -- <router-view> 定义
	├── history -- history 对象
			├── base.js -- history 父类
			├── html5.js -- history 模式的 history 对象
			└── hash.js -- hash 模式的 history 对象
	├── creat-matcher.js -- 创建路由匹配器
	├── create-router-map.js  -- 创建路由映射表
	├── index.js -- 主文件
	└── install.js -- 插件的 install 方法
└── test -- 测试用例项目	

mini-Vuex3 -- 仿 Vuex3 
├── mini-Vuex3 -- 源文件
	├── module -- 路由相关组件
			├── module-collection.js -- 创建根 module
			└── module.js -- module 类
	├── pulgins -- 插件
			├── logger.js -- 日志插件
			└── persists.js -- 持久化插件
	├── creat-matcher.js -- 创建路由匹配器
	├── index.js -- 主文件
	└── install.js -- 插件的 install 方法
└── test -- 测试用例项目

快速开始

mini-vue2

  1. clone 项目到本地

  2. 安装项目依赖：

    yarn install

    或

    npm install

  3. 启动项目：

    yarn dev

    或

    npm run dev

  4. 在 HTML文件中引入 dist 文件夹下的 vue.js 即可开始使用

mini-vue-router3

  1. clone 项目到本地

  2. 引入 mini-vue-router3 文件夹到你的项目中

    import VueRouter from '../../mini-vue-router3'

  3. 使用 Vue.use 注册路由插件

    Vue.use(VueRouter)

  4. 配置你的路由 router，语法与 Vue Router 3 一致，可参考 test/src/router/index.js

    const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

  5. 将配置好的路由传入 Vue 根实例中：

    new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

mini-Vuex3

  1. clone 项目到本地

  2. 引入 mini-Vuex3 文件夹到你的项目中

    import Vuex from '../../mini-vue3'

  3. 使用 Vue.use 注册 Vuex 插件

    Vue.use(Vuex)

  4. 配置你的全局状态管理库 store，语法与 Vuex3 一致，可参考 test/src/store/index.js

  5. 将配置好的 store 传入 Vue 根实例中：

    new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

开源共建

开源协议

mini-Vue2 开源项目遵循MIT License。

允许个人使用、商业使用、复制、分发、修改，但务必保留作者、Copyright 信息。

其他说明

  1. 请注意本项目的版本！mini-vue2 仿照 vue 2.x 实现，mini-Vuex3 仿照 Vuex3 实现，mini-vue-router3 仿照 Vue Router 3 实现，故不支持 Vue3，请勿在 Vue3 项目中使用 mini-vue-router3。

  2. 个人开发项目，水平有限，本项目仅适用于源码学习，暂不支持实际应用

  3. 由于是简易版实现，仍有众多功能暂未实现（尤其在 mini-Vue2 中），欢迎大家提交 pr，注意提交至对应 dev 分支

    代码规范说明
    1. 行结尾无;
    2. 字符串请优先使用''
    3. 命名风格良好
    4. ℹ️ 请注意你的 vscode 自动格式化插件的代码风格是否与本项目一致

  4. 欢迎提交 issues，请写清楚遇到问题的原因、复显步骤。

其他项目

相关链接