Vue3-01-创建项目

news2024/11/25 20:27:27

环境准备

1.需要用到 16.0 以及更高版本的 node.js
2.使用vscode编辑器进行项目开发


可以在命令行中查看node的版本号:
node -v

在这里插入图片描述

创建项目

1.准备一个目录

例如,我创建项目的时候是在该目录下进行的;

D:\projectsTest\vue3project

2.执行创建命令(*)

npm create vue@latest

在这里插入图片描述

3.使用vscode打开创建的项目

项目刚创建完成后的目录结构如下:
此时只有基本的文件,并没有node_modules 目录,因此,文件中导入依赖会提示错误!

在这里插入图片描述
在这里插入图片描述

4.安装依赖

# 进入到项目目录下,执行安装命令
npm install

在这里插入图片描述

5.安装完成之后的目录

新安装的依赖会存放到 node_modules 目录下,
并且文件中导入的依赖也不会提示报错了

在这里插入图片描述
在这里插入图片描述

6.一个奇怪的问题

如果 创建完成之后,tsconfig.node.json 文件中提示下面的异常:

Cannot find type definition file for 'node'.
The file is in the program because:
Entry point for implicit type library 'node'

我感觉这是vscode 的一个bug,重新打开一下项目就会好了,或者随便编辑一下,然后保存保存,
错误提示就会消失。

启动项目

1.启动项目并访问一下试试

在项目目录下执行命令:
npm run dev

在浏览器中访问即可查看到访问的页面。

在这里插入图片描述
在这里插入图片描述

2.启动命令为什么是 npm run dev

这个问题很简单,这个启动命令,是在项目的 package.json 文件中配置的。
配置内容如下:

在这里插入图片描述

至此,vue3 创建最基本的项目就完成了

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

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

相关文章

React聚焦渲染速度

目录 一、引言 二、React.js的渲染速度机制 虚拟DOM Diff算法 三、优化React.js的渲染速度 避免不必要的重新渲染 使用合适的数据结构和算法 使用React Profiler工具进行性能分析 四、实际案例分析 五、总结 一、引言 在当今的Web开发领域,React.js无疑是…

屏蔽百度首页推荐和热搜的实战方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

第二十一章

计算机应用实现了多台计算机间的互联,使得它们彼此之间能够进行数据交流。网络应用程序就是在已连接的不同计算机上运行的程序,这些程序借助于网络协议,相互之间可以交换数据。编写网络应用程序前,首先必须明确所要使用的网络协议…

C++STL的string(超详解)

文章目录 前言C语言的字符串 stringstring类的常用接口string类的常见构造string (const string& str);string (const string& str, size_t pos, size_t len npos); capacitysize和lengthreserveresizeresize可以删除数据 modify尾插插入字符插入字符串 inserterasere…

软件设计中如何画各类图之八深入解析部署图:物理布局与系统架构的视觉化呈现

目录 1 前言2 部署图的符号及说明3 画部署图的步骤3.1 **识别节点**3.2 **定义组件**3.3 **标识部署关系**3.4 **添加细节** 4 部署图的用途4.1 **系统设计与规划**4.2 **系统架构分析**4.3 **系统维护与升级** 5 实际场景举例5.1 Web应用部署图5.2 云端服务部署图 6 结语 1 前…

尝试通过AI模型进行简单的编码

一、前言 最近尝试通过AI来编程,总体感觉还是能处理写简单的问题,复杂的问题目前还是无法解决。主要的痛点还是数据噪音,就是AI永远不会承认它不会,它会给你的一个错误的信息,它也不会告诉你你的问题它暂时无法完整正…

mac苹果笔记本电脑如何强力删除卸载app软件?

苹果电脑怎样删除app?不是把app移到废纸篓就行了吗,十分简单呢! 其实不然,因为在Mac电脑上,删除应用程序只是删除了应用程序的主要组件。大多数时候,系统会有一个相当长的目录,包含所有与应用程…

SCI一区级 | Matlab实现GWO-CNN-BiLSTM-selfAttention多变量多步时间序列预测

SCI一区级 | Matlab实现GWO-CNN-BiLSTM-selfAttention多变量多步时间序列预测 目录 SCI一区级 | Matlab实现GWO-CNN-BiLSTM-selfAttention多变量多步时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现GWO-CNN-BiLSTM-selfAttention灰狼算法优化卷…

