Vue3项目的创建与使用

Vue Vue2 Vue3 ,因为 Vue2 已经停止维护,所以我是直接从 Vue3 开始学习的。
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML CSS JavaScript 构建,并提 供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。

1.Vue3环境搭建

使用 Vue 的前提是需要安装 Node.js 环境;创建一个 Vue3 项目必须使用 Node.js10.0 以上的版本。
打开命令行窗口输入 node -v 看看是否安装了 node.js 或版本,,如果版本不对或者没有安装 node.js 则需要进行更新或者下载
除了检查 node -v 外,还需要输入 npm -v 看看是否也安装了 npm 。因为 npm node 包管理器,安装node.js时候一起配套安装的;所以一般来说都是有的。
安装 node.js
链接 : Node 官网链接
node.js 的安装类似 JDK的安装,安装步骤详见 Node.js 安装及环境配置超详细教程【 Windows 系统】

2.Vue-cli 脚手架工具的安装

打开命令行窗口,输入命令安装 Vue-cli
npm install --g vue-cli
vue-cli 安装好后,便可以直接使用它来创建 Vue 项目

3.创建项目

3.1 创建一个项目目录
 在该目录里打开命令行窗口,该目录将作为Vue3 的项目目录
3.2 命令行输入命令,按指示创建项目
1. 输入命令,创建项目
npm create vue@latest
2. 按提示选择以下

 

npm run dev 就是启动的命令,可以在终端输入该命令进行启动
3.idea 配置启动项

 

点击应用,配置成功。
4. 创建模板文件
创建好项目后,由于是第一次使用 Vue ,可能还需要创建 vue 的模板文件,具体参考如下
IDEA 创建 .vue 格式的文件 _idea 怎么创建 vue 文件

4.案例使用

Vue3一般与 ElementUI 一起使用,ElementUI是前端页面的一个组件库,用来丰富前端的页面。

Element-Plus 官网连接 Element Plus (element-plus.org)
1. 安装 Element Plus, 打开终端,输入以下
npm install element-plus --save
2. 安装好后引入 , main.js 中引入

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

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

相关文章

2024 年最新前端ES-Module模块化、webpack打包工具详细教程(更新中)

模块化概述 什么是模块?模块是一个封装了特定功能的代码块,可以独立开发、测试和维护。模块通过导出(export)和导入(import)与其他模块通信,保持内部细节的封装。 前端 JavaScript 模块化是指…

第十三周Scrum Meeting记录

组长: 张楷 副组长:王骏 小组成员:林佳欣 王文秋 李昌豪 陈俊泽 赵浩然 项目链接:https://github.com/ctrlshiftm129/Tuanzi 文章目录 个人工作记录燃尽图组会照片代码签入记录本周总结 个人工作记录 成员工作内容张楷完成了从…

Linux 磁盘满了怎么办?快速排查和清理方法

当 Linux 磁盘满了,会导致系统无法正常运行,比如无法写入文件、服务停止、甚至系统崩溃。因此,快速排查并清理磁盘空间是非常重要的。以下是详细的排查和解决步骤: 一、快速定位磁盘占用原因 1. 检查磁盘使用情况 使用 df 命令查…

中科网威-anysec安全网关 arping 远程命令执行漏洞复现(CNVD-2024-46119)

0x01 产品简介 深圳市中科网威科技有限公司成立于深圳市南山科技园信息产业化基地(也有说法称总部位于深圳市福田国际电子商务产业园),是深圳市高新技术企业、双软企业。公司致力于VPN防火墙、流量监控、网络行为管理、ANYSEC安全网关、IT运维设备等前沿网络设备的研发、生…

什么是PCB的CAF效应?

导电阳极丝(CAF)现象及其影响 在高科技电子产品制造中,尤其是在对环境适应性要求极高的汽车电子和军工领域,产品的耐高温和高湿性能显得尤为重要。 随着电子产品向更高集成度发展,电路板上的孔间距不断缩小&#xff…

harbor镜像仓库搭建

Harbor简介 Harbor的发展背景和现状 Harbor项目起始于2014年左右,当时正值容器技术和微服务架构迅速崛起的时期。随着越来越多的企业开始采用容器化部署应用,对于私有镜像管理的需求也日益增长。传统的解决方案要么缺乏必要的企业级特性(如访问控制、安全性和可扩展性),…

【数据结构——查找】顺序查找(头歌实践教学平台习题)【合集】

目录😋 任务描述 相关知识 测试说明 我的通关代码: 测试结果: 任务描述 本关任务:实现顺序查找的算法。 相关知识 为了完成本关任务,你需要掌握:1.根据输入数据建立顺序表,2.顺序表的输出,…

UOB大华银行|校招网申综合能力SHL测评题库英语版本真题分析

大华银行有限公司(大华银行)是亚洲银行业的翘楚,大华银行总部位于新加坡,并在中国、印度尼西亚、马来西亚、泰国及越南设立了全资法人银行,在全球拥有约500 间分行及办事处,分布在亚太、欧洲与北美的19 个国…

