v3+ts慢慢学习路之二【v3源码下载】+【v3基础应用】

最新推荐文章于 2023-07-21 08:58:33 发布

godferyZhu

最新推荐文章于 2023-07-21 08:58:33 发布

阅读量575

点赞数 3

分类专栏：框架学习文章标签： vue.js javascript github

本文链接：https://blog.csdn.net/qq_42514643/article/details/122428712

版权

框架学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

能够跨越时间告别，已经不是浅的缘分了

一、v3源码下载

打开github搜索 https://github.com/ vue-next
在这里插入图片描述

1、下载github 桌面端clone地址，切换到最新的tags分支中

clone下来之后，先通过 git tag 查看最新的标记分支
在切换到标记分支名 git checkout v3.0.0 git会提示你当前处于“detached HEAD” 状态
在tag基础代码上创建一个分支 git checkout -b v3.0.0
此时就可以在新的分支测试了

在这里插入图片描述

2、安装依赖，配置package.json

在dev中加上 –sourcemap 用于调试断点调试vue源码
运行npm run dev 后，会在vue–>dist–>下生成vue.global.js和vue.global.js.map到时候我们调试源码就会直接进入对应的代包
在这里插入图片描述

二、v3基础应用

<!--
 * @Description: vue3 初体验
 * @Autor: GodferyZhu
 * @Date: 2022-01-07 11:31:45
 * @LastEditTime: 2022-01-11 13:59:03
 * @FilePath: \vue-next\packages\vue\godfery_test\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3初体验</title>
</head>
<body>
  <div id="app"></div>
  <!-- 模板第一种用法 -->
  <script type="x-template" id="my-app">
    <div class="my-app1">
      <h1>我是标签呀{{num}}</h1>
      <button @click="add">+1</button>
      <button @click="del">-1</button>
    </div>
  </script>
  <!-- 模板第二种用法 -->
  <template id="my-app">
    <div class="my-app2">
      <h1>我是标签呀{{num}}</h1>
      <button @click="add">+1</button>
      <button @click="del">-1</button>
    </div>
  </template>



  <script src="../dist/vue.global.js"></script>
  <script>
    // 1、引入打包好的V3 库，使用Vue提供的全局方法创建一个应用
    Vue.createApp({
      // 模板属性，表示Vue需要帮助我们渲染的模板信息，Vue提供两种方式模板
      // template:'<h2>V3初体验</h2>',
      
      // 1、使用script标签，并且标记他的类型为 x-template；
      // 2、使用任意标签（通常用template标签，因为此标签不会被浏览器渲染）设置id；
      template:'#my-app',

      // data属性，传入一个函数，并且必须返回一个对象
      data:function(){
        return{
          num:0
        }
      },
      // 方法属性，是一个对象，通常我们会在这个对象中定义很多方法
      methods:{
        add(){
            this.num++
          },
          del(){
            this.num--
          }
      },
    }).mount('#app') // 挂载到元素上
  </script>
</body>
</html>

godferyZhu

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
v3+ts慢慢学习路之二【v3源码下载】+【v3基础应用】

能够跨越时间告别，已经不是浅的缘分了一、v3源码下载打开github搜索 https://github.com/ vue-next1、下载github 桌面端clone地址，切换到最新的tags分支中clone下来之后，先通过 git tag 查看最新的标记分支在切换到标记分支名 git checkout v3.0.0 git会提示你当前处于“detached HEAD” 状态在tag基础代码上创建一个分支 git checkout -b v3.0.0此时就可以在新的分支测试了.
复制链接

扫一扫