【Vue】 Vue3 安装说明,适合小白新手

1、独立版本
我们可以在 Vue.js 的官网上直接下载最新版本, 并用

下载 Vue.js https://unpkg.com/vue@next

2、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

Staticfile CDN(国内) : https://cdn.staticfile.org/vue/3.0.5/vue.global.js

unpkg:https://unpkg.com/vue@next, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js

Staticfile CDN(国内)

{{ message }}

尝试一下 »
unpkg(推荐)

{{ message }}

尝试一下 »
cdnjs

{{ message }}

尝试一下 »
3、NPM 方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像。

npm 版本需要大于 3.0,如果低于此版本需要升级它:

查看版本

$ npm -v
2.3.0

#升级 npm
cnpm install npm -g

升级或安装 cnpm

npm install cnpm -g
在用 Vue.js 构建大型应用时推荐使用 cnpm 安装,cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用,然后在命令行中运行以下命令:

最新稳定版

$ npm init vue@latest
这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。

$ npm init vue@latest
Need to install the following packages:
create-vue@3.6.1
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

这里需要进行一些配置,项目名输入 runoob-vue3-test,其他默认回车即可

✔ Project name: … runoob-vue3-test
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/tianqixin/runoob-test/runoob-vue3/runoob-vue3-test…

Done. Now run:

cd runoob-vue3-test
npm install
npm run dev
如果不确定是否要开启某个功能,你可以直接按下回车键选择 No。

在项目被创建后,通过以下步骤安装依赖并启动开发服务器:

$ cd runoob-vue3-test
$ npm install
$ npm run dev
VITE v4.3.4 ready in 543 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
成功执行以上命令后访问 http://localhost:5173/,输出结果如下所示:
在这里插入图片描述

注意:Vue.js 不支持 IE8 及其以下 IE 版本。

使用图形化界面
我们可以通过 vue ui 命令来打开图形化界面创建和管理项目:

vue ui
执行以上命令会在浏览器中打开一个图形化界面来引导项目创建:
在这里插入图片描述

Vite
Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目,语法格式如下:

npm init vite-app
创建项目 runoob-vue3-test2:

$ npm init vite-app runoob-vue3-test2
运行项目:

$ cd runoob-vue3-test2
$ cnpm install
$ cnpm run dev

runoob-vue3-test2@0.0.0 dev /Users/tianqixin/runoob-test/vue3/runoob-vue3-test2
vite

[vite] Optimizable dependencies detected:
vue

Dev server running at:

Local: http://localhost:3000/
打开 http://localhost:3000/,显示如下:

在这里插入图片描述

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

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

相关文章

【Python】爬虫练习-爬取豆瓣网电影评论用户的观影习惯数据

目录 前言 一、配置环境 1.1、 安装Python 1.2、 安装Requests库和BeautifulSoup库 1.3.、安装Matplotlib 二、登录豆瓣网(重点) 2.1、获取代理 2.2、测试代理ip是否可用 2.3、设置大量请求头随机使用 2.4、登录豆瓣网 三、爬取某一部热门电影…

【Linux】高级IO --- 多路转接,select,poll,epoll

所有通过捷径所获取的快乐,无论是金钱、性还是名望,最终都会给自己带来痛苦 文章目录 一、五种IO模型1.什么是高效的IO?(降低等待的时间比重)2.有哪些IO模型?哪些模型是高效的?3.五种IO模型的特…

简单理解微服务限流、降级、熔断

微服务限流、降级、熔断分别都是什么意思,我们平时工作中为什么要关注这些东西呢? 公司不断的发展壮大,一开始处于蛮荒时代,咱们从单体应用过渡到微服务的时候,可能还是那一套单体的思想,再加上用户量可能…

大模型参数高效微调技术原理综述(二)-BitFit、Prefix Tuning、Prompt Tuning

随着,ChatGPT 迅速爆火,引发了大模型的时代变革。然而对于普通大众来说,进行大模型的预训练或者全量微调遥不可及。由此,催生了各种参数高效微调技术,让科研人员或者普通开发者有机会尝试微调大模型。 因此&#xff0c…

2023-9-1-虚拟网卡学习

🍿*★,*:.☆( ̄▽ ̄)/$:*.★* 🍿 💥💥💥欢迎来到🤞汤姆🤞的csdn博文💥💥💥 💟💟喜欢的朋友可以关注一下&#xf…

日常开发小点汇总(1)

1.浮动元素 生成一个浮动流&#xff0c;块级元素看不到&#xff0c;文本、行内属性元素及行内元素可见 <div class"demo1"></div><span>123</span><div class"demo2"></div>.demo1 {width: 100px;height: 100px;backg…

在 linux 虚拟机上安装配置 hive

目录 一 下载hive 安装包 二 解压 hive 并配置环境变量 三 配置hive 的配置文件 四 更新 guava 五 hive初始化 六 开启远程连接 七 使用datagrip 连接 hive 一 下载hive 安装包 百度网盘资源如下&#xff1a; 链接: https://pan.baidu.com/s/18jF-Qri0hc52_rtL61O0YQ?…

