【Web 前端开发】vue3开发环境部署

news2025/1/10 23:40:41

1、安装 Node.js 和 npm

访问 Node.js 官网 下载并安装最新的 LTS 版本。
安装完成后,打开命令行工具,
输入 node -v 和 npm -v 检查安装是否成功。

 node -v
 npm -v 

如下图:
在这里插入图片描述

2、安装 Vue CLI

在命令行工具中输入以下命令安装 Vue CLI:

npm install -g @vue/cli

安装完成后,输入 vue --version 检查 Vue CLI 是否安装成功。

vue --version 

如果出现异常,vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。

打开管理员终端,输入以下指令(签名或运行这些脚本)

set-ExecutionPolicy RemoteSigned 

再次输入指令,vue --version
在这里插入图片描述

3、创建 Vue 3 项目

使用 Vue CLI 创建一个新的 Vue 3 项目:
在自己的指定文件夹中打开终端

vue create my-project

选择 Vue 3 版本,并根据提示完成项目配置。
在这里插入图片描述
安装完成后如下图
在这里插入图片描述

4、启动开发服务器

进入项目目录:

cd my-project

启动开发服务器:

npm run serve

打开浏览器,访问 http://localhost:8080 查看项目运行情况。
如下图:
在这里插入图片描述

5、安装 VS Code(可选)

下载并安装 Visual Studio Code 作为代码编辑器。
安装 Vue.js 插件以获得更好的开发体验。

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

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

相关文章

【刷题汇总 -- 游游的重组偶数、体操队形、二叉树中的最大路径和】

C日常刷题积累 今日刷题汇总 - day0281、游游的重组偶数1.1、题目1.2、思路1.3、程序实现 2、体操队形2.1、题目2.2、思路2.3、程序实现 -- 递归(dfs) 剪枝 3、二叉树中的最大路径和3.1、题目3.2、思路3.3、程序实现 -- 递归树形dp 4、题目链接 今日刷题汇总 - day028 1、游游…

快递进小区太难了!大量快递到底放在哪里?

如今,快递小哥是市民生活中不可或缺的角色,但他们在服务城市、满足市民需求的同时,也会遇到一些不被居民理解的情况。 “为什么不让进小区” “一些高档小区管得严,不让我们快递员进小区送货,但是这个标注是送货上楼的…

Netty 必知必会(四)—— Channel-Pipeline 责任链

一、责任链模式 适用场景: 对于一个请求来说,如果每个对象都有机会处理它,而且不明确到底是哪个对象会处理请求时,我们可以考虑使用责任链模式实现它,让请求从链的头部往后移动,直到链上的一个节点成功处理了它为止 …

openeuler的mariadb数据库安装

下载数据库 yum install mariadb-server 如果出现文件冲突如下删除即可 yum remove selinux-policy-targeted --nobest --nobest 无视需求关系 systemctl enable --now mariadb.service #自启动 mysql_secure_installation 初始化Mysql根据自己需求填y|n 第一次进…

运动耳机界的“冠军之选”!奥运会冠军同款耳机曝光!

近期,相信大家的目光都被奥运会所吸引,作为一个有着多年使用蓝牙耳机经验的专业测评师,在此告诉大家,其实有很多奥运会选手在训练的时候会戴耳机,因为这样不仅可以缓解训练中的疲惫,而且可以增加训练的激情…

Docker Compose方式部署Ruoyi-前后端分离版本

目录 一. 环境准备 二. 制作一个jdk8u202环境的镜像 三. 制作nginx镜像 四. 对项目文件做修改 五. 项目打包 1. 前端打包 2. 后端打包 六. 编写docker-compose.yml 一. 环境准备 主机名IP系统软件版本配置信息localhost192.168.226.25Rocky_linux9.4 git version 2.4…

InfluxDB的安装与使用

目录 1.influxDB的下载地址:https://dl.influxdata.com/influxdb/releases/influxdb-1.8.3_windows_amd64.zip 2.在D盘创建一个influxDB的文件夹 3. 在安装目录输入cmd,执行influxd.exe 4.启动成功 5.下载nssm安装相关服务,下载地址https://nssm.cc/…

Xinstall全渠道统计服务,轻松掌握App用户全生命周期数据

在当今数字化时代,App的推广和运营显得尤为重要。然而,面对复杂多变的推广渠道和用户行为,如何精准地评估渠道效果、提升获客能力,成为了众多App运营者面临的难题。此时,Xinstall作为一站式App全渠道统计服务商&#x…

大麦网抢票攻略:使用Python Selenium实现

