Vue3学习笔记+报错记录

1.创建Vue3.0工程

1.1使用vue-cli创建

查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
在这里插入图片描述
如果不是,则重新安装或升级你的@vue/cli

npm install -g @vue/cli

创建vue项目,去你想创建的目录下,执行该语句

vue create vue3_teat

出现报错,解决问题参考博客npm install安装时一直idealTree:npm: sill idealTree buildDeps解决方案
在这里插入图片描述
需要更换一下镜像网站,进入cmd后输入

npm config set registry https://registry.npmmirror.com

查看是否成功

npm config get registry

创建成功页面
在这里插入图片描述
启动项目,注意路径要切换到项目里

cd vue3_test
npm run serve

在这里插入图片描述
最后复制地址到浏览器运行查看

1.2 使用vite创建工程

什么是vite? --新一代前端构建工具
现在这一代构建工具是webpack
vite的启动速度会更快,动态引用(代码分割)

传统构建与vite构建对比?
传统的是先打包好再启动服务器,vite是先启动服务器,再按需编译,不再等待整个应用编译完成。

1.3.分析Vue3工程结构

在这里插入图片描述
构造函数与工厂函数区别?
构造函数需要通过new关键字调用,工厂函数无需通过new关键字调用

2.常用Composition

2.1 拉开序幕的setup

1.Vue3中的一个新的配置项,值为一个函数
2.组件中所用到的:数据、方法等,均要配置在setup中

3.setup函数的两种返回值
如果返回一个对象,则对象中的属性,方法,在模板中均可以直接使用!!!
即我写在return里面的属性、方法在template中是可以直接使用的
如果返回一个渲染函数,则可以自定义渲染内容

<template>
  <h1>我是App组件</h1>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <button @click="sayHello">说话</button>
</template>

<script>
export default {
  name: 'App',
  //此处只是测试一下setup,暂时不考虑响应式的问题
  setup:function(){
    //数据,所谓数据就是直接定义变量
    let name = '张三'
    let age = 18
    
    //方法
    function sayHello(){
      alert(`我叫${this.name},我${this.age}岁了,你好啊!`)
    }

    return{
      name,
      age,
      sayHello
    }
  }
}
</script>

4.vue2与vue3尽量不要混用
vue2配置(data,methos,computed…)中可以访问到setup中的属性,方法。
但是setup中不能访问到vue2配置(data,methods,computed…)
如果有重名,setup优先
5.setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性

2.2 ref函数_处理基本类型

相关推荐

  1. oracle sql学习记录

    2024-04-03 06:36:04       24 阅读
  2. vue3学习记录

    2024-04-03 06:36:04       25 阅读
  3. vue3+ts require

    2024-04-03 06:36:04       25 阅读

最近更新

  1. leetcode705-Design HashSet

    2024-04-03 06:36:04       5 阅读
  2. Unity发布webgl之后打开streamingAssets中的html文件

    2024-04-03 06:36:04       5 阅读
  3. vue3、vue2中nextTick源码解析

    2024-04-03 06:36:04       6 阅读
  4. 高级IO——React服务器简单实现

    2024-04-03 06:36:04       5 阅读
  5. 将图片数据转换为张量(Go并发处理)

    2024-04-03 06:36:04       4 阅读
  6. go第三方库go.uber.org介绍

    2024-04-03 06:36:04       6 阅读
  7. 前后端AES对称加密 前端TS 后端Go

    2024-04-03 06:36:04       7 阅读

热门阅读

  1. 时空序列预测模型—PredRNN(Pytorch)

    2024-04-03 06:36:04       5 阅读
  2. STM32 中断应用概览

    2024-04-03 06:36:04       4 阅读
  3. el-table\vxe-table深色背景Css样式

    2024-04-03 06:36:04       3 阅读
  4. 回溯大学生活

    2024-04-03 06:36:04       2 阅读
  5. FPGA简介

    2024-04-03 06:36:04       3 阅读
  6. 2、趁热打铁,Docker实战

    2024-04-03 06:36:04       3 阅读
  7. 设计模式之桥接模式

    2024-04-03 06:36:04       2 阅读