【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.mzph.cn/news/69652.shtml

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

相关文章

React Hooks总览

总览 hooks 功能分类具体 hooks具体功能React v18新特性跨端支持数据更新驱动useState定义要在页面中渲染的数据❌✔useReducer定义要在页面中渲染的数据,且这个数据有多种处理逻辑❌✔useSyncExternalStoreconcurrent 模式下,订阅外部 store 的行为&am…

hive anti join 的几种写法

t_a 表的记录如下 c1 | :———— | a | b | c | 生成 SQL 如下: create table t_a(c1 string); insert into t_a values("a"),("b"),("c");t_b 表的记录如下 c1bm 生成 SQL 如下: create table t_b(c1 string); in…

Java低代码开发:jvs-list(列表引擎)功能(一)配置说明

在低代码开发平台中,列表页是一个用于显示数据列表的页面。它通常用于展示数据库中的多条记录,并提供搜索、排序和筛选等功能,以方便用户对数据进行查找和浏览。 jvs-list是jvs快速开发平台的列表页的配置引擎,它和普通的crud 具…

什么是SpringCloud Eureka服务注册与发现

😀前言 本篇博文是关于SpringCloud Eureka 介绍,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力&…

CS420 课程笔记 P4 - 以16进制形态编辑游戏文件

文章目录 IntroductionFinding save filesStringsUnicodeExample!Value searchHealth searchConclusion Introduction 这节课我们将学习编辑十六进制,主要用于编辑保存文件,但十六进制编辑涉及的技能可以很好地转移到: Save file editingRe…

【go-zero】使用自带Redis方法

yaml配置文件 RedisS:Host: Type: Pass: config增加 RedisS struct {Host stringType stringPass string}svc文件 type * struct {RedisClient *redis.Redis } func *(c config.Config) * {sqlConn : sqlx.NewMysql(c.DB.DataSource)return &*{RedisClient: redis.New(c…

linux配置网络的几种常用方法

linux配置ip地址有多种不同的方法,大家可以根据自己的需要来使用不同的方法配置ip地址。 方法一 ifconfig命令 使用 ifconfig 命令配置 IP 地址ifconfig 命令用于查看和配置网络接口, 可以使用该命令为网络接口配置 IP 地址。假设需要配置 eth0 网卡的…

Flutter实现CombineExecutor进行多个异步分组监听,监听第一个异步执行的开始和最后一个异步执行结束时机。

1.场景 我们在调用接口时,很多时候会同时调用多个接口,接口都是异步执行,我们很难知道调用的多个接口哪个会最后执行完成,我们有时候需要对最后一个接口执行完成的时机监听,所以基于该需求,设计了CombineE…

Shell 运算符及语法结构

目录 一、Shell运算符 1.1 表达式expr 1.2 运算操作 1.3 操作实例 二、Shell条件判断 2.1 基本语法 2.2 值、权限、类型、多条件判断 三、Shell流程控制 3.1 if 流程语法 3.2 case 流程语法 3.3 for 流程语法 3.4 内部运算符 3.5 while循环流程语法 四、Shell读…

TOOLLLM: FACILITATING LARGE LANGUAGE MODELS TO MASTER 16000+ REAL-WORLD APIS

本文是LLM系列的文章之一,针对《TOOLLLM: FACILITATING LARGE LANGUAGE MODELS TO MASTER 16000 REAL-WORLD APIS》的翻译。 TOOLLLMs:让大模型掌握16000的真实世界APIs 摘要1 引言2 数据集构建3 实验4 相关工作5 结论 摘要 尽管开源大型语言模型&…

前端图形图像的框架

前端图形图像方面有许多强大的框架和库,使得开发者能够更容易地创建丰富的视觉效果和复杂的图形应用。下面列举了一些主要的框架和库: 1. Three.js Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了相…

如何将两个pdf合并成一个?pdf合并技巧分享

在日常工作过程当中,我们经常需要处理一些文件,而文件的处理往往是琐碎的,想要提高工作效率,需要选择一些合适的方法,并掌握一定的技巧,那么,如何将两个pdf合并成一个?pdf合并技巧有哪些呢?接…

java实现状态模式

状态模式是一种行为设计模式,它允许对象在内部状态改变时改变其行为。在状态模式中,对象将其行为委托给表示不同状态的状态对象,这些状态对象负责管理其行为。以下是在 Java 中实现状态模式的一般步骤: 创建一个状态接口&#xff…

AFG EDI 解决方案

AFG一直是汽车行业出境物流的专家,不仅运输汽车,同时也提供模块化IT解决方案,用于接收、控制、互联以及整个车辆调度过程的可视化和监控。 对于物流行业而言,如果已经确定了供应链整合的目标,但却没有明确的计划及足够…

【线上问题】很抱歉,如果没有 JavaScript 支持,将不能正常工作

目录 一、问题说明二、解决方式 一、问题说明 1.修改了nginx的配置 2.postman调用接口正常,浏览器访问接口200,但无数据 3.浏览器访问,nginx没有访问记录,接口请求到不了应用服务 4.原因不祥 二、解决方式 1.清理了浏览器缓存

mac下配置JDK环境

一、下载安装 下载地址:Java Downloads | Oracle,选择适用于Mac OS的JDK版本,点击下载即可。 下载完之后,直接安装: 安装过程非常简单,按“继续”按钮一直下一步即可。 二、配置环境变量 上一步骤&#x…

c++线程

pthread(部分内容来自菜鸟教程) 创建线程 创建一个 POSIX 线程&#xff1a; #include <pthread.h> pthread_create (thread, attr, start_routine, arg) pthread_create 创建一个新的线程&#xff0c;并让它可执行。 参数&#xff1a; thread &#xff1a;指向线程标…

Opencv 图像金字塔----高斯和拉普拉斯

原文&#xff1a;图像金字塔----高斯和拉普拉斯 图像金字塔是图像中多尺度表达的一种&#xff0c;最初用于机器视觉和图像压缩&#xff0c;最主要用于图像的分割、融合。 高斯金字塔 ( Gaussian pyramid): 高斯金字塔是由底部的最大分辨率图像逐次向下采样得到的一系列图像…

基于docker快速搭建facechain环境

前言 最近facechain比较火&#xff0c;之前在huggingface试过&#xff0c;在SD的落地场景上提供了思路。 这两天刚拿到一台RTX3090的服务器&#xff0c;在本地部署也遇到了两个问题&#xff0c;给大家分享一下。 一、facechain是什么&#xff1f; 官方是这样说的&#xff1a…

(九)mmdetection源码解读:训练过程中训练数据的调用DataLoader

目录 一、DataLoader创建过程中二、利用实例化data_loaders进行训练 一、DataLoader创建过程中 在训练过程train_detector函数中调用build_dataloader函数 train_detector(model, datasets, cfg, distributedFalse, validateTrue) #train_detector函数中 data_loaders [buil…