vue3基础教程(2)——创建vue3+vite项目

博主个人微信小程序已经上线:【中二少年工具箱】。欢迎搜索试用


正文开始

  • 专栏简介
  • 1. 前言
  • 2.node版本检测
  • 3.创建vue项目


专栏简介

本系列文章由浅入深,从基础知识到实战开发,非常适合入门同学。

零基础读者也能成功由本系列文章入门,但如果您具备以下基础,将会事半功倍:

  1. HTML基础
  2. css基础
  3. js基础

当然,即使从未接触过前端代码的小白,也能轻松学习本系列课程,因为我会在文章中简略穿插前端基础知识。

由于各平台对专栏文章的支持度不同,所以如果您看到这篇文章的平台,系统学习专栏文章的操作不够丝滑,可以先关注小程序,后续小程序会开发专栏博客功能。

可以直接搜索【中二少年工具箱】,也可通过
二维码知乎地址:https://www.zhihu.com/question/53230344/answer/3180004527
二维码csdn地址:https://bbs.csdn.net/topics/618134623
二维码头条地址:https://www.toutiao.com/w/1790412984859652/
等入口进入,扫码关注。


1. 前言

纯理论知识官网写的就很清楚,简单摘抄过来,学习效果不大。不如先创建一个项目,边学习知识,边在项目中实践。

本系列的基础技术栈是vue3+vite+iview,如果图简单,直接下载iview官网提供的推荐项目即可。我们的目的是学习,而且推荐项目很久不更新,所以我们决定由零开始,一步步创建项目。

2.node版本检测

请确定已经完成了上章内容,下载好nodejs环境和代码编辑软件。

检查node版本:

  1. 点击win+r打开运行窗口
    在这里插入图片描述
  2. 在上面的运行窗口输入cmd,打开黑窗口:
    在这里插入图片描述

输入node -v,查看node版本。输入npm -v,查看npm版本。

node自从某个版本后,就和npm绑定了,也就是说下载了node就会自动下载对应版本的npm,如果发现只有node,没有npm,那么就重新下载node,现在node以18版本为主流,这也是vue官方要求的版本。

3.创建vue项目

  • 创建一个文件夹,用来放我们的项目

在这里插入图片描述

  • 在目录处输入cmd,回车,便会在此文件夹目录下打开命令行窗口。

在这里插入图片描述

  • 按照官网的命令,在此文件夹下创建项目
npm create vue@latest

我一般习惯用yarn,如果没有安装yarn的,可以先用npm下载全局yarn:

npm install -g yarn

然后用yarn创建vue项目

yarn create vue@latest

这时候大概率会报错:”"https://registry.yarnpkg.com/create-vue: connect ETIMEDOUT 104.16.27.34:443“,这是网络连接超时,我们最好是改变下载源,提升下载速度。

下面是将源修改为淘宝源:

yarn config set registry https://registry.npm.taobao.org

在这里插入图片描述
这时候再创建项目,仍然可能会报错:”An unexpected error occurred: “https://registry.npm.taobao.org/create-vue: certificate has expired”.“
这是证书过期,我们可以相信淘宝源,所以可以简单粗暴地设置不验证ssl证书:

yarn config set strict-ssl false

在这里插入图片描述
这时候再创建vue项目,报错:”yarn报错’C:\Users\Administrator\AppData\Local\Yarn\bin\create-vue@latest’ 不是内部或外部命令,也不是可运行的程序“

在这里插入图片描述
我们发现create-vue实际上已经下载成功,只不过报错create-vue这个命令找不到。

这个不知道什么原因,只要使用官网的命令就会报错,不过不重要,我们可以直接用create-vue命令创建项目。
在这里插入图片描述
一般情况下,vue router和pinia都是必须安装的,其它根据自己需要安装。

最终vue项目安装成功:

在这里插入图片描述

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

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

相关文章

javascript数组排序的方法

目录 基本用法 按照数字大小排序 按照降序排序 按照字符串长度排序 按照对象属性排序 在JavaScript中,数组排序通常使用Array.prototype.sort()方法。这个方法会按照指定的顺序对数组的元素进行排序,并返回排序后的数组。如果未指定比较函数&#x…

Springboot配置MySQL数据库

Springboot配置MySQL数据库 一、创建springboot项目&#xff0c;并添加如下依赖 <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope> </dependency>二、在applica…

基于springboot+vue的酒店管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

实现session共享的方法总结完整版

文章目录 实现session共享的方法总结完整版1、使用共享数据库&#xff1a;2、使用粘性会话&#xff08;Sticky Session&#xff09;&#xff1a;3、使用缓存系统&#xff1a;4、使用分布式文件系统&#xff1a;5、使用中央认证服务&#xff1a;6、使用会话复制&#xff1a;7、使…

MongoDB聚合运算符:$dateFromParts