[C#与C++交互] 跨进程通信NamedPipes

目录 1、前言 2、什么是命名管道? 3、实现步骤 4、示例代码 4.1 C 服务器代码 4.2 C# 客户端代码 5、运行步骤 6、注意事项 7、应用场景 8、优缺点 9、总结 1、前言 在 C# 和 C 应用程序之间进行数据交换时,命名管道(Named Pipes…

《宇宙机器人》提示错误弹窗“找不到d3dx9_43.dll”是什么原因?“d3dx9_43.dll缺失”怎么解决?

电脑游戏运行时常见问题解析:《宇宙机器人》提示“找不到d3dx9_43.dll”的解决之道 TGA2024落幕,年度最佳游戏——《宇宙机器人》,作为一名在软件开发领域深耕多年的从业者,我深知电脑游戏在运行过程中可能会遇到的各种挑战&…

Hive-4.0.1数据库搭建(可选配置用户名密码远程连接)

1.官网下载tar包上传到服务器并解压&#xff08;我这里解压到了hive目录): 2.进入到conf目录&#xff0c;并复制模板配置文件进行修改&#xff1a; cd /apache-hive-4.0.1-bin/conf cp hive-default.xml.template hive-site.xml3.编写内容如下&#xff1a; <property>&…

计算机内存里面4个字节与float类型数据的转换原理

在计算机科学中&#xff0c;四个字节与float&#xff08;单精度浮点数&#xff09;之间的转换是一种常见的操作。这种转换涉及到数据类型的转换和内存存储的相关知识&#xff0c;其原理主要基于IEEE 754标准。以下是对四个字节和float转换原理的详细解释&#xff1a; 一、基本…

MATLAB 识别色块和数量

文章目录 前言步骤 1: 读取图像步骤 2: 转换为 HSV 颜色空间步骤 3: 定义颜色范围步骤 4: 创建颜色掩码步骤 5: 应用形态学操作&#xff08;可选&#xff09;步骤 6: 标记和显示结果完整代码步骤七 返回色块坐标 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&…

抓包分析DHCP的工作过程

一、DHCP简介 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;动态主机配置协议&#xff0c;前身是BOOTP协议。在大型局域网中&#xff0c;需要给很多主机配置地址信息&#xff0c;如果采用传统手工配置&#xff08;累死&#xff09;&#xff0c;效率太低&am…

MUR3060PTR-ASEMI快恢复二极管对管MUR3060PTR

编辑&#xff1a;ll MUR3060PTR-ASEMI快恢复二极管对管MUR3060PTR 型号&#xff1a;MUR3060PTR 品牌&#xff1a;ASEMI 封装&#xff1a;TO-247 正向电流&#xff1a;30A 反向电压&#xff1a;600V 正向压降&#xff1a;0.98V~1.90V 引线数量&#xff1a;3 芯片个数&a…

CSS学习记录13

CSS组合器 组合器是解释选择器之间关系的某种机制。CSS选择器可以包含多个简单选择器。在简单选择器之间&#xff0c;我们可以包含一个组合器。 CSS中有四种不同的组合器&#xff1a; 后代组合器&#xff08;空格&#xff09;子选择器&#xff08;>)相邻兄弟选择器&#…

城市大脑新型智慧城市数据中台建设方案

建设背景与现状 随着城市化进程的加速&#xff0c;城市数据呈现出爆炸式增长&#xff0c;但数据的整合、共享和利用却面临诸多挑战。信息孤岛、数据冗余、管理分散等问题日益突出&#xff0c;制约了智慧城市的发展。为了解决这些问题&#xff0c;构建城市大脑新型智慧城市数据…

LeetCode 热题 100-两数之和(简单)

1. 两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出和为目标值 target 的那两个整数&#xff0c;并返回它们的数组下标。你可以假设每种输入只会对应一个答案&#xff0c;并且你不能使用两次相同的元素。 你可以按任意顺序返回答案。…

【echarts】数据过多时可以左右滑动查看(可鼠标可滚动条)

1. 鼠标左右拖动 在和 series 同级的地方配置 dataZoom&#xff1a; dataZoom: [{type: inside, // inside 鼠标左右拖图表&#xff0c;滚轮缩放&#xff1b; slider 使用滑动条start: 0, // 左边的滑块位置&#xff0c;表示从 0 开始显示end: 60, // 右边的滑块位置&#xf…

将VSCode添加至右键的菜单栏

文章目录 打开注册表编辑器共需要在3处添加&#xff1a;第一处&#xff1a;第二处&#xff1a;第三处&#xff1a;最终效果&#xff1a; 原文链接&#xff1a; https://www.cnblogs.com/alannxu/p/18234323 打开注册表编辑器 1、打开运行界面&#xff1a;WinR 2、在弹出的运行…