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

news2024/11/25 4:36:45

目录

一、认识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从基础到起飞
🌈 若有帮助,还请关注➕点赞➕收藏,不行的话我再努努力💪💪💪    

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《考虑发用电相似性的海上风电中长期双边协商交易优化决策模型》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

【CV算法工程师必看】作为一个图像算法工程师,需要会什么,要学哪些技术栈?

作为一个图像算法工程师,除了基本的编程技能和理论知识,还需要掌握一系列的技术栈。以下是详细的技能和技术栈分类: 编程语言 Python: 主要用于快速开发和原型设计。常用库:OpenCV、Pillow、NumPy、SciPy、Scikit-image、TensorFlow、PyTorch。C++: 高性能要求的项目中广…

使用Ollama+OpenWebUI部署和使用Phi-3微软AI大模型完整指南

&#x1f3e1;作者主页&#xff1a; 点击&#xff01; &#x1f916;AI大模型部署与应用专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年6月6日23点50分 &#x1f004;️文章质量&#xff1a;96分 欢迎来到Phi-3模型的奇妙世界&#xff01;Phi-3是由微软…

零售数据分析围绕人、货、场分析了什么?

零售数据分析围绕人、货、场分析了什么&#xff1f;通过全面分析零售业务中的人、货、场三个核心要素&#xff0c;为零售商提供深入的市场洞察和业务优化建议。通过对客流量、商品销售、场地布局等数据的收集和数据可视化分析&#xff0c;帮助企业更好地了解消费者行为、商品销…

一起学大模型 - 一起动笔练习prompt的用法

文章目录 前言一、代码演示二、代码解析1. 导入所需的库和模块&#xff1a;2. 设置日志记录和初始化模型&#xff1a;3. 定义一个函数用于清理GPU内存&#xff1a;4. 定义一个继承自LLM基类的QianWenChatLLM类&#xff0c;并实现对话生成的逻辑&#xff1a;5. 示例代码的主体部…

【Linux】ip命令详解

Linux网络排查 目录 一、ip命令介绍 1.1 ip命令简介 1.2 ip命令的由来 二、ip命令使用帮助 2.1 ip命令的help帮助信息 2.2 ip命令对象介绍 2.3 ip命令选项介绍 三、查看网络信息 3.1 显示当前网络接口信息 3.2 显示网络设备运行状态 3.3 显示详细设备信息 3.4 查看…

【多模态】37、TextSquare | 借助 Gemini-Pro 通过四个步骤来生成高质量的文本问答数据

文章目录 一、背景二、方法2.1 Square-10M2.2 模型结构2.3 使用 Square-10M 进行有监督微调 三、效果3.1 实验设置3.2 Benchmark 测评 论文&#xff1a;TextSquare: Scaling up Text-Centric Visual Instruction Tuning 代码&#xff1a;暂无 出处&#xff1a;字节 | 华中科技…

大学生必备搜题神器app?分享3个软件和公众号,来对比看看吧 #媒体#其他#笔记

以下分享的软件提供了各种实用的功能&#xff0c;如数学公式计算、语文阅读辅助等&#xff0c;让大学生们在学习过程中更加高效和便利。 1.同声传译王 譬如我们在搜题或是浏览一些资料文档到时候&#xff0c;经常会访问到一些外文网页或文档&#xff0c;所以一款趁手的翻译工…

2024年四川省国家大学科技园申报条件对象和支持政策

2024年四川省国家大学科技园申报对象 国家大学科技园是以具有较强科研实力的大学为依托&#xff0c;将大学的综合智力资源优势与其它社会优势资源相结合&#xff0c;为高等学校&#xff08;以下简称为高校&#xff09;科技成果转化、高新技术企业孵化、创新创业人才培养、产学…

白酒:茅台镇白酒的丰富历史与文化传承

茅台镇&#xff0c;位于中国贵州省仁怀市&#xff0c;是中国著名的白酒产区&#xff0c;以其得天独厚的自然环境和与众不同的酿造工艺而闻名于世。作为茅台镇的白酒品牌之一&#xff0c;云仓酒庄豪迈白酒承载着丰富的历史与文化传承。 茅台镇的历史可以追溯到汉代&#xff0c;当…

