当前位置: 首页 > news >正文

【vue】用vite创建vue项目

  • 前置要求
    • 要有Node.js

1. 用vite创建vue项目

  • 在cmd中,进入一个文件夹
    • 在文件资源管理器上面的文件目录中,输入cmd,回车
    • 在cmd中通过cd命令进入对应文件夹

创建项目

npm create vite@latest # 创建项目

创建项目过程中的一些选项

Ok to proceed? (y) y
√ Project name: ... demo  #项目名称为demo
√ Select a framework: » Vue   #用vue框架
√ Select a variant: » JavaScript   #用Javascript

之后继续运行如下命令,便可运行项目

cd demo
npm install
npm run dev

之后会出现如下界面
在这里插入图片描述
出现下图,说明项目创建成功
在这里插入图片描述
项目文件如下
在这里插入图片描述

2. 删除不必要的文件

在这里插入图片描述
把文件引用也一并删除,

  • 删除App.vue中的import HelloWorld from './components/HelloWorld.vue'
  • 删除main.js中的import './style.css'

现在,该项目是一个空项目了

3. 在哪里添加内容?

删除App.vue中默认的模板内容,默认的样式

在这里插入图片描述
修改为如下内容
在这里插入图片描述
发现网页变了
在这里插入图片描述

4. 把已有项目导入vue中

把【vue】记事本案例导入vue中

在这里插入图片描述

修改App.vue如下

<script setup>
import { reactive } from "vue"
const data = reactive({content: "",list: ["1", "2", "3"],
})const add = () => {data.list.push(data.content)console.log(data.list)
}const remove = (index) => {data.list.splice(index, 1)
}const clear = () => {data.list = []
}
</script><template><input type="text" v-model="data.content" placeholder="输入要添加进list的内容"><button @click="add">添加</button><p>list中的内容如下:</p><ul><li v-for="(item, index) in data.list" :key="index"><!-- 从 list 数组中移除从 index 开始的一个元素。 -->{{ item }}<button @click="remove(index)">删除</button></li></ul><p>当前list的长度为:{{ data.list.length }}</p><button @click="clear">清空</button>
</template><style lang="scss" scoped></style>

显示效果
在这里插入图片描述

参考

https://www.bilibili.com/video/BV1nV411Q7RX

相关文章:

【vue】用vite创建vue项目

前置要求 要有Node.js 1. 用vite创建vue项目 在cmd中&#xff0c;进入一个文件夹 在文件资源管理器上面的文件目录中&#xff0c;输入cmd&#xff0c;回车在cmd中通过cd命令进入对应文件夹 创建项目 npm create vitelatest # 创建项目创建项目过程中的一些选项 Ok to pro…...

内网渗透-内网环境下的横向移动总结

内网环境下的横向移动总结 文章目录 内网环境下的横向移动总结前言横向移动威胁 威胁密码安全 威胁主机安全 威胁信息安全横向移动威胁的特点 利用psexec 利用psexec.exe工具msf中的psexec 利用windows服务 sc命令 1.与靶机建立ipc连接2.拷贝exe到主机系统上3.在靶机上创建一个…...

Linux命令学习—linux 的常用命令

1.1、改变目录 cd 目录的表达方法&#xff1a; /根目录 .当前目录 .. 上一级目录 ~家目录 #cd / 进入到系统根目录 #cd . 进入当前目录 #cd .. 进入当前目录的父目录&#xff0c;返回上层目录 #cd /tmp 进入指定目录/tmp #cd ~ 进入当前用户的家目录 #cd …...

【Git教程】(十)版本库之间的依赖 —— 项目与子模块之间的依赖、与子树之间的依赖 ~

Git教程 版本库之间的依赖 1️⃣ 与子模块之间的依赖2️⃣ 与子树之间的依赖&#x1f33e; 总结 在 Git 中&#xff0c;版本库是发行单位&#xff0c;代表的是一个版本&#xff0c;而分支或标签则只能被创建在版本库这个整体中。如果一个项目中包含了若干个子项目&#xff0c;…...

最新版IntelliJ IDEA 2024.1安装和配置教程 详细图文解说版安装教程

IntelliJ IDEA 2024.1 最新版如何快速入门体验?IntelliJ IDEA 2024.1 安装和配置教程 图文解说版 文章目录 IntelliJ IDEA 2024.1 最新版如何快速入门体验?IntelliJ IDEA 2024.1 安装和配置教程 图文解说版前言 第一步&#xff1a; IntelliJ IDEA 2024.1安装教程第 0 步&…...

