Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目

目录

一、认识Vue3

1. Vue2 选项式 API  vs  Vue3 组合式API

2. Vue3的优势

二、使用create-vue搭建Vue3项目

1. 认识create-vue

2. 使用create-vue创建项目

3.熟悉项目和关键文件

一、认识Vue3

1. Vue2 选项式 API  vs  Vue3 组合式API

  <script>
  export default {
    data(){
      return {
        count:0
      }
    },
    methods:{
      addCount(){
        this.count++
      }
    }
  }
  </script>
  <script setup>
  import { ref } from 'vue'
  const count = ref(0)
  const addCount = ()=> count.value++
  </script>

特点:

  1. 代码量变少

  2. 分散式维护变成集中式维护

2. Vue3的优势

二、使用create-vue搭建Vue3项目

1. 认识create-vue

create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应

2. 使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

执行如下命令,这一指令将会安装并执行 create-vue

  
  npm init vue@latest

3.熟悉项目和关键文件

🚀 个人简介:6年开发经验,现任职某国企前端负责人,分享前端相关技术与工作常见问题~
💟 作    者:前端菜鸟的自我修养❣️
📝 专    栏:vue从基础到起飞
🌈 若有帮助,还请关注➕点赞➕收藏,不行的话我再努努力💪💪💪    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/687058.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

香蕉派BPI-F3 进迭时空(SpacemiT)K1RISC-V开发板软件下载链接

香蕉派BPI-F3是一款工业级 8核RISC-V开源硬件开发板&#xff0c;它采用进迭时空&#xff08;SpacemiT&#xff09; K1 8核RISC-V芯片设计&#xff0c;CPU集成2.0 TOPs AI计算能力。4G DDR和16G eMMC。2个GbE以太网接口&#xff0c;4个USB 3.0和PCIe M.2接口&#xff0c;支持HDM…

ESP32开发:2、使用Clion+IDF框架新建ESP32工程

文章目录 背景步骤新建工程编译工程下载代码 参考 背景 使用CLIONIDF框架新建ESP32工程。编译工程&#xff0c;并配置下载。首先需要根据教程1、安装好IDF框架&#xff0c;参考如下&#xff1a; IDF环境搭建 步骤 新建工程 首先找到IDF框架安装路径&#xff0c;我这里的如下…

JeeSite 快速开发平台 Vue3 前端版介绍

JeeSite 快速开发平台 Vue3 前端版介绍&#xff1a; 它构建于 Vue3、Vite、Ant-Design-Vue、TypeScript 以及 Vue Vben Admin 等最前沿的技术栈之上&#xff0c;能助力初学者迅速上手并顺利融入团队开发进程。涵盖的模块包括组织机构、角色用户、菜单授权、数据权限、系统参数…

webpack 优化构建速度的插件

1.HardSourceWebpackPlugin本地缓存 HardSourceWebpackPlugin这个插件比DLL动态链接库更优秀 HardSourceWebpackPlugin是webpack的插件&#xff0c;为模块提供中间缓存步骤。为了查看结果&#xff0c;您需要使用此插件运行webpack两次&#xff1a;第一次构建将花费正常的时间…

AI技术变革与企业服务创新

1、AI的技术变革 1&#xff09;AI市场规模 2&#xff09;AI大模型发展历程 3&#xff09;AIGC发展背景 4&#xff09;AIGC技术能力 AIGC的技术架构逻辑上分为基础层、技术层、能力层、应用层、终端层五大板块&#xff0c;其中核心技术层涵盖AI技术群和大模型的融合创新&#…

Python 短文本匹配,短文本语义相似度,基于大模型的短文本匹配,基于LLMs的短文本语义相似度识别,短文本语义扩充和匹配

1.任务描述 之前在做疾病相似度匹配的时候&#xff0c;堪称史诗级难题&#xff0c;虽然最后加上规则以及一些nlp模型&#xff0c;取得了差强人意的效果&#xff0c;但是短文本的语义相似度匹配一直属于比较难以攻克的难题 2.思路 随着近年大模型的飞速发展&#xff0c;就之前…

Linux实验七:线程管理

目录 一、实验目的二、实验内容三、实验环境四、参考代码五、实验步骤步骤1. 编辑源代码test7.c步骤2. 编译源代码test7.c步骤3. 运行可执行程序test7步骤4. 进一步调试源代码test7.c 六、实验结果七、实验总结 一、实验目的 1、深入理解线程模型相关概念&#xff1b; 2、掌握…

SpringBoot实现发送邮件功能

目录 一、开启邮件服务 二、导入pom依赖 三、配置yml文件 四、发送邮件 4.1、发送文字邮件 4.2、发送html邮件 4.3、发送附件邮件 4.4、发送图片邮件 一、开启邮件服务 这里拿QQ邮箱举例。 翻到下面进行开启,之后获取授权码。 二、导入pom依赖 <dependency><…

