【VUE】使用create-vue快速创建一个vue + vite +vue-route 等其他查看的工程

news2025/1/7 9:24:14

create-vue 简介

GitHub:https://github.com/vuejs/create-vue
创建的选项有多个,具体的可以看下方截图,当创建完成的时候可以发现工程中是自带vite的。
在这里插入图片描述
下面对其中的各种内容进行简单的说明


JSX (可以选择,但是我感觉没什么必要)

全称:JavaScript XML
允许你在 JavaScript 中书写类似 XML 的语法,这对于描述 UI 结构非常直观。在 Vue 中,JSX 被用来编写渲染函数(render functions),从而替代或补充传统的模板语法。使用 JSX 可以更直接地利用 JavaScript 的全部功能,例如条件渲染、列表渲染、事件处理等,使代码更具表现力和灵活性。

举例

常规的

<template>
  <div>
    <h1>{
  { title }}</h1>
    <button @click="handleClick">点击我</button>
    <ul>
      <li v-for="item in items" :key="item.id">{
  { item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      title: 'Hello Vue!',
      items: [
        {
      id: 1, name: 'Item One' },
        {
      id: 2, name: 'Item Two' },
      ],
    };
  

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

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

相关文章

RIP配置实验

RIP配置实验 案例简介 天一公司下属三个分公司&#xff0c;属于不同的地区&#xff0c;三个公司之间用路由器连接&#xff0c;路由器名称分别为分别为 Router0、Router1、Router2&#xff0c;请把一公司的部门pc0,通过二公司路由器&#xff0c;连接三公司的部门pc1,公司之间通…

video.js视频播放上手

html案例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>videojs视频播放</title> </head> <link href"https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.cs…

Introducing Optimization

Chapter6&#xff1a;Introducing Optimization 声明&#xff1a;本篇博客笔记来源于《Neural Networks from scratch in Python》&#xff0c;作者的youtube 其实关于神经网络的入门博主已经写过几篇了&#xff0c;这里就不再赘述&#xff0c;附上链接。 1.一文窥见神经网络 2…

解决Git中没有小绿勾与红叉叉的问题

一、检查自己的软件 必须安装Git和Tortoisegit&#xff08;也就是俗称的小乌龟&#xff09;这两个软件。 Git的下载地址&#xff1a; CNPM Binaries Mirrorhttps://registry.npmmirror.com/binary.html?pathgit-for-windows/ 寻找与自己电脑相配的软件版本就可以了。 Tor…

向量数据库技术

前言 这里有一些狗&#xff0c;熟悉犬类的朋友应该能很快区分出它们的品种&#xff0c;我们之所以能做到这一点&#xff0c;是因为我们会从不同的角度来观察它们的特征。 比如体型的大小&#xff0c;如果我们使用一个坐标轴来表示这个特征&#xff0c;这些狗将落在不同的坐标点…

算法攻略:顺序表的进阶之路——移除元素

题目如下&#xff1a; 思路&#xff1a; 双指针法 nums[src] val&#xff0c;srcnums[src] ! val&#xff0c;src的值赋值给dst&#xff0c;src和dst都 注&#xff1a; 1&#xff09;双指针法&#xff1a;只是抽象出了两个指向数组的变量&#xff0c;并不是真的指针。 2&#…

docker Error response from daemon

问题 Error response from daemon: Get "https://index.docker.io/v1/search?qnginx&n25": read tcp 192.168.50.233:54354->54.198.86.24:443: read: connection reset by peer Unable to find image redis:latest locally docker: Error response from d…

【HTML】Day02

【HTML】Day02 1. 列表标签1.1 无序列表1.2 有序列表1.3 定义列表 2. 表格标签2.1 合并单元格 3. 表单标签3.1 input标签基本使用3.2 上传多个文件 4. 下拉菜单、文本域5. label标签6. 按钮button7. div与span、字符实体字符实体 1. 列表标签 作用&#xff1a;布局内容排列整齐…

iOS 11 中的 HEIF 图像格式 - 您需要了解的内容

HEIF&#xff0c;也称为高效图像格式&#xff0c;是iOS 11 之后发布的新图像格式&#xff0c;以能够在不压缩图像质量的情况下以较小尺寸保存照片而闻名。换句话说&#xff0c;HEIF 图像格式可以具有相同或更好的照片质量&#xff0c;同时比 JPEG、PNG、GIF、TIFF 占用更少的设…

【MATLAB APP Designer】小波阈值去噪(第一期)

代码原理及流程 小波阈值去噪是一种信号处理方法&#xff0c;用于从信号中去除噪声。这种方法基于小波变换&#xff0c;它通过将信号分解到不同的尺度和频率上来实现。其基本原理可以分为以下几个步骤&#xff1a; &#xff08;1&#xff09;小波变换&#xff1a;首先对含噪信…

NCCL源码解读3.1:double binary tree双二叉树构建算法,相比ring环算法的优势

目录 一、双二叉树出现的原因 二、双二叉树介绍 三、双二叉树大规模性能 四、双二叉树源码解读 双二叉树注意事项 核心逻辑 源码速递 视频分享在这&#xff0c;未完待补充&#xff1a; 3.1 NCCL源码解读双二叉树构建算法&#xff0c;double binary tree相比ring环算法的…

Linux部署web项目【保姆级别详解,Ubuntu,mysql8.0,tomcat9,jdk8 附有图文】

文章目录 部署项目一.安装jdk1.1 官网下载jdk81.2 上传到Linux1.3 解压1.4 配置环境变量1.5 查看是jdk是否安装成功 二.安装TomCat2.1 官网下载2.2 上传到Linux2.3 解压2.4配置2.5 启动Tomcat2.6 验证是否成功 三.安装mysql四.部署javaweb项目4.1 打包4.2 启动tomcat 部署项目 …

unity中的UI系统---GUI

一、工作原理和主要作用 1.GUI是什么&#xff1f; 即即时模式游戏用户交互界面&#xff08;IMGUI&#xff09;&#xff0c;在unity中一般简称为GUI&#xff0c;它是一个代码驱动的UI系统。 2.GUI的主要作用 2.1作为程序员的调试工具&#xff0c;创建游戏内调测试工具 2.2为…

MySQL 【多表查询】

一 . 概述 多表关系&#xff1a; 一对多(多对一) &#xff0c; 多对多 &#xff0c;一对一 1&#xff09; 一对一 案例: 用户 与 用户详情的关系 关系: 一对一关系&#xff0c;多用于单表拆分&#xff0c;将一张表的基础字段放在一张表中&#xff0c;其他详情字段放在另 一张表…

【大模型】ChatGPT 数据分析与处理使用详解

目录 一、前言 二、AI 大模型数据分析介绍 2.1 什么是AI数据分析 2.2 AI数据分析与传统数据分析对比 2.2.1 差异分析 2.2.2 优劣势对比 2.3 AI大模型工具数据分析应用场景 三、AI大模型工具数据分析操作实践 3.1 ChatGPT 常用数据分析技巧操作演示 3.1.1 快速生成数据…

【面试系列】深入浅出 Spring Boot

熟悉SpringBoot&#xff0c;对常用注解、自动装配原理、Jar启动流程、自定义Starter有一定的理解&#xff1b; 面试题 Spring Boot 的核心注解是哪个&#xff1f;它主要由哪几个注解组成的&#xff1f;Spring Boot的自动配置原理是什么&#xff1f;你如何理解 Spring Boot 配置…

【Java项目】基于SpringBoot的【新生宿舍管理系统】

【Java项目】基于SpringBoot的【新生宿舍管理系统】 技术简介&#xff1a;本系统使用采用B/S架构、Spring Boot框架、MYSQL数据库进行开发设计。 系统简介&#xff1a;管理员登录进入新生宿舍管理系统可以查看首页、个人中心、公告信息管理、院系管理、班级管理、学生管理、宿舍…

【AI学习】Transformer深入学习(二):从MHA、MQA、GQA到MLA

前面文章&#xff1a; 《Transformer深入学习&#xff08;一&#xff09;&#xff1a;Sinusoidal位置编码的精妙》 一、MHA、MQA、GQA 为了降低KV cache&#xff0c;MQA、GQA作为MHA的变体&#xff0c;很容易理解。 多头注意力&#xff08;MHA&#xff09;&#xff1a; 多头注…

IP5385应用于移动电源快充方案的30W到100W大功率电源管理芯片

英集芯IP5385一款专为智能手机&#xff0c;平板&#xff0c;移动电源&#xff0c;手持电动工具等便携式电子设备提供快充解决方案的30W到100W大功率电源管理SOC芯片。集成了快充协议芯片、MCU、同步升降压控制器等多种功能于一个封装内部&#xff0c;有效减小了整体方案的尺寸。…