【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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

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读…

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

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

AFG EDI 解决方案

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

mac下配置JDK环境

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

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

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

企微SCRM营销平台MarketGo-ChatGPT助力私域运营

一、前言 ChatGPT是由OpenAI(开放人工智能)研发的自然语言处理模型,其全称为"Conversational Generative Pre-trained Transformer",即对话式预训练转换器。它是GPT系列模型的最新版本,GPT全称为"Gene…

指针进阶(一)

指针进阶 1. 字符指针面试题 2. 指针数组3. 数组指针3.1 数组指针的定义3.2 &数组名VS数组名 3.3 数组指针的使用4. 数组传参和指针传参4.1 一维数组传参4.2 二维数组传参4.3 一级指针传参4.4 二级指针传参 前言 指针的主题,我们在初级阶段的《指针》章节已经接…

NLP(2)--Transformer

目录 一、Transformer概述 二、输入和输出 三、Encoder 四、Decoder 五、正则化处理 六、对于结构的改进? 七、AT vs NAT 八、Cross-attention 一、Transformer概述 Transformer模型发表于2017年Google团队的Attention is All you need这篇论文,…

蓝桥杯打卡Day1

文章目录 全排列八皇后 一、全排列IO链接 本题思路:本题是一道经典的全排列问题&#xff0c;深度优先搜索即可解决。 #include <bits/stdc.h>constexpr int N10;std::string s; std::string ans; int n; bool st[N];void dfs(int u) {if(un){std::cout<<ans<…

前后端数据加密传输基于AES+RSA实现

前后端数据加密传输基于AESRSA实现 什么是AES和RSA AES AES&#xff08;Advanced Encryption Standard&#xff09;是一种对称加密算法&#xff0c;它的加密速度快&#xff0c;安全性也比较高&#xff0c;是目前广泛使用的加密算法之一。AES的密钥长度可以选择128位、192位和…

NetSuite海鲜书 - 知识会汇编 用户篇 2023

NetSuite2021年初夏&#xff0c;NetSuite知识会成立。它由本人&#xff0c;上海德之匠信息技术有限公司的毛岩喆&#xff08;江湖人称Rick&#xff09;发起建立。建立的初衷秉承Rick个人博客“学问思辨&#xff0c;企业信息化路上的行者”的理念&#xff0c;期望能够在NetSuite…

Flink基础

Flink architecture job manager is master task managers are workers task slot is a unit of resource in cluster, number of slot is equal to number of cores(超线程则slot2*cores), slot一组内存一些线程共享CPU when starting a cluster,job manager will allocate a …

docker快速安装-docker一键安装脚本

1.下载/配置安装脚本 touch install-docker.sh #!/bin/bash #mail:ratelcloudqq.com #system:centos7 #integration: docker-latestclear echo "######################################################" echo "# Auto Install Docker …

大数据组件-Flume集群环境搭建

&#x1f947;&#x1f947;【大数据学习记录篇】-持续更新中~&#x1f947;&#x1f947; 个人主页&#xff1a;beixi 本文章收录于专栏&#xff08;点击传送&#xff09;&#xff1a;【大数据学习】 &#x1f493;&#x1f493;持续更新中&#xff0c;感谢各位前辈朋友们支持…

AOP到底是啥

AOP到底是啥 前言面向切面编程到底是啥意思那么要怎么实现面向切面编程呢&#xff1f;成果 前言 回忆起来&#xff0c;第一次听到这三字母是博主在上大二的时候&#xff0c;那时候看的一脸懵逼&#xff0c;现在马上研二了才想起来回顾下。 只记得当时面向对象编程还没整明白&…

TDengine(2):wsl2+ubuntu20.04+TDengine安装

一、ubuntu系统下提供了三种安装TDengine的方式&#xff1a; 二、通过 apt 指令安装失败 因为是linux初学者&#xff0c;对apt 指令较为熟悉&#xff0c;因此首先使用了该方式进行安装。 wget -qO - http://repos.taosdata.com/tdengine.key | sudo apt-key add -echo "…