【第7章】Vue之第一个Vue程序(Vue创建)

文章目录

  • 前言
  • 一、创建
    • 1. 命令行
    • 2. 创建
    • 3. 安装依赖
  • 二、启动
  • 三、访问
  • 总结


前言

接下来我们通过VSCode来创建我们的第一个Vue应用程序。


一、创建

1. 命令行

Terminal>New Terminal

2. 创建

#这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。
npm create vue@latest

如果不确定是否要开启某个功能,你可以直接按下回车键选择 No。

在这里插入图片描述

创建完成后,就能看到新创建的工程已经出现在工作区

在这里插入图片描述

3. 安装依赖

cd <your-project-name>
npm install

在这里插入图片描述

二、启动

npm run dev

在这里插入图片描述

三、访问

http://localhost:5173/
在这里插入图片描述


总结

回到顶部
到这里,我们的第一个Vue程序就创建完成并成功启动了,是不是很简单。

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

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

相关文章

中介子方程十六

X$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXtXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$XFX$XEXyXαXiX$XαXiXrXkXtXyX$XpXVX$XdXuXWXtXWXuXdX$XVXpX$XyXtXkXrXiXαX$XiXαXyXEX$XαXηXtXαX$XWXyX$XyXWX$XpXαXqXηX$XeXαXhX$XdX$XpX$XdX$XyXeXαX$XEXyXαXiX$XαXiXrX…

如何使用Python中的type()函数和isinstance()函数

在Python中&#xff0c;type()函数和isinstance()函数都用于确定一个对象的类型&#xff0c;但它们在用法和目的上有所不同。 1. type()函数 type()函数返回对象的数据类型&#xff08;或类&#xff09;。它接受一个参数&#xff08;即要检查的对象&#xff09;&#xff0c;并…

Web前端Block:深度探索与未来挑战

Web前端Block&#xff1a;深度探索与未来挑战 Web前端Block&#xff0c;作为现代网页开发的核心组件&#xff0c;承载着展现页面内容、实现交互逻辑的重要任务。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;对其展开深入探讨&#xff0c;并揭示其中蕴含的挑战…

【Pr剪辑】工具栏的认识

目录 1.选择工具&#xff08;快捷键V&#xff09;1.1 选择1.2 移动素材1.3 框选1.4缩放1.5复制 2.钢笔工具&#xff08;快捷键P&#xff09;3.文字工具&#xff08;T&#xff09;4.剃刀&#xff08;C &#xff09;5.比例拉伸工具&#xff08;R&#xff09;6.波纹编辑工具&#…

HarmongOS打包[保姆级]

创建应用 首先进入 华为开发者联盟-HarmonyOS开发者官网 然后进行登录。 登录成功后&#xff0c;鼠标悬停在在登录右上角那个位置后再点击管理中心&#xff0c;进入下面这个界面。 再点击&#xff1a;应用服务–>应用发布–>新建–>完善信息 构建和生成私钥和证书请求…

惠海 H6213L降压恒压IC 支持3.3V5V12V30V40V60V100V电动车仪表供电稳压芯片方案

H6213L高压降压开关控制器是一款功性能良好的电源管理解决方案。它集成了众多先进的功能&#xff0c;使其在各种高压输入的应用场景中都能表现出色。 首先&#xff0c;H6213L具备高达150V的耐压能力&#xff0c;并支持高达120V的宽压输入范围。这意味着它可以轻松应对各种高压…

云原生系列之Docker常用命令

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列文章目录 云原生之…

解决 Docker Hub 国内无法访问的方法(Docker 镜像下载加速)

docker配置 修改配置文件 vim /etc/docker/daemon.json配置内容如下&#xff1a; {"data-root": "/data/docker","exec-opts": ["native.cgroupdriversystemd"],"registry-mirrors": ["https://9cpn8tt6.mirror.aliy…

PyTorch计算机视觉入门:从官方数据集到自定义数据集的获取

一、PyTorch与计算机视觉简介 PyTorch是一个开源的深度学习框架&#xff0c;其动态图的特性非常适合快速实验和模型原型设计。在计算机视觉任务中&#xff0c;如图像分类、目标检测、图像分割等&#xff0c;PyTorch提供了丰富的API和预训练模型&#xff0c;帮助开发者快速搭建…