@vue-office/excel 解决移动端预览excel文件触发软键盘

先直接上代码 不耽误大家时间 标明下插件库 非常感谢作者提供预览插件 vue-office/excel 只需要控制CSS :deep(.x-spreadsheet-overlayer) {.x-spreadsheet-selectors {display: none !important;} } :deep(.x-spreadsheet-bottombar) {li.active {user-select: none !import…

visual studio打包qt算子时,只生成dll没有生成lib等文件

问题&#xff1a;在visual studio配置了qt项目&#xff0c;并打包成dll&#xff0c;原则上会生成一堆文件&#xff0c;包括dll,lib等文件。 解决办法&#xff1a; 挨个右击源代码的所有头文件-》属性-》项类型。改成qt头文件形式&#xff0c;如下。

4秒惊艳!Stable Cascade AI绘画神器,设计师和普通用户的无限创意新选择

近日&#xff0c;一款AI绘画模型Stable Cascade发布。 只需输入一段描述文字&#xff0c;即可在4秒钟内获得令人惊艳的图像。 无论你是设计师、艺术家&#xff0c;还是普通用户&#xff0c;都能轻松上手&#xff0c;释放无限创意。 Stable Cascade不仅在使用上极具便捷性&am…

tomcat-valve通过servlet处理请求

上一节说到请求url定位servlet的过程&#xff0c;tomcat会把请求url和容器的映射关系保存到MappingData中&#xff0c;org.apache.catalina.connector.Request类实现了HttpServletRequest&#xff0c;其中定义了属性mappingDataprotected final MappingData mappingData new M…

机器学习笔记 - stable diffusion web-ui安装教程

一、Stable Diffusion WEB UI 屌丝劲发作了,所以本地调试了Stable Diffusion之后,就去看了一下Stable Diffusion WEB UI,网络上各种打包套件什么的好像很火。国内的也就这个层次了,老外搞创新,国内跟着屁股后面搞搞应用层,就叫大神了。 不扯闲篇了,我们这里从git源码直接…

Python深度学习基于Tensorflow(15)OCR验证码 文本检测与识别实例

文章目录 文本检测文本识别CTC层生成验证码并制作数据集建立模型模型推理 参考 文本检测 文本检测和目标检测类似&#xff0c;其不同之处在于文本目标具有序列特征&#xff0c;有连续性&#xff0c;可以通过结合 Faster R-CNN 和 LSTM 的方式进行文本检测&#xff0c;如 CTPN …

【算法】MT2 棋子翻转

✨题目链接&#xff1a; MT2 棋子翻转 ✨题目描述 在 4x4 的棋盘上摆满了黑白棋子&#xff0c;黑白两色棋子的位置和数目随机&#xff0c;其中0代表白色&#xff0c;1代表黑色&#xff1b;左上角坐标为 (1,1) &#xff0c;右下角坐标为 (4,4) 。 现在依次有一些翻转操作&#…

数据库讲解---(关系规范化)【二】

目录 前言 一.函数依赖相关 1.1函数依赖集F的逻辑蕴涵 1.2函数依赖集闭包 1.3函数依赖的推理规则 1.3.1独立推理规则 自反律 增广律 传递律 1.3.2其他推理规则 合并规则 分解规则 伪传递规则 二.数据集闭包与F逻辑蕴涵的充要条件 2.1属性集闭包 2.2F逻辑蕴涵的…

基于Kubernetes和DeepSpeed进行分布式训练的实战教程

目录 ​编辑 一、前期准备 二、部署和配置训练任务 三、编写和运行训练代码 四、监控和调优 五、代码实现 5.1. Dockerfile 5. 2. DeepSpeed 配置文件 (ds_config.json) 5.3. Kubernetes 部署文件 (deployment.yaml) 5.4. PyTorch 训练脚本 (train.py) 注意事项&am…

HTML5常用标签表单from

form表单标签 <!-- form表单其实就是一种&#xff1a;客户端和服务端数据交流一种方式机制。1&#xff1a; 服务端&#xff0c;提供数据接受地址&#xff08;gin/beego/inris&#xff09;比如&#xff1a;http://localhost:8080/toLogin2: 因为浏览器&#xff0c;在提交数据…