随着互联网技术的发展,在线购票已成为人们获取演出、比赛等活动门票的主要方式。然而,面对热门活动,门票往往在开售瞬间被抢购一空。为了解决这一问题,本文将介绍如何利用Python和Selenium技术实现大麦网的自动抢票。 1. 环境准备…

Linux线程1

守护进程 1.守护进程的特点 后台服务进程 独立于控制终端 周期性执行某任务 不受用户登录注销影响 一般采用以d结尾的名字(服务) 2 . 进 程 组 进程的组长 组里边的第 一 进程 进 程 组 的ID 进 程 中 的 组 长 的ID 进 程 中 组 长 的 选 择 …

SQL注入——搜索型注入

搜索型注入——原理介绍 一些网站为了方便用户查找网站的资源,都对用户提供了搜索的功能,因为是搜索功能,往往是程序员在编写代码时都忽略了对其变量(参数)的过滤,而且这样的漏洞在国内的系统中普遍的存在; 其中又分为 POST/GET…

实验2-5-2 生成3的乘方表

//实验2-5-2 生成3的乘方表//输入一个非负整数n&#xff0c;生成一张3的乘方表&#xff0c;输出30~3n的值。可调用幂函数计算3的乘方。 #include<stdio.h> #include<math.h> int main(){int n;int num0;scanf("%d",&n);//输入在一行中给出一个非负整…

Opencv threshold函数、adaptiveThreshold函数详解和示例

1.threshold函数 double cv::threshold(InputArray src, OutputArray dst, double thresh, double maxval, int type ) src&#xff1a;待二值化的图像&#xff0c;图像只能是 CV_8U 和 CV_32F 两种数据类型。对于图像通道数目的要求与选择的二值化方法相关。dst&#xff1a;…

全球汽车橡胶减震支架市场规划预测:未来六年CAGR为2.5%

随着汽车行业的持续发展和消费者对驾驶舒适性的需求增加&#xff0c;汽车橡胶减震支架作为提升车辆稳定性和乘坐舒适性的关键组件&#xff0c;正逐渐受到市场的广泛关注。本文旨在通过深度分析汽车橡胶减震支架行业的各个维度&#xff0c;揭示行业发展趋势和潜在机会。 【市场…

反序列化靶机serial漏洞复现 超详细教程

环境搭建 漏洞环境&#xff1a;https://www.vulnhub.com/entry/serial-1,349/ 下载后使用Vmware打开 创建新的虚拟机&#xff1a; 选择客户机版本为Ubuntu 64位&#xff1a; 一直下一步&#xff0c;知道选择使用现有磁盘&#xff1a; 选择下载的vmdk磁盘文件&#xff1a; 开机…

生信技能55 - WisecondorX分析结果过滤和质控

WisecondorX分析CNV,对每条染色的CNV loss和gain进行分组,对每个组求ratio平均值和zscore平均值,基于该数值对CNV进行质控和过滤,并对连续的CNV进行合并,获得可信的CNV。 WisecondorX基本使用方法以及npz文件转换和reference构建参考文章: 生信技能53 - wiseconrdoX自动…

利用扩散模型的反馈优化图片理解模型

利用扩散模型的反馈优化图片理解模型 自从 DDPM 以来&#xff0c;扩散模型已经成为了绝对主流的图片生成模型。最近&#xff0c;有研究者开始探索如何将扩散模型的生成能力用于提升判别模型的能力。主要有三种用法&#xff1a;生成模型反演用作判别模型、生成模型用于数据增强…

案例分享—国外优秀UI设计作品

国外 UI设计作品之所以出色&#xff0c;首先在于它们对用户体验的极致追求。设计师们深入了解用户需求&#xff0c;通过细腻的界面布局、直观的交互逻辑和丰富的视觉元素&#xff0c;打造出让用户爱不释手的作品。同时&#xff0c;他们勇于创新&#xff0c;不断尝试新的设计理念…

说说你们出来打工转了几个行业?

先说说我吧&#xff0c;大学毕业出来就从事智能交通刷卡方面&#xff0c;后来又从事多年的自动化控制&#xff0c;接着又做智能停车系统&#xff0c;接着又做医疗&#xff0c;美容仪器&#xff0c;仪器仪表&#xff0c;开关电源……做的有点杂&#xff0c;你们呢&#xff1f;一…

旧版本的Oracle OCM证书怎么升级到最新版本?

一、先来说一下OCM认证&#xff0c;全称是&#xff1a;Oracle Certified Master - Oracle认证大师&#xff0c;是Oracle数据管理员的最高级别的认证。 有了OCM证书&#xff0c;可以证明你的专业能力&#xff0c;是 Oracle 数据库管理方面具备高级和全面技能的权威认证。在竞争…