如何调试Vue3的源码 - 电脑学习网

发布时间：2022-08-13 文章分类：编程知识投稿人：赵颖字号：默认 | 大 | 超大打印

git clone

git clone https://github.com/vuejs/core.git</h2>

安装pnpm 工具

目前vue3是基于pnpm 进行构建项目的,执行pnpm install 命令，安装依赖包，如果使用npm install会报错

npm ERR! code EUNSUPPORTEDPROTOCOL</p>
npm ERR! Unsupported URL Type "workspace:": workspace:*

执行命令pnpm run dev ，即可在dist目录下生成vue.global.js 文件

在vue 目录下面创建index.html文件

head 引入vue.global.js 文件

<script src="https://www.cnblogs.com/mengxiangzhi/dist/vue.global.js" ></script>

body添加如下代码

<body>
    <div id="app">
    </div>
    <script>
        Vue.createApp({
            template:`
            <button @click="add">add</button>
            <ul> <li v-for="item in shop.lists" :key="item.id">{{item.text}}</li></ul>`,
            setup(){
                const shop=Vue.reactive({lists:[
                    {id:1,
                    text:'iphone'},
                    {id:2,
                    text:'xiaomi'}
                ]})
                const add=()=>{
                    shop.lists.push({id:Math.floor(Math.random()*100),text:'phone'+Math.floor(Math.random()*100)})
                }
                return{
                    add,
                    shop
                }
            }
        }).mount('#app')
    </script>
</body>