- 基于 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 -- 测试用例项目
-
clone 项目到本地
-
安装项目依赖:
yarn install
或
npm install
-
启动项目:
yarn dev
或
npm run dev
-
在 HTML文件中引入 dist 文件夹下的 vue.js 即可开始使用
-
clone 项目到本地
-
引入 mini-vue-router3 文件夹到你的项目中
import VueRouter from '../../mini-vue-router3'
-
使用 Vue.use 注册路由插件
Vue.use(VueRouter)
-
配置你的路由 router,语法与 Vue Router 3 一致,可参考
test/src/router/index.js
const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })
-
将配置好的路由传入 Vue 根实例中:
new Vue({ router, render: h => h(App) }).$mount('#app')
-
clone 项目到本地
-
引入 mini-Vuex3 文件夹到你的项目中
import Vuex from '../../mini-vue3'
-
使用 Vue.use 注册 Vuex 插件
Vue.use(Vuex)
-
配置你的全局状态管理库 store,语法与 Vuex3 一致,可参考
test/src/store/index.js
-
将配置好的 store 传入 Vue 根实例中:
new Vue({ store, render: h => h(App) }).$mount('#app')
mini-Vue2 开源项目遵循MIT License。
允许个人使用、商业使用、复制、分发、修改,但务必保留作者、Copyright 信息。
-
请注意本项目的版本!mini-vue2 仿照 vue 2.x 实现,mini-Vuex3 仿照 Vuex3 实现,mini-vue-router3 仿照 Vue Router 3 实现,故不支持 Vue3,请勿在 Vue3 项目中使用 mini-vue-router3。
-
个人开发项目,水平有限,本项目仅适用于源码学习,暂不支持实际应用
-
由于是简易版实现,仍有众多功能暂未实现(尤其在 mini-Vue2 中),欢迎大家提交 pr,注意提交至对应
dev
分支代码规范说明
- 行结尾无
;
- 字符串请优先使用
''
- 命名风格良好
- ℹ️ 请注意你的 vscode 自动格式化插件的代码风格是否与本项目一致
- 行结尾无
-
欢迎提交 issues,请写清楚遇到问题的原因、复显步骤。
-
🌶️更多项目参见个人主页