Vue3-01-创建项目

环境准备

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 创建最基本的项目就完成了

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nacos 基础篇:Nacos简介、基本概念、基本架构、Standalone单机搭建部署

文章目录 什么是Nacos基本架构逻辑架构及其组件介绍领域模型数据模型服务领域模型配置领域模型 下载目录结构配置启动 什么是Nacos Nacos:(Dynamic) Naming and Configuration Service,动态的服务发现和配置的服务,是一个更易于构建云原生应…

Qt/C++音视频开发58-逐帧播放/上一帧下一帧/切换播放进度/实时解码

一、前言 逐帧播放是近期增加的功能,之前也一直思考过这个功能该如何实现,对于mdk/qtav等内核组件,可以直接用该组件提供的接口实现即可,而对于ffmpeg,需要自己处理,如果有缓存的数据的话,可以…

Linux(17):认识与分析登录档

什么是登录档 【详细而确实的分析以及备份系统的登录文件】是一个系统管理员应该要进行的任务之一。 登录档 就是记录系统活动信息的几个文件,例如:何时、何地(来源IP)、何人(什么服务名称)、做了什么动作(讯息登录啰)。 换句话说就是:记录系…

设置网络发现,合理利用共享,让自己在准确的地方出现或隐藏

本文介绍如何在Windows 11中打开或关闭网络发现。它还解释了网络发现的用途以及你可能想使用(或不使用)它的时间。 如何在Windows 11中切换网络发现 可以在“设置”中打开和关闭网络发现。 1、使用WINI快捷方式打开“设置”或从任务栏中搜索。 2、选…

CAS-ESM设置起始时间不起作用的原因

问题描述: 今天在运行CAS-ESM2.0的时候出现了一个怪事,不论我怎么修改start_ymd,模式总是从1850年,1851 年开始跑。 解决方法: 修改start_type为startup,初始积分。 原因解释: CAS-ESM2.0代码…

Rust的From与Into Trait

Into的本质是调用了From Trait 的方法。 From是底层的方法,把From实现了,Into的实现,编译器会自动根据From Trait生成Into Trait的代码 编译器自动类型推导出Into Trait的U的类型,调用了U类型的From的方法,实现其他类…

JavaSE基础50题:18. 写一个递归方法,输入一个非负整数,返回组成它的数字之和。例如:输入1729,则应该返回1+7+2+9,它的和是19

概述 写一个递归方法&#xff0c;输入一个非负整数&#xff0c;返回组成它的数字之和。例如&#xff1a;输入1729&#xff0c;则应该返回1729&#xff0c;它的和是19。 代码 public class P18 {public static int func(int n) {if (n < 10) {return n;}return n%10 func…

[gRPC实现go调用go]

1什么是RPC RPC&#xff1a;Remote Procedure Call&#xff0c;远程过程调用。简单来说就是两个进程之间的数据交互。正常服务端的接口服务是提供给用户端(在Web开发中就是浏览器)或者自身调用的&#xff0c;也就是本地过程调用。和本地过程调用相对的就是&#xff1a;假如两个…

使用Pytorch实现变分自编码器

使用Pytorch实现变分自编码器 可以结合这篇VAE讲解文章阅读这篇blog post代码。 # Import necessary packages. import os import torch import torch.nn as nn import torch.nn.functional as F import torchvision from torchvision import transforms from torchvision.ut…

微信小程序引入vant-weapp爬出坑

最新的微信小程序的项目结构跟之前的不一样&#xff0c;然后&#xff0c;按照vant-weapp上的官方文档&#xff0c;安装步骤失败&#xff0c;提示了各种错误。如果你的微信小程序结构跟我的一致&#xff0c;可以采用和我一样的方案。 微信小程序引入vant-weapp爬出坑 移动pack…

基于redisson实现发布订阅(多服务间用避坑)

