Vue3 尝鲜

最新推荐文章于 2024-05-15 10:23:10 发布

BeSill

最新推荐文章于 2024-05-15 10:23:10 发布

阅读量882

点赞数 3

分类专栏： vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_40438455/article/details/103858988

版权

Github源码: vue-next

前言

由于vue更新后与文中demo不兼容，再此说明一下，本文的所有内容是基于3.0.0-alpha.1版本编写，各位小伙伴在学习的时候注意下版本哦
在这里插入图片描述

Vue3 相对于 Vue2 有那些更改？

Object.defineProperty => Proxy
重构了虚拟DOM
OptionApi => Composition API

如何调试

首先，在GitHub上拉取最新代码

$ git pull https://github.com/vuejs/vue-next.git
$ cd vue-next && yarn

下载完成之后打开代码，开启sourceMap
1、tsconfig.json
把sourceMap字段修改为true
在这里插入图片描述
2、rollup.config.js
在rollup.config.js中，手动键入output.sourcemap = true

3、yarn dev
4、在根目录创建一个demo目录用于存放示例代码并在demo目录下创建html、js文件，引入构建后的vue文件

第一个Hello World！！！

/demo/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
    
            text-align: center;
            font-size: 24px;
            padding: 32px;
        }
    </style>
    <script src="../packages/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script src="./index.js"></script>
</html>

/demo/index.js

const {
    reactive } = Vue
var App = {
   
  template: `
    <div class="container">
         {
    {message}}
    </div>`,
  setup(

最低0.47元/天解锁文章

BeSill

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue3 尝鲜

Github: vue-nextVue3 相对于 Vue2 有那些更改？Object.defineProperty => Proxy如何调试首先，在GitHub上拉取最新代码$ git pull https://github.com/vuejs/vue-next.git下载完成之后打开代码，开启sourceMap1、tsconfig.json把sourceMap字段修...
复制链接

扫一扫

专栏目录