极致深耕,打造核心竞争壁垒——探寻蓝思科技穿越周期的密码

作者 | 曾响铃 文 | 响铃说 一家企业&#xff0c;如何才能在时代变幻的风云中不计较一时得失&#xff0c;长期稳健发展&#xff0c;穿越周期&#xff1f;本期主题就来探寻一家在湖南的国际化企业的发展密码。 穿越周期的企业&#xff0c;都在坚持一个驱动发展的“原点” 细…

scrapy爬取豆瓣书单存入MongoDB数据库

scrapy爬取豆瓣书单存入MongoDB数据库 一、安装scrapy库二、创建scrapy项目三、创建爬虫四、修改settings,设置UA,开启管道五、使用xpath解析数据六、完善items.py七、在douban.py中导入DoubanshudanItem类八、爬取所有页面数据九、管道中存入数据,保存至csv文件十、将数据写…

【Windchill监听器、队列、排程】

目录 Windchill监听器 监听器的概念 监听器的监听器实现原理 监听器的客制化 Windchill队列、排程 队列、排程的概念 Windchill常见出厂队列 自定义队列 Windchill 11新增功能 Windchill监听器 监听器的概念 监听器&#xff0c;字面上的理解就是监听观察某个事件&…

数据结构(DS)学习笔记(二):数据类型与抽象数据类型

参考教材&#xff1a;数据结构C语言版&#xff08;严蔚敏&#xff0c;吴伟民编著&#xff09; 工具&#xff1a;XMind、幕布、公式编译器 正在备考&#xff0c;结合自身空闲时间&#xff0c;不定时更新&#xff0c;会在里面加入一些真题帮助理解数据结构 目录 1.1数据…

python之异常机制与常见的异常类型(二)

1、什么是异常&#xff1f; 异常即是一个事件&#xff0c;该事件会在程序执行过程中发生&#xff0c;影响了程序的正常执行。 一般情况下&#xff0c;在Python无法正常处理程序时就会发生一个异常。 异常是Python对象&#xff0c;表示一个错误。 当python脚本发生异常时我们需…

Android 的整体架构

Android 的整体架构由多个层次组成&#xff0c;每个层次负责不同的功能。以下是 Android 的整体架构&#xff1a; 应用层 (Applications) 用户直接与应用层交互。这一层包括所有安装的应用程序&#xff0c;例如电话、短信、电子邮件、浏览器等。 应用框架层 (Application Fram…

FullCalendar日历组件集成实战(15)

背景 有一些应用系统或应用功能&#xff0c;如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件&#xff0c;但功能比较简单&#xff0c;用来做数据展现勉强可用。但如果需要进行复杂的数据展示&#xff0c;以及互动操作如通过点击添加事件&#xff0…

leetcode-05-[242]有效的字母异位词[349]两个数组的交集[202]快乐数[1]两数之和

重点&#xff1a; 哈希表&#xff1a;当我们遇到了要快速判断一个元素是否出现集合里的时候&#xff0c;就要考虑哈希法。 常用数据结构&#xff1a; List 数组 固定大小 如26个字母&#xff0c;10个数字 空间换时间 Set hashset 去重 Map hashmap <K,V>形式 …

java+vue3+el-tree实现树形结构操作

基于springboot vue3 elementPlus实现树形结构数据的添加、删除和页面展示 效果如下 代码如下&#xff0c;业务部分可以自行修改 java后台代码 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.daztk.mes.common.annotation.LogOperation…

C++ UML建模

starUML UML图转C代码 数据流图 E-R图 流程图 整体架构图 ORM关系图 参考 app.asar附件资源可免激活 JHBlog/设计模式/设计模式/1、StarUML使用简明教程.md at master SunshineBrother/JHBlog GitHub C程序员UML实务手册代码 - 开发实例、源码下载 - 好例子网 GitHub -…

leetcode-09-[232]用栈实现队列[225]用队列实现栈[20]有效的括号[1047]删除字符串中的所有相邻重复项

重点&#xff1a; 栈和队列 Java中 栈不建议用stack来实现 建议用 ArrayDeque和Linkedlist来实现 队列建议用ArrayDeque和Linkedlist来实现 两者效率比较&#xff1a; java - Why is ArrayDeque better than LinkedList - Stack Overflow 基于Linkedlist是链表等&#xff0c;除…