index.js
import { initMixin } from "./init"
function Vue(options){
this._init(options)
}
initMixin(Vue)
export default Vue
init.js
import { initState } from "./state"
export function initMixin(Vue){
Vue.prototype._init=function(options){
// $options 获取用户的配置
const vm=this
vm.$options=options
initState(vm)
}
}
state.js
export function initState(vm){
const opts=vm.$options
if(opts.data){
initData(vm)
}
}
function initData(vm){
let data=vm.$options.data
typeof data==='function'?data.call(this):data
console.log(data)
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./vue"></script>
<script>
const vm=new Vue({
data(){
return {
name:'geyao',
age:20
}
}
})
</script>
</body>
</html>
配置文件
{
"name": "geyaohandvue2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "rollup -cw"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.23.3",
"@babel/preset-env": "^7.23.3",
"rollup": "^2.79.1",
"rollup-plugin-babel": "^4.4.0"
}
}
运行结果