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

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

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

相关文章

编程创意汇聚地,打造个性作品集 | 开源日报 No.97

spring-projects/spring-boot Stars: 70.4k License: Apache-2.0 Spring Boot 是一个用于简化 Spring 应用程序开发的框架,它通过提供默认配置和约定大于配置的方式来减少开发者的工作量。Spring Boot 可以快速地创建独立的、生产级别的基于 Spring 框架的应用程序…

QT----自定义信号和槽

第二天 2.1自定义信号和槽 新建一个Qtclass 自定义信号:返回值是void ,只需要声明,不需要实现,可以有参数,可以重载 自定义槽:返回值void ,需要声明,也需要实现,可以有…

python的安装

python官网地址:https://www.python.org/ 以在windows下安装3.12.0版本为例。 下载安装包: 下载下来的安装包是python-3.12.0-amd64.exe,双击安装,按照提示,一步一步往下走: 到cmd下,输入py…

paypal贝宝怎么绑卡支付

一、PayPal是什么 PayPal是一个很多国家地区通用的支付渠道,我们可以把它理解为一项在线服务,相当于美国版的支付宝。你可以通过PayPal进行汇款和收款,相比传统的电汇和西联那类的汇款方式,PayPal更加简单和容易,被很…

2023年4K投影仪怎么选?极米H6 4K高亮版怎么样?

随着人们生活水平的不断提升,投影仪也逐渐成为了家家户户的必备家居好物。近十年来,中国投影仪市场规模增长数倍,年均增长率大幅提高。从近10年的发展趋势来看,投影仪行业处于高速发展期。 此前,极米科技推出的极米H6…

来自OpenAI的官方解释:ChatGPT中的GPTs与Assistants API的区别是什么?有什么差异?

本文原文来自DataLearnerAI的官方网站: 来自OpenAI的官方解释:ChatGPT中的GPTs与Assistants API的区别是什么?有什么差异? | 数据学习者官方网站(Datalearner)https://www.datalearner.com/blog/1051701996595465 OpenAI发布的产…

WordCount 源码解析 Mapper,Reducer,Driver

创建包 com.nefu.mapreduce.wordcount ,开始编写 Mapper , Reducer , Driver 用户编写的程序分成三个部分: Mapper 、 Reducer 和 Driver 。 ( 1 ) Mapper 阶段 ➢ 用户自定义的 Mapper 要继承自己的父…

快速认识什么是:Kubernetes

每次谈到容器的时候,除了Docker之外,都会说起 Kubernetes,那么什么是 Kubernetes呢?今天就来一起学快速入门一下 Kubernetes 吧!希望本文对您有所帮助。 Kubernetes,一种用于管理和自动化云中容器化工作负…

Appium获取toast方法封装

一、前置说明 toast消失的很快,并且通过uiautomatorviewer也不能获取到它的定位信息,如下图: 二、操作步骤 toast的class name值为android.widget.Toast,虽然toast消失的很快,但是它终究是在Dom结构中出现过&…

[WMCTF2020]Make PHP Great Again require_once 特性

php源码分析 require_once 绕过不能重复包含文件的限制-安全客 - 安全资讯平台 这里是特性 我们首先来解释一下 <?php highlight_file(__FILE__); require_once flag.php; if(isset($_GET[file])) {require_once $_GET[file]; }这个是我们的源代码 PHP包含的格式是将 已…

外贸邮件开发信称呼怎么写?邮件开头称呼?

得体的开发信称呼方法技巧&#xff1f;外贸邮件称呼部分如何写&#xff1f; 邮件的开篇通常以称呼语句来建立联系&#xff0c;这个称呼在一封邮件中至关重要&#xff0c;它不仅要表现出尊重&#xff0c;还要显得亲切和专业。那么&#xff0c;如何写外贸邮件开发信称呼呢&#…

【keil备忘录】2. stm32 keil仿真时的时间测量功能

配置仿真器Trace内核时钟为单片机实际的内核时钟&#xff0c;需要勾选Enable设置&#xff0c;设置完成后Enable取消勾选也可以&#xff0c;经测试时钟频率配置仍然生效&#xff0c;此处设置为48MHZ: 时间测量时必须打开register窗口&#xff0c;否则可能不会计数 右下角有计…