通过误差改变控制的两种策略

如果反馈误差越来越大,需要改变调节方向以减小误差并实现更好的控制。以下是两种常见的调节方向改变的方法: PID控制器中的积分限制:在PID控制中,积分项可以用来减小稳态误差。然而,当反馈误差持续增大时,积…

java打包到docker,以及idea远程调试

这里主要介绍 dockerfile的打包方式 一、打包jar包到容器 1. 在要打包的项目中创建dockerfile,dockerfile与项目的pom.xml是同级 2. 编辑dockerfile文件 FROM openjdk:8 VOLUME ["/data/untitled"] COPY target/untitled-1.0.jar "/app.jar"…

Spring Boot 整合 xxl-job 保姆级教程!

文章目录 介绍使用初始化“调度数据库”配置调度中心配置“执行器项目”调度任务 介绍 首先我们介绍一下什么是xxl-job,根据官方定义,XXL-JOB是一个分布式任务调度平台,其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码…

Kubersphere应用【二】Docker安装

一、Docker安装 1.下载Docker安装包 【地址】Index of linux/static/stable/x86_64/ 2.上传至服务器 # 解压文件 tar -xvf docker-20.10.10.tgz# 将docker 目录中的所有文件复制至/usr/bin/目录下 cp docker/* /usr/bin 3.配置docker.service文件 vim /usr/lib/systemd/sy…

树莓派 5 - Raspberry Pi 5 入门教程

系列文章目录 文章目录 ​​​​​​​ 前言 如果您是第一次使用 Raspberry Pi,请参阅我们的入门指南(how to get started)。 Raspberry Pi 5 Raspberry Pi 5 配备了运行频率为 2.4GHz 的 64 位四核 Arm Cortex-A76 处理器,CPU 性…

Python os模块及用法

os 模块代表了程序所在的操作系统,主要用于获取程序运行所在操作系统的相关信息。 在 Python 的交互式解释器中先导入 os 模块,然后输入 os.__all__ 命令(__all__ 变量代表了该模块开放的公开接口),即可看到该模块所包…

AIGC专题报告:AIGC助力大规模对象存储服务OSS的能效提升

今天分享的AIGC系列深度研究报告:《AIGC专题报告:AIGC助力大规模对象存储服务OSS的能效提升》。 (报告出品方:全球软件开发大会) 报告共计:18页 结合AI的智能运维助力能效提升 场景1:通过 AI…

C++实现进程端口网络数据接收系统设计示例程序

一、问题描述 最近做了一道简单的系统设计题&#xff0c;大概描述如下&#xff1a; 1.一个进程可以绑定多个端口&#xff0c;用于监听接收网络中的数据&#xff0c;但是一个端口只能被一个进程占用 2.1 < pid < 65535, 1 < port < 100000, 1 < topNum < 5, …

二维码智慧门牌管理系统升级解决方案:数字鉴权

文章目录 前言一、数字鉴权的核心机制二、数字鉴权的意义和应用 前言 随着科技的飞速发展&#xff0c;我们的生活逐渐进入数字化时代。在这个数字化的过程中&#xff0c;数据的安全性和门牌信息的保障变得至关重要。今天&#xff0c;我们要介绍的是二维码智慧门牌管理系统升级…

JavaWeb(十一)

一、会话跟踪技术的概述 1.1、会话的概念 用户打开浏览器&#xff0c;访问web服务器的资源&#xff0c;会话建立&#xff0c;直到有一方断开连接&#xff0c;会话结束。在一次会话中可以包含多次请求和响应。 从浏览器发出请求到服务端响应数据给前端之后&#xff0c;一次会话…

工业主板和消费主板的区别

消费类主板是用于家庭和个人计算机的批量生产的通用主板。另一方面&#xff0c;工业主板则用于工厂、制造设备、医疗设备、公共基础设施以及其他重视可靠性的场所。 工业主板的特点 工业主板有以下四个主要特点。 长期稳定供应 高可靠性 耐环境性 可定制 工业应用需要主…

044:vue中引用json数据的方法

第044个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…