AlaSQL.js:用SQL解锁JavaScript数据操作的魔法

简介 先附上 github 地址 https://github.com/AlaSQL/alasql AlaSQL.js - JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or …

【机器学习】机器学习与智能交通在智慧城市中的融合应用与性能优化新探索

文章目录 引言机器学习与智能交通的基本概念机器学习概述监督学习无监督学习强化学习 智能交通概述交通流量预测交通拥堵管理智能信号控制智能停车管理 机器学习与智能交通的融合应用实时交通数据分析数据预处理特征工程 交通流量预测与优化模型训练模型评估 智能信号控制与优化…

mysql中事务的简介

大家好。我们在日常开发过程中肯定都或多或少的用到过事务&#xff0c;而且在面试时&#xff0c;数据库的事务也是必问内容之一。今天我们就来说说mysql的事务。 为了方便我们下面内容的讲解&#xff0c;我们也先建立一个讲事务必用的表–account表&#xff0c;并在表中插入两…

2024上半年主播又买了啥好东西? | 老高居然买了仨手机当望远镜用!

点击文末“阅读原文”即可参与节目互动 剪辑、音频 / 朱峰 运营 / SandLiu 卷圈 监制 / 姝琦 封面 / 姝琦Midjourney 产品统筹 / bobo 场地支持 / &#xff08;新&#xff09;声湃轩北京录音间 本期节目绝无广告&#xff0c;如有需要&#xff0c;我们还可以提供购买记录 …

Qt 简易Word

Ui界面如下&#xff1a; 查找和替换界面&#xff1a; 具体代码&#xff1a; GitHub : 简易Word Gitee : 简易Word

el-table合计行前置在首行,自定义合计行方法

背景 el-table原生合计行是在标签内增加show-summary属性&#xff0c;在表尾实现设计合计&#xff0c;且只对表格当前页面显示的列数据进行合计。element-UI效果如下图所示。 现要求在首行显示合计行&#xff0c;并自定义合计逻辑实现如下效果。 图示表格中&#xff0c;成本…

正宇软件助力青岛打造智慧政协平台,引领新时代政协工作创新

在当前数字化、智能化浪潮的推动下&#xff0c;青岛市政协紧跟时代步伐&#xff0c;以“百舸争流奋楫先”的精神&#xff0c;不断开拓创新&#xff0c;推动政协工作高质量发展。5月30日&#xff0c;人民政协报报道了青岛市政协在推动高质量发展、加强思想政治引领、凝聚合作共识…

李学龙 :涉水视觉

源自&#xff1a;电子学报 作者&#xff1a;李学龙 注&#xff1a;若出现无法显示完全的情况&#xff0c;可搜索“人工智能技术与咨询”查看完整文章 摘 要 地球表面有约71%的面积被江河湖海等水体覆盖&#xff0c;陆地上的成像也会受到云雪雨雾等水体影响&#xff0c;但是…

C++三大特性之继承,详细介绍

阿尼亚全程陪伴大家学习~ 前言 每个程序员在开发新系统时&#xff0c;都希望能够利用已有的软件资源&#xff0c;以缩短开发周期&#xff0c;提高开发效率。 为了提高软件的可重用性(reusability)&#xff0c;C提供了类的继承机制。 1.继承的概念 继承&#xff1a; 指在现有…

软件项目建设方案编制参考模板(Word原件)

1 引言 1.1 编写目的 1.2 项目概述 1.3 名词解释 2 项目背景 3 业务分析 3.1 业务需求 3.2 业务需求分析与解决思路 3.3 数据需求分析【可选】 4 项目建设总体规划【可选】 4.1 系统定位【可选】 4.2 系统建设规划 5 建设目标 5.1 总体目标 5.2 分阶段目标【可选】 5.2.1 业务目…

迅为RK3562开发板ARM四核A53核心板瑞芯微国产人工智能Linux安卓

iTOP-3562开发板采用瑞芯微RK3562处理器&#xff0c;内部集成了四核A53Mali G52架构&#xff0c;主频2GHZ&#xff0c;内置1TOPSNPU算力&#xff0c;RK809动态调频。支持OpenGLES1.1/2.0/3.2、0penCL2.0、Vulkan 1.1内嵌高性能2D加速硬件。 内置独立NPU, 算力达 1TOPS,可用于轻…

硬件I2C读写MPU6050

硬件I2C读写MPU6050 SCL接PB10&#xff0c;SDA接PB11,但是硬件I2C引脚不可以任意指定。 查询引脚定义表&#xff0c;来规划引脚。但由于PB6,7,8,9被OLEDz占用&#xff0c;不方便接线了。 可以使用I2C2引脚&#xff0c;但必须是SCL对应PB10&#xff0c;SDA对应PB11&#xff0c;…