【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

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

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

相关文章

Fake-SMS恶意软件混淆分析——低代码的时代来了

写在前面的话 在安全社区中&#xff0c;只要聊到开源代码使用方面的话题&#xff0c;就肯定会聊到安全问题。虽然使用开源代码通常会被认为是安全的&#xff0c;但我们需要清楚的是&#xff0c;与非FOSS&#xff08;自由与开源软件&#xff09;解决方案相比&#xff0c;开源软…

Hive on spark源码编译与调优

文章目录 一、编译环境准备1、hadoop和hive安装2、编译环境搭建3、Hive on Spark配置 二、Hive相关问题1、Hadoop和Hive的兼容性问题1.1 问题描述1.2 解决思路1.3 修改并编译Hive源码 2、Hive插入数据StatsTask失败问题3.1 问题描述3.2 解决思路 3、Hive和Spark兼容性问题3.1 问…

【Android surface 】二:源码分析App的surface创建过程

文章目录 画布surfaceViewRoot的创建&setView分析setViewrequestLayoutViewRoot和WMS的关系 activity的UI绘制draw surfacejni层分析Surface无参构造SurfaceSessionSurfaceSession_init surface的有参构造Surface_copyFromSurface_writeToParcelSurface_readFromParcel 总结…

【Hive上篇: 一篇文章带你使用Hive!深入了解Hive!学会Hive!】

前言&#xff1a; &#x1f49e;&#x1f49e;大家好&#xff0c;我是书生♡&#xff0c;本篇文章主要分享的是大数据开发中hive的相关技术&#xff0c;什么是Hive&#xff1f;怎么使用Hive&#xff1f;怎么安装部署&#xff1f;希望大家看完这篇文章会有所帮助。也希望大家能够…

运筹优化库Qaekwy入门——以指派问题为例

文章目录 1. 什么是 Qaekwy?2. 安装方法(Windows)3. 指派问题3.1 描述问题3.2 建立问题模型3.3 模型求解1. 什么是 Qaekwy? 在 2023 年 9 月 Github 上开源了一个新的优化求解器 Qaekwy,根据官方对 Qaekey 的介绍,该求解器严格来说是一个 Python 客户端,通过 Python 接…

Depth maps转点云

前言 本文主要记录一下如何可视化相机位姿&#xff0c;如何用Blender得到的深度图反投影到3D空间&#xff0c;得到相应的点云。 Refernce https://github.com/colmap/colmap/issues/1106 https://github.com/IntelRealSense/librealsense/issues/12090 https://medium.com/yod…

【详细讲解下Photoshop】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

大模型推理过程

在人工智能领域&#xff0c;尤其是在机器学习和深度学习中&#xff0c;“推理”&#xff08;Inference&#xff09;是指使用训练好的模型来进行预测或决策的过程。在模型被训练以学习数据的特征和模式之后&#xff0c;推理就是将实际的数据输入模型&#xff0c;以获得输出结果的…

鸿蒙 Failed :entry:default@CompileResource...

Failed :entry:defaultCompileResource... media 文件夹下有文件夹或者图片名称包含中文字符 rawfile 文件夹下文件名称、图片名称不能包含中文字符

地理空间分析中的深度学习应用

深度学习与地理信息系统 (GIS) 的结合彻底改变了地理空间分析和遥感的格局。这种结合将遥感和地理空间分析领域带到了全球研究人员和科学家的前沿。 深度学习是机器学习的一个复杂子集&#xff08;更多关于机器学习的内容&#xff0c;请参阅我的其他文章&#xff09;&#xff0…

【JVM】JVM调优可配置参数及配置时机和原则

接着上一篇不同场景下JVM调优手段及代码优化建议,接着来JVM调优可配置参数及配置时机和原则。以在JDK 8为例&#xff0c;JVM提供了一系列的可配置参数&#xff0c;这些参数可以帮助开发者和系统管理员针对不同的应用场景进行性能调优。以下是按维度划分的一些关键参数及其用途、…

JS中的常见二进制数据格式

格式描述用途示例ArrayBuffer固定长度的二进制数据缓冲区&#xff0c;不直接操作具体的数据&#xff0c;而是通过类型数组或DataView对象来读写用于存储和处理大量的二进制数据&#xff0c;如文件、图像等let buffer new ArrayBuffer(16);TypedArray基于ArrayBuffer对象的视图…

绿色地狱steam叫什么 绿色地狱steam怎么搜

绿色地狱steam叫什么 绿色地狱steam怎么搜 《绿色地狱》是一款以亚马逊雨林为背景的开放世界生存模拟游戏。玩家们扮演一名被困在丛林中的冒险者&#xff0c;玩家在游戏内需要学习采集资源、建造庇护所、狩猎和烹饪食物&#xff0c;同时要面对丛林中的危险和挑战&#xff0c;…

LeetCode 707.设计链表

LeetCode 707.设计链表 1、题目 力扣题目链接&#xff1a;707. 设计链表 你可以选择使用单链表或者双链表&#xff0c;设计并实现自己的链表。 单链表中的节点应该具备两个属性&#xff1a;val 和 next 。val 是当前节点的值&#xff0c;next 是指向下一个节点的指针/引用。…

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

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

langchain 链式写法-使用本地 embedding 模型,Faiss 检索

目录 示例代码1 示例代码2 示例代码1 使用本地下载的 embedding 模型去做 embedding&#xff0c;然后从中查相似的 import os from dotenv import load_dotenv from langchain_community.llms import Tongyi load_dotenv(key.env) # 指定加载 env 文件 key os.getenv(DAS…

ansible创建用户账户和更新ansible库的密钥

1.创建⽤户帐户 从 http://materials/user_list.yml 下载要创建的⽤户的列表&#xff0c;并将它保存到 /home/greg/ansible 在本次考试中使⽤在其他位置创建的密码库 /home/greg/ansible/locker.yml 。创建名为 /home/greg/ansible/users.yml 的 playbook &#xff0c;从⽽…

探索顶级短视频素材库:多样化选择助力创作

在数字创作的浪潮中&#xff0c;寻找优质的短视频素材库是每位视频制作者的必经之路。多种短视频素材库有哪些&#xff1f;这里为您介绍一系列精选的素材库&#xff0c;它们不仅丰富多样&#xff0c;而且高质量&#xff0c;能极大地提升您的视频创作效率和质量。 1.蛙学网 蛙学…

python内置函数delattr(),dict()详解

Python 内置函数 delattr() 1. 功能和用途 delattr() 函数用于删除对象的属性。它相当于执行 del x.foobar&#xff0c;其中 x 是对象&#xff0c;foobar 是要删除的属性名。 2. 语法 以下是 delattr() 方法的语法&#xff1a; delattr(object, name)3. 参数说明 object:…

VsCode无法使用nvm

问题&#xff1a; zsh: command not found nvm 初级的解决办法在vsCode控制台使用 source ~/.nvm/nvm.sh 存在问题&#xff1a;每次重新打开控制台都需要重新使用 参考文档&#xff1a; ​​​​​​BUG解决&#xff1a;nvm安装后提示没有-CSDN博客 升级办法&#xff1a; 来…