文章目录 语法使用值域值大于范围值小于范围时区 举例 语法 {$dateFromParts : {year: <year>, month: <month>, day: <day>,hour: <hour>, minute: <minute>, second: <second>,millisecond: <ms>, timezone: <tzExpression>…

100%开源大模型OLMo:代码/权重/数据集/训练全过程公开,重定义AI共享

前言 近日&#xff0c;艾伦人工智能研究所联合多个顶尖学术机构发布了史上首个100%开源的大模型“OLMo”&#xff0c;这一举措被认为是AI开源社区的一大里程碑。OLMo不仅公开了模型权重&#xff0c;还包括了完整的训练代码、数据集和训练过程&#xff0c;为后续的开源工作设立…

三星成功研发出业界首款12层堆叠HBM3E

三星电子有限公司成功研发出业界首款12层堆叠HBM3E DRAM——HBM3E 12H&#xff0c;这是迄今为止容量最大的HBM产品。这款新型HBM3E 12H内存模块提供了高达1,280GB/s的史上最高带宽&#xff0c;并拥有36GB的存储容量&#xff0c;相较于之前的8层堆叠HBM3 8H&#xff0c;在带宽和…

运维随录实战(1)

docker安装mongo 1,新建数据卷目录 mkdir -p /my/own/datadir 2,拉取镜像 docker pull mongo:latest 3,运行 docker run -d -p 27017:27017 -v /my/own/datadir:/data/db --name mongodb -e MONGO_INITDB_ROOT_USERNAME=admin -e MONGO_INITDB_ROOT_PASSWORD=123456 mongo …

ECMAScript6

课程链接 目录 相关介绍什么是ECMA什么是ECMAScript为什么学习ES6 letconst变量解构赋值模板字符串对象简化写法箭头函数函数参数的默认值rest参数扩展运算符Symbol迭代器生成器函数与调用Promise介绍与基本用法Promise封装读取文件Promise.prototype...then方法Promise.catch…

CCDP.01.寄主机SSH连接虚拟机的QA

V0.0 初始版本-2024.2.29 检查VM的网卡配置 如上图&#xff0c;如果enp0s3网卡没有出现形如10.0.0.??/24的ip配置&#xff0c;说明该网卡配置存在错误&#xff0c;或者没有“使能”该网卡。在RockyLinux8.X中可检查“ifcfg-enp0s&#xff1f;” vi /etc/sysconfig/network-…

智能系统引领的未来时代

智能系统引领的未来时代 随着人工智能技术的不断发展和普及&#xff0c;智能系统已经成为引领未来时代的关键力量。智能系统能够模拟人类的智能行为&#xff0c;实现自主学习、自主决策&#xff0c;并在各个领域展现出强大的应用潜力。在未来时代&#xff0c;智能系统将在各个…

【Python 图像处理 PIL 系列 13.1 -- 从列表中读取图像数据并生成图像】

文章目录 从列表中读取图像数据并生成图像代码示例 从列表中读取图像数据并生成图像 在Python中&#xff0c;可以使用Pillow库来创建和保存图像。这里我们将展示如何从列表list_num中读取RGB颜色数据&#xff0c;并根据row_num和column_num生成RGB格式的图像。 安装Pillow库&…

【JS】WebSocket实现简易聊天室

【JS】WebSocket实现简易聊天室 聊天室思路示例 聊天室思路 聊天室思路 1、连接服务器先建立连接&#xff0c;默认生成匿名用户(admin01) 2、客户端发送消息&#xff0c;其它客户端用户都会同步接收消息(服务端接受消息广播所有连接用户) 3、客户端修改昵称&#xff0c;其它客…

数据结构之七大排序

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary_walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

FreeRTOS操作系统学习——FreeRTOS工程创建

FreeROTS工程创建 详细步骤 如无特殊情况&#xff0c;大部人都要配置为外部高速时钟 另外&#xff0c;本实验使用了FreeRTOS&#xff0c;FreeRTOS的时基使用的是Systick&#xff0c;而 STM32CubeMX中默认的HAL库时基也是Systick&#xff0c;为了避免可能的冲突&#xff0c;最…

渗透测试工具 nmap 详解

官网&#xff1a;Nmap: the Network Mapper - Free Security Scanner -p&#xff1c;端口范围&#xff1e;&#xff1a;仅扫描指定的端口 用于扫描指定端口是否开放&#xff0c;在 -p 后输入指定的端口&#xff0c;以英文","进行拼接多个指定端口。 nmap -p 80&…

2024年3月产品认证基础考试简答题及答案

产品认证基础 46.产品认证的工厂检查有哪几种路线&#xff1f;各有什么优缺点&#xff1f; 答案&#xff1a;两种常用的检查路线&#xff1a; 1.按照要素或过程检查 按照认证规则规定的工厂应满足的要素要求&#xff08;包括质量保证能力要求&#xff09;&#xff0c;结合部…

TestNG @Test注释属性- threadPoolSize属性

本文将讨论TestNG中Test annotation的threadPoolSize属性。那么&#xff0c;我们开始吧。 那么&#xff0c;threadPoolSize属性有什么用处呢&#xff1f;答案是&#xff0c;无论何时您想要多次并行地运行一个测试方法&#xff0c;您都需要这个属性。该方法将从invocationCount…

java014 - Java继承

1、继承 1.1 继承概述 继承是面向对象的三大特征之一&#xff0c;可以使得子类具有父类的属性和方法&#xff0c;还可以在子类中重新定义&#xff0c;追加属性和方法。 1.2 继承格式 public class 子类类名 extends 父类类名 {} 范例&#xff1a;public class son extends …

鸿蒙应用组件

基础组件 索引组件—AlphabetIndexer&#xff08;相当于安卓的seedbar&#xff09; 使用&#xff1a;AlphabetIndexer(value: {arrayValue: Array<string>, selected: number})空白填充组件—Blank&#xff08;占位使用&#xff0c;当父组件为Row/Column/Flex时生效&am…