JVM常用参数一

jvm启动参数 JVM&#xff08;Java虚拟机&#xff09;的启动参数是在启动JVM时可以设置的一些命令行参数。这些参数用于指定JVM的运行环境、内存分配、垃圾回收器以及其他选项。以下是一些常见的JVM启动参数&#xff1a; -Xms&#xff1a;设置JVM的初始堆大小。 -Xmx&#xff1…...

分布式锁-redission可重入锁原理

5.3 分布式锁-redission可重入锁原理 在Lock锁中&#xff0c;他是借助于底层的一个voaltile的一个state变量来记录重入的状态的&#xff0c;比如当前没有人持有这把锁&#xff0c;那么state0&#xff0c;假如有人持有这把锁&#xff0c;那么state1&#xff0c;如果持有这把锁的…...

Android Gradle开发与应用 (八) :Kotlin DSL

1. 前言 本文介绍了Gradle Kotlin DSL相关的一些知识点 2. DSL是什么 DSL是为特定领域设计的专门的语言&#xff0c;也就是设计了一门语言&#xff0c;然后解决某个特定的领域的特定问题。 2.1 举例说明 以下的这些都可以称之为DSL 正则表达式 :用于文本处理的特定语言SQ…...

phpstorm 快捷键

PHPstorm最常用的快捷键&#xff0c;提高开发效率 - 知乎 (zhihu.com) 四年精华PHP技术文章整理合集——PHP框架篇 (qq.com) 四年精华PHP技术文合集——微服务架构篇 (qq.com) Vue3 打印票据 预览的库&#xff1a;vue3打印解决方案&#xff1a;Vue-Plugin-HiPrint - 掘金 (j…...

浦大喜奔APP8.0智能升级,发力数字金融深化五大金融篇章服务

1. 浦大喜奔立足科技赋能持续迭代升级&#xff0c;筑牢用户体验护城河 浦发信用卡中心坚持数字科技与客户体验双轮驱动&#xff0c;以科技赋能发展&#xff0c;优化整体系统性能&#xff0c;全方位支撑浦大喜奔 APP提高线上客户服务能力与体验&#xff0c;积极服务民生消费&a…...

自然语言处理、大语言模型相关名词整理

自然语言处理相关名词整理 零样本学习&#xff08;zero-shot learning&#xff09;词嵌入&#xff08;Embedding&#xff09;为什么 Embedding 搜索比基于词频搜索效果好&#xff1f; Word2VecTransformer检索增强生成&#xff08;RAG&#xff09;幻觉采样温度Top-kTop-p奖励模…...

移动开发避坑指南——内存泄漏

在日常编写代码时难免会遇到各种各样的问题和坑&#xff0c;这些问题可能会影响我们的开发效率和代码质量&#xff0c;因此我们需要不断总结和学习&#xff0c;以避免这些问题的出现。接下来我们将围绕移动开发中常见问题做出总结&#xff0c;以提高大家的开发质量。本系列文章…...

太好玩了,我用 Python 做了一个 ChatGPT 机器人

毫无疑问&#xff0c;ChatGPT 已经是当下编程圈最火的话题之一&#xff0c;它不仅能够回答各类问题&#xff0c;甚至还能执行代码&#xff01; 或者是变成一只猫 因为它实在是太好玩&#xff0c;我使用Python将ChatGPT改造&#xff0c;可以实现在命令行或者Python代码中调用。…...

STM32存储左右互搏 SDIO总线读写SD/MicroSD/TF卡

STM32存储左右互搏 SDIO总线读写SD/MicroSD/TF卡 SD/MicroSD/TF卡是基于FLASH的一种常见非易失存储单元&#xff0c;由接口协议电路和FLASH构成。市面上由不同尺寸和不同容量的卡&#xff0c;手机领域用的TF卡实际就是MicroSD卡&#xff0c;尺寸比SD卡小&#xff0c;而电路和协…...

累积分布函数图(CDF)的介绍、matlab的CDF图绘制方法(附源代码)

