【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.hqwc.cn/news/621083.html

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

相关文章

pnpm 使用 workspace 报错 ERR_INVALID_THIS

有时候真的感觉如果有一个老师指路&#xff0c;那么遇到的坑真的会少很多。 错误示例&#xff1a; GET https://registry.npmjs.org/rollup%2Fplugin-typescript error (ERR_INVALID_THIS). Will retry in 10 seconds. 2 retries left.原因是什么&#xff1f;原因就是 pnpm 的…

Python数据容器(一)

一.数据容器入门 1.Python中的数据容器&#xff1a;一种可以容纳多份数据的数据类型&#xff0c;容纳的每一份数据称之为1个元素&#xff0c;每一个元素&#xff0c;可以是任意类型的数据&#xff0c;如字符串、数字、布尔等。 2.数据容器根据特点的不同&#xff0c;如&#…

Python基于flask的豆瓣电影分析可视化系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

spring02:DI(依赖注入)

spring02&#xff1a;DI&#xff08;依赖注入&#xff09; 文章目录 spring02&#xff1a;DI&#xff08;依赖注入&#xff09;前言&#xff1a;一、构造器注入&#xff08;constructor&#xff09;二、set注入&#xff1a;分析&#xff1a; 1. Student类&#xff1a;2. Addres…

Qt教程3-Ubuntu(x86_64)上配置arm64(aarch64)交叉编译环境及QT编译arm64架构工程

汇创慧玩 写在前面1. 查看系统架构相关指令2. ARM64交叉编译器环境搭建3. Qt编译arm64环境搭建4. 配置 Qt的本地aarch64交叉编译器5. 工程建立及编译验证 写在前面 苦辣酸甜时光八载&#xff0c;春夏秋冬志此一生 Qt简介&#xff1a; Qt&#xff08;官方发音 [kju:t]&#xff…

zookeeper分布式应用程序协调服务+消息中间件kafka分布式数据处理平台

一、zookeeper基本介绍 1.1 zookeeper的概念 Zookeeper是一个开源的分布式的&#xff0c;为分布式框架提供协调服务的Apache项目。 是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件&#xff0c;提供的功能包括&#xff1a;配置维护、域名服务、…

Redis实现延迟任务的几种方案

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1.前言 2.Redis如何实现延迟任务&#xff1f; 3.代码实现 3.1. 过期键通知事…

osg渲染过程

目录 1、渲染最简单代码 2、详解run方法 3、详细过程 4、回调函数 5、Node Visitor 1、渲染最简单代码 2、详解run方法 3、详细过程 3.1 advance()方法 进行帧计数 3.2 eventTraversal() eventTraversal()响应用户操作,eventTraversal()遍历的是事件队列&#xff0c;而…

力扣LeetCode138. 复制带随机指针的链表 两种解法(C语言实现)

目录 题目链接 题目分析 题目定位&#xff1a; 解题思路 解题思路1&#xff08;粗暴但是复杂度高&#xff09; 解题思路2&#xff08;巧妙并且复杂度低&#xff09; 题目链接 138. 复制带随机指针的链表https://leetcode-cn.com/problems/copy-list-with-random-pointer/ …

SpringBoot的旅游管理系统+论文+ppt+免费远程调试

项目介绍: 基于SpringBoot旅游网站 旅游管理系统 本旅游管理系统采用的数据库是Mysql&#xff0c;使用SpringBoot框架开发。在设计过程中&#xff0c;充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。 &#xff08;1&…

QQ 邮箱使用 SMTP 发送邮件报错:550 The From header is missing or invalid

文章目录 场景描述问题排查根据提示查看原因查看封装的 message 个人简介 场景描述 QQ 邮箱使用 SMTP 发送邮件报错&#xff1a;550 The From header is missing or invalid&#xff1a; 失败原因&#xff1a;(550, bThe "From" header is missing or invalid. Ple…

AI大模型探索之路-应用篇12:AI大模型应用之向量数据库选型

目录 前言 一、什么是向量数据库&#xff1f; 二、向量数据库的应用场景 1. 图像检索 2. 推荐系统 3. 自然语言处理 三、向量数据库在AI大模型中的应用 1. 训练数据的索引和检索 2. 特征存储和管理 3. 模型中间结果的存储 4. 长上下文的记录和检索 5. 本地知识库的构…