前言 今天要分享的是基于Redisson实现信息发布与订阅&#xff08;以前分享过直接基于redis的实现&#xff09;&#xff0c;如果你是在多服务间基于redisson做信息传递&#xff0c;并且有服务压根就收不到信息&#xff0c;那你一定要看完。 今天其实重点是避坑&#xff0…

TINA-TI —— 电路仿真

文章目录 1. 安装2. 1. 安装 Tina-TI 官网下载链接&#xff1a;https://www.ti.com.cn/tool/cn/TINA-TI注册登陆&#xff0c;选择简体中文版下载&#xff1b; 下载完成后&#xff0c;直接安装&#xff1b; 2.

Java最全面试题专题---1、Java基础知识(3)

IO流 java 中 IO 流分为几种? 按照流的流向分&#xff0c;可以分为输入流和输出流&#xff1b;按照操作单元划分&#xff0c;可以划分为字节流和字符流&#xff1b;按照流的角色划分为节点流和处理流。 Java Io流共涉及40多个类&#xff0c;这些类看上去很杂乱&#xff0c;…

Java安全之Commons Collections7分析

CC7分析 import org.apache.commons.collections.Transformer; import org.apache.commons.collections.functors.ChainedTransformer; import org.apache.commons.collections.functors.ConstantTransformer; import org.apache.commons.collections.functors.InvokerTransfo…

spring-boot-starter-validation是什么Validation参数校验使用概要

spring-boot-starter-validation是什么&Validation参数校验使用概要 来源Valid和Validated的用法(区别)引入依赖Valid和Validated的用法 在日常的项目开发中&#xff0c;为了防止非法参数对业务造成的影响&#xff0c;需要对接口的参数做合法性校验&#xff0c;例如在创建用…

京东数据运营:京东API接口有哪些?京东数据如何采集调用?

市场分析对于电商品牌来说非常重要&#xff0c;它可以帮助电商品牌更好地理解市场&#xff0c;把握市场机会&#xff0c;以及制定有效的产品定价、产品营销策略等等。 结合市场中可以帮助品牌方做市场分析的电商数据分析工具——鲸参谋电商数据分析平台&#xff0c;我们一起具体…

快邀请你的冤种朋友一起来学习顺序表的底层逻辑:ArrayList集合

进来了就一起来学习如何去使用ArrayList这个集合吧&#xff01; 目录 一.ArrayList是什么 二.ArrayList的构造方法与扩容机制 1.无参构造方法与扩容机制 2.带参数的构造方法 3.利用其他 Collection 构建 ArrayList 三.ArrayList常用方法介绍 1.插入数据方法 2.boolean …

react-photo-view 的介绍、安装、使用。

目录 基本介绍 安装 使用 基本介绍 react-photo-view 是一个基于 React 的图片查看器组件&#xff0c;用于在网页上展示和浏览图片。该组件提供了用户友好的界面和交互&#xff0c;可以轻松地在应用程序中集成并使用。 支持触摸手势&#xff0c;拖动/平移/物理效果滑动…

【vtkWidgetRepresentation】第七期 vtkImplicitPlaneRepresentation

很高兴在雪易的CSDN遇见你 前言 本文分享vtkImplicitPlaneRepresentation源码剖析&#xff0c;及相关的实例&#xff0c;该接口主要用于切割交互&#xff0c;希望对各位小伙伴有所帮助&#xff01; 感谢各位小伙伴的点赞关注&#xff0c;小易会继续努力分享&#xff0c;一起…

利用lammps模拟不同压头半径对单晶铝纳米压痕的影响

2.1.问题描述 纳米压痕是确定金属材料特性的最广泛使用的方法之一。分子动力学&#xff08;MD&#xff09;模拟是一种强大的工具&#xff0c;可以研究纳米压痕过程中原子尺度上的材料行为&#xff0c;并深入了解材料的塑性变形。本工作采用单晶铝作为原材料&#xff0c;旨在为…