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

news2024/10/6 10:28:43

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.coloradmin.cn/o/970651.html

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

相关文章

Unity资源无法下载 反复提示需同意Terms of Service和EULA 同意后无效的解决方案

前言 最近在玩Unity,跟着tutorial做点项目,但是在下载免费资源时,只有从网站上点“打开Unity”,才能在本地Unity Editor的Package Manager里找到这个资源(且点一下下面的刷新就没有了),并且点击…

【MySQL】MySQL 慢SQL如何避险

我们在日常开发中,一定遇见过某些SQL执行较慢的情况,我们俗称“慢SQL”,如果你对系统的接口性能要求较高的话,一定不会放过这种SQL,肯定会想办法进行解决,那么,导致慢 SQL 出现的原因&#xff0…

寻找重复数

题目链接 寻找重复数 题目描述 注意点 nums 中 只有一个整数 出现 两次或多次 ,其余整数均只出现 一次不修改 数组 nums 且只用常量级 O(1) 的额外空间 解答思路 参照题解可以将本题的数组抽象为链表,由于nums中只有一个整数出现多次,所…

Python操作Excel教程(图文教程,超详细)Python xlwings模块详解,

「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:小白零基础《Python入门到精通》 xlwings模块详解 1、快速入门1、打开Excel2、创建工作簿2.1、使用工作簿2.2、操作…

9.(Python数模)(分类模型一)K-means聚类

Python实现K-means聚类 K-means原理 K-means均值聚类算法作为最经典也是最基础的无标签分类学习算法。其实质就是根据两个数据点的距离去判断他们是否属于一类,对于一群点,就是类似用几个圆去框定这些点(簇),然后圆心…

7英寸触摸显示屏企业网络电话

SV-X77英寸触摸显示屏企业网络电话 SV-X7网络电话是一款带有7英寸触摸显示屏的高端式企业级电话,以先进设计及强大的功能大幅度提高企业工作效率。 功能亮点 √ 虚拟可编程按键 — 可动态显示4个分页,每页可设置显示29个DSS键的状态,最多支持…

线 竖线 横线 系谱图 before 伪类

ul.xipt.level-1 li:before {position: absolute;width: 1px;border-right: dashed 1px #a52520;left: 50%;bottom: -40px;content: "";height: 84px; }

患者随访模板移动端设计

医院随访模板是一款集患者资料整理、随访计划执行和数据统计分析功能于一体的医患服务系统。旨在帮助医院规范随访工作、提高随访效率、提升医疗水平、提高患者依从度。 一、模板临床作用及意义 1、减轻随访工作人员劳动强度、提升随访工作效率。帮助医生或者医院从繁重无序的…

【机器学习】人工智能概述(文末送书)

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

权限框架之jcasbin讲解

文章目录 1 jcasbin1.1 前言1.2 工作原理1.2.1 PERM模型1.2.2 Model语法1.2.2.1 Request定义1.2.2.2 Policy定义1.2.2.3 Policy effect定义1.2.2.4 角色定义1.2.2.5 匹配器1.2.2.6 完整model.conf 1.2.3 policy.csv 1.3 准备1.3.1 mavan依赖1.3.2 配置文件1.2.3 读取权限信息进…

Server - PyTorch BFloat16 “TypeError: Got unsupported ScalarType BFloat16“ 解决方案

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/132665807 BFloat16 类型是 16 位的浮点数格式,可以用来加速深度学习的计算和存储。BFloat16 类型的特点是保留 32 位浮点数&#xff…

龙智携手Atlassian和JFrog举办线下研讨会,探讨如何提升企业级开发效率与质量

2023年9月8日,龙智将携手Atlassian和JFrog于上海举办线下研讨会,以“大规模开发创新:如何提升企业级开发效率与质量”为主题,邀请龙智高级咨询顾问、Atlassian认证专家叶燕秀,紫龙游戏上海研发中心高级项目管理主管叶凯…

PHP8创建数组-PHP8知识详解

在php 8中,您可以使用以下方法创建数组:使用数组字面量创建数组、使用 array() 函数创建数组、通过赋值的方式创建数组、使用array_push()函数将元素添加到数组末尾、使用range()函数创建数值数组、使用compact()函数创建带有变量名的数组、使用array_fi…

C++ | 程序暂停功能

C | 程序暂停功能 文章目录 C | 程序暂停功能初衷rosbag 播包暂停功能源码 识别键盘输入(需输入Enter)识别键盘输入(无需输入Enter)opencv waitKey函数kill 信号包装成空格命令 Reference[C/C 获取键盘事件](https://www.runoob.c…

电动汽车电机驱动系统的组成和作用

1.电机驱动系统的作用与组成电动汽车电机驱动系统是新能源汽车的核心技术之一,它的主要任务是按驾驶员的驾驶意图,将动力电池的化学能高效地转化为机械能,经过变速器、驱动轴等机构驱动车轮。电动机驱动系统主要有电动机、功率器件和控制系统…

旅游APP外包开发注意事项

旅游类APP通常具有多种功能,以提供给用户更好的旅行体验。以下分享常见的旅游类APP功能以及在开发和使用这些APP时需要注意的问题,希望对大家有所帮助。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流合作。 常见功能…

C++智能指针之shared_ptr(保姆级教学)

目录 C智能指针之shared_ptr 本文涉及所有程序 工作原理 使用方法 手动初始化 std::make_shared函数(C14提出) 构造方法初始化 make_shared初始化 使用实例 shared_ptr常规操作 use_count(); unique(); reset(); get(); 指定删除器 移动…

确保浏览安全:使用SSH实施加密SOCKS5

在互联网上保护隐私和安全至关重要。使用SSH(Secure Shell)创建加密的SOCKS5代理是一种简单且有效的方法,可以确保您的网络流量在传输过程中受到保护。本文将向您介绍如何使用SSH实施加密SOCKS5,以提高您的浏览安全。 1、准备工作…

使用perf_analyzer和model-analyzer测试tritonserver的模型性能超详细完整版

导读 当我们在使用tritonserver部署模型之后,通常需要测试一下模型的服务QPS的能力,也就是1s我们的模型能处理多少的请求,也被称为吞吐量。 测试tritonserver模型服务的QPS通常有两种方法,一种是使用perf_analyzer 来测试&#…

递归/回溯/动规

1 动规-打家劫舍一 你是一个经验丰富的小偷,准备偷沿街的一排房间,每个房间都存有一定的现金,为了防止被发现,你不能偷相邻的两家,即,如果偷了第一家,就不能再偷第二家;如果偷了第二…