Unity中神秘的Transform和transform(小写)的关系

1.为什么Transform类是保护的不能通过new 来实例化对象,也没有静态函数,而Rotate()这种方法却属于它,该如何访问? Transform 类还是被保护的不允许用户修改! protected Transform(); 是一个受保护的构造函数,不能直接实例化 Transform 类。 2.为甚么transform可以访问Tr…

2023年行研行业研究报告

第一章 行业概述 1.1 行研行业 行业定义为同一类别的经济活动&#xff0c;这涉及生产相似产品、应用相同生产工艺或提供同类服务的集合&#xff0c;如食品饮料行业、服饰行业、机械制造行业、金融服务行业和移动互联网行业等。 为满足全球金融业的需求&#xff0c;1999年8月…

蓝桥杯备赛(Day5)——二叉树

二叉树存储 普通做法,二叉树一个节点包括结点的数值以及指向左右子节点的指针 在class Node中 def __init__(self,s,l=None,r=None):self.val=Noneself.l=lself.r=r 在竞赛中,我们往往使用静态数组实现二叉树,定义一个大小为N的静态结构体数组,使用其来存储一棵二叉树。…

使用生成式 AI 增强亚马逊云科技智能文档处理

数据分类、提取和分析对于处理大量文档的组织来说可能具有挑战性。传统的文档处理解决方案是手动的、昂贵的、容易出错的,并且难以扩展。利用 Amazon Textract 等 AI 服务,亚马逊云科技智能文档处理(IDP)允许您利用业界领先的机器学习(ML)技术来快速准确地处理任何扫描文档或图…

Android后退堆栈

修改代码 现在的ItemClick使得用户单击其中一个项目时就会跳转&#xff0c;现在要修改其使得在一个小屏幕设备上才会这样做&#xff0c;在一个大屏幕设备上运行用户选择一个训练项目时在右边的片段显示响应的信息。 希望片段处理后退的方式&#xff1a;假设用户在手机上运行这…

酷克数据与华为合作更进一步 携手推出云数仓联合解决方案

在一起&#xff0c;共迎新机遇&#xff01;8月25-26日&#xff0c;2023华为数据存储用户精英论坛在西宁召开。酷克数据作为国内云原生数据仓库的代表企业&#xff0c;也是华为重要的生态合作伙伴&#xff0c;受邀参与本次论坛&#xff0c;并展示了云数仓领域最新前沿技术以及联…

华为云Stack的学习(五)

六、华为云stack服务简介 1.云服务在华为云Stack中的位置 云服务对接多个数据中心资源池层提供的资源&#xff0c;并向各种行业应用提供载体。 2.华为云Stack通用服务 2.1 云计算的服务模式 2.2 计算相关的云服务 2.3 存储相关的云服务 2.4 网络相关的云服务 3.云化案例 **…

C#,数值计算——NRf2的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { public class NRf2 : UniVarRealValueFun { public NRf3 f3 new NRf3(); public RealValueFun z1; public RealValueFun z2; public NRf2(RealValueFun zz1, RealValueFun zz2) …

SLAM从入门到精通(矩阵的使用)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 学习SLAM&#xff0c;离开了矩阵肯定是玩不转的。大学数学里面除了微积分&#xff0c;剩下的就是线性代数和概率论。而矩阵就是线性代数的一部分。…

微信短链跳转到小程序指定页面调试

首先说下背景&#xff1a;后端给了短链地址&#xff0c;但是无法跳转到指定页面。总是在小程序首页。指定的页面我们是h5页面。排查步骤如下&#xff1a; 1、通过快速URL Scheme 编译。上部普通编译 下拉找到此选项。 、 2、按照小程序的要求的URL Scheme输入。另外后端给的…

事务的优化

例子&#xff1a; 举例&#xff1a;假设我们有一个文件上传的uploadFile方法&#xff0c;在这个方法中我们会先执行上传一个文件到分布式文件系统中的方法addMediaFilesToMinIO( )&#xff0c;上传成功后执行文件资源数据入库的addMediaFilesToDb( ),那么这个时候事务应该加在哪…

Revit SDK 介绍:EventsMonitor 事件监控器

前言 这个例子实现了一个事件监控器&#xff0c;当有事件被触发的时候&#xff0c;会生成一条日志记录。 内容 核心逻辑&#xff1a; 用户通过对话框选择想要注册的事件对选中的事件进行注册&#xff0c;事件处理函数都是app_eventsHandlerMethod当事件被触发&#xff0c;事…

uniapp实现移动端的视频图片轮播组件

1、视频轮播组件app体验地址 https://tt.appc02.com/nesxr6 2、支持小程序、H5、APP&#xff0c;在小程序上运行的效果图 3、使用方法 第一步&#xff0c;按照截图步骤配置好 "app-plus": {"subNVues": [{"id": "videoMask", // 唯…