在对比如下两个误差的时候&#xff0c;怎么直观地分辨出来谁的误差更低一点&#xff1f;&#xff1a; 通过这种误差时序图往往不容易看出来。 但是如果使用CDF图像&#xff0c;以误差绝对值作为横轴&#xff0c;以横轴所示误差对应的累积概率为纵轴&#xff0c;绘制曲线图&am…...

代码随想录算法训练营第四十一天|343.整数拆分、96不同的二叉搜索树

文档链接&#xff1a;https://programmercarl.com/ LeetCode343.整数拆分 题目链接&#xff1a;https://leetcode.cn/problems/integer-break/ 思路&#xff1a; j * (i - j) 是单纯的把整数拆分为两个数相乘&#xff0c;而j * dp[i - j]是拆分成两个以及两个以上的个数相乘…...

全量知识系统 程序详细设计之 统一资产模型(QA-SmartChat)

Q1. 下面我们聊聊整个全知系统的设计 的矩阵和函数&#xff0c;矩阵表示的是“活物”&#xff0c;分别 类似 一个基因的活性、一个实体的辨识度和某种特征的可区分度。 函数的可微、可积和可导性 则表示 运动的控制方式 在全知系统设计中&#xff0c;矩阵和函数是两个核心的组…...

已解决org.springframework.web.client.HttpClientErrorException: 400异常的正确解决方法,亲测有效!!!

已解决org.springframework.web.client.HttpClientErrorException: 400异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 文章目录 问题分析 报错原因 解决思路 解决方法 总结 在日常开发过程中&#xff0c;通过Spring框架提供的RestTemplat…...

内网渗透-Windows内网渗透

内网渗透-Windows内网渗透 文章目录 内网渗透-Windows内网渗透前言一、信息收集 1.1、SPN1.2、端口连接1.3、配置文件1.4、用户信息1.6、会话收集1.7、凭据收集 navicat&#xff1a;SecureCRT&#xff1a;Xshell&#xff1a;WinSCP&#xff1a;VNC: 1.8、DPAPI1.9、域信任1.10、…...

机器人方向控制中应用的磁阻角度传感芯片

磁阻传感器提供的输出信号几乎不受磁场变动、磁温度系数、磁传感器距离与位置变动影响&#xff0c;可以达到高准确度与高效能&#xff0c;因此相当适合各种要求严格的车用电子与工业控制的应用。所以它远比采用其它传感方法的器件更具有优势。 机器人的应用日渐广泛&#xff0…...

如何在树莓派安装Nginx并实现固定公网域名访问本地静态站点

文章目录 1. Nginx安装2. 安装cpolar3.配置域名访问Nginx4. 固定域名访问5. 配置静态站点 安装 Nginx&#xff08;发音为“engine-x”&#xff09;可以将您的树莓派变成一个强大的 Web 服务器&#xff0c;可以用于托管网站或 Web 应用程序。相比其他 Web 服务器&#xff0c;Ngi…...

Ubuntu与主机windows共享文件夹

一、创建共享文件夹&#xff1a; 虚拟机->设置->选项->共享文件夹->总是启用->选择本地的共享文件夹&#xff08;如E&#xff1a;\Share&#xff09;->确定。 二、设置挂载&#xff1a; 首先赋予/etc/fstab文件可编辑的权限&#xff1b; sudo chmod 777 /…...

(四)C++自制植物大战僵尸游戏启动流程

植物大战僵尸游戏开发教程专栏地址http://t.csdnimg.cn/ErelL 一、启动方式 鼠标左键单机VS2022上方工具栏中绿色三角按钮&#xff08;本地Windows调试器&#xff09;进行项目启动。第一次启动项目需要编译项目中所有代码文件&#xff0c;编译生成需要一定的时间。不同性能的电…...

华为的AI战略地图上,才不是只有大模型

图片来源&#xff1a;pixabay© 钛媒体ToB深水区 图片来源&#xff1a;pixabay 大模型火热了一年&#xff0c;现在还没做AI化改造的企业&#xff0c;就像是工业革命浪潮伊始与火车赛跑的那辆马车。 最早的蒸汽火车缓慢又笨重&#xff0c;甚至铁轨上还预留了马匹行走的空…...

采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示

采用C#.Net JavaScript 开发的云LIS系统源码 二级医院应用案例有演示 一、系统简介 云LIS是为区域医疗提供临床实验室信息服务的计算机应用程序&#xff0c;可协助区域内所有临床实验室相互协调并完成日常检验工作&#xff0c;对区域内的检验数据进行集中管理和共享&#xff0…...

Vue3(三):生命周期、路由、自定义hooks

这里终于明白了为什么一直有这个语法报错&#xff0c;就是在提示你哪里错的地方上方注释一行/*eslint-disable*/&#xff0c;之前一直警告这个错误感谢老师&#xff01; 一、vue2和vue3生命周期 还有一个问题就是父组件和子组件哪个先挂载完毕呢&#xff1f;答案是子组件先挂…...

UE4_导入内容_骨架网格体

FBX 导入支持 骨架网格体&#xff08;Skeletal Mesh&#xff09; 。这提供了一种简化的处理流程来将有动画的网格体从 3D应用程序中导入到虚幻引擎内&#xff0c;以便在游戏中使用。除了导入网格体外&#xff0c;如果需要&#xff0c;动画和变形目标都可以使用FBX格式 在同一文…...

第十五届蓝桥杯c++b组赛后复盘和真题展示

题目变成八道了&#xff0c;分数一百分可能&#xff0c;感觉拿奖难度还是很高 第一题是一个简单的握手问题 答案算出来1204&#xff0c;纯手写 第二题是 物理题 纯蒙&#xff0c;随便猜了个轨迹&#xff0c;答案具体忘了&#xff0c;最后是 .45 第三题暴力 第四题 我是傻逼…...

代码随想录 二叉树—二叉搜索树中的搜索

思路&#xff1a;当节点为空或者等于目标值&#xff0c;直接返回。由于是二叉搜索树&#xff0c;特点是左子树的值都小于根节点值&#xff0c;右子树的值均大于根节点&#xff0c;那么&#xff0c;左右子树的构建可以通过值的判断来递归调用。 c题解&#xff1a; /*** Defini…...

⑤-1 学习PID--什么是PID

​ PID 算法可以用于温度控制、水位控制、飞行姿态控制等领域。后面我们通过PID 控制电机进行说明。 自动控制系统 在直流有刷电机的基础驱动中&#xff0c;如果电机负载不变&#xff0c;我们只要设置固定的占空比&#xff08;电压&#xff09;&#xff0c;电机的速度就会稳定在…...

专业集团门户网站建设方案/扬州网络优化推广

1 第2-3课&#xff1a;模板引擎 Thymeleaf 基础使用 1.1 模板引擎 模板引擎是为了使用户界面与业务数据&#xff08;内容&#xff09;分离而产生的&#xff0c;它可以生成特定格式的文档&#xff0c;用于网站的模板引擎就会生成一个标准的 HTML 文档。 模板引擎的实现方…...

网站专业建设/百度收录入口在哪里查询

1确保服务器端数据库服务已经启动 开始->所有程序->Microsoft SQL Server 2008->Configutation Tools&#xff0c;打开SQL Server Configuration Manager&#xff0c;点击SQL Server Services&#xff0c;查看数据库服务是否已经启动&#xff0c;如果服务未开启&#…...

python下载安装教程/seo网络推广招聘

1.模块化&#xff0c;组件化&#xff0c;插件化 链接: 什么是模块化&#xff0c;组件化&#xff0c; 插件化&#xff1f; 2.iOS组件化思路 链接: iOS组件化思路&#xff0d;大神博客研读和思考 链接: iOS应用架构谈 组件化方案...

东营做网站优化多少钱/广州网络营销推广公司

实验的相关情况介绍两台RHEL4 VM&#xff1a;一台为FTP服务器&#xff1b;一台为FTP客户机&#xff1b;RHEL4安装光盘或ISO镜像。实验结果&#xff08;含详细操作步骤&#xff1a;&#xff09;&#xff1a;<?xml:namespace prefix o ns "urn:schemas-microsoft-com:…...

自助网站建设方法/代理推广

一、创建项目&#xff1a; 1、建立新的动态web项目&#xff1a; 2、为项目命名为&#xff1a;SpringMVC_01 3、添加tomcat运行时环境\依赖库 如果是MyEclipse的话创建web项目时就不需要此步骤 右键项目&#xff0c;点击Build Path->Add Librares: 添加完后会多出tomcat 的 …...

美食制作网站模板免费下载/武汉新一轮疫情

找到c盘下相应的路径&#xff0c;修改hosts文件 设置相应的映射名称写编写的是eureka的hostname...