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

1、安装 Node.js 和 npm

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

 node -vnpm -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.rhkb.cn/news/388691.html

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

相关文章

微信小程序开发:宿主环境—组件

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

详解DDR3原理以及使用Xilinx MIG IP核(app 接口)实现DDR3读写测试

系列文章目录 (1)详解SDRAM基本原理以及FPGA实现读写控制 文章目录 系列文章目录一、DDR简介1.1 什么是 SDRAM、DDR、DDR2、DDR31.2 SDRAM、DDR、DDR2、DDR3核心频率、工作频率以及等效频率的计算1.3 DDR3带宽以及容量的计算 二、MIG IP核的介绍三、MIG…

机器学习 第8章-集成学习

机器学习 第8章-集成学习 8.1 个体与集成 集成学习(ensemble learning)通过构建并结合多个学习器来完成学习任务,有时也被称为多分类器系统(multi-classifersystem)、基于委员会的学习(committee-based learning)等。 图8.1显示出集成学习的一般结构:先产生一组“…

【附安装包】CentOS7(Linux)详细安装教程(手把手图文详解版)

目前流行的虚拟机软件有VMware、Virtual Box和Virtual PC等等,其中最常用的就是VMware。 而centos是Linux使用最广泛的版本之一。 教程开始教程有许多不完备之处,大佬请忽略。。。 1.安装VMware 首先需要准备VMware的安装包以及Ubuntu的ISO镜像&#…

鸿蒙系统开发【设备安全服务-应用设备状态检测】安全

设备安全服务-应用设备状态检测 介绍 本示例向您介绍如何在应用中获取DeviceToken用于对应用的设备状态进行检测。 需要使用设备安全服务接口 kit.DeviceSecurityKit。 效果预览 Sample工程的配置与使用 在DevEco中配置Sample工程的步骤如下 [创建项目]及[应用]。打开Sam…

数据结构与算法 - 递归

一、递归 1. 概述 定义:在计算机科学中,递归是一种解决计算问题的方法,其中解决方案取决于同一类问题的更小子集。 比如单链表递归遍历的例子: void f(Node node) {if(node null) {return;}println("before:" node…

Animate软件基础:在时间轴中添加或插入帧

FlashASer:AdobeAnimate2021软件零基础入门教程https://zhuanlan.zhihu.com/p/633230084 FlashASer:实用的各种Adobe Animate软件教程https://zhuanlan.zhihu.com/p/675680471 FlashASer:Animate教程及作品源文件https://zhuanlan.zhihu.co…

软件测试--python基础

一、python基础 (1)第一个python (2)python解释器 (3)基础语法 ①字面量 什么是字面量 常用的值类型 字符串 ②注释 ③变量 什么是变量 变量的特征 变量的目的是存储运行过程的数据 存储的目的是为了:重复使用 ④数据类型 type()语句 变量有类型吗?…

在欧拉系统中安装数据库

在欧拉系统中的安装 (禁止超级用户root登录) yum install mariadb-server -y #下载命令 systemctl enable --now mariadb #设置为开机自启,并立即启动该服务 mysql_secure_installation #安全设置,初始化 修…

C语言数据在内存中的存储超详解

文章目录 1. 整数在内存中的存储2. 大小端字节序和字节序判断2. 1 什么是大小端?2. 2 为什么会有大小端?2. 3 练习 3. 浮点数在内存中的存储3. 1 一个代码3. 2 浮点数的存储3. 2. 1 浮点数存的过程3. 2. 2 浮点数取的过程3. 3 题目解析 1. 整数在内存中的…

ctfshow-web入门-sql注入(web171-web175)

目录 1、web171 2、web172 3、web173 4、web174 5、web175 1、web171 单引号测一下,报错 -- 闭合后回显正常 也可以用 # ,不过需要 URL 编码 成功闭合之后,先判断下字段数: 1 order by 3-- 3 的时候正常 4 的时候报错&am…

C++必修:STL之vector的了解与使用

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 🎈🎈养成好习惯,先赞后看哦~🎈🎈 所属专栏:C学习 贝蒂的主页:Betty’s blog 1. C/C中的数组 1.1. C语言中的数组 在 C 语言中,数组是一组相同类型…

泰迪智能科技AI大模型某医院合作案例介绍

泰迪智能科技AI大模型支持以ChatGLM2-6B、Baichuan-13B、Qwen14B和文心一言等多种大语言模型为底座,实现基于特定领域数据、面向智能客服、问答系统、自动摘要、智能打标、内容创作、信息抽取等应用场景的模型微调、评估和推理,为业务智能升级和价值挖掘…

【C++从小白到大牛】类和对象

目录 一、面向过程和面向对象初步认识 二、类的引入 三、类的定义 类的成员函数两种定义方式: 1. 声明和定义全部放在类体中 2. 类声明放在.h文件中,成员函数定义放在.cpp文件中 成员变量命名规则的建议: 四、类的访问限定符 【访问限…

本地部署持续集成工具Jenkins并配置公网地址实现远程自动化构建

文章目录 前言1. 安装Jenkins2. 局域网访问Jenkins3. 安装 cpolar内网穿透软件4. 配置Jenkins公网访问地址5. 公网远程访问Jenkins6. 固定公网地址 前言 本文主要介绍如何在Linux CentOS 7中安装Jenkins并结合cpolar内网穿透工具实现远程访问管理本地部署的Jenkins服务. Jenk…

大模型算法面试题(十八)

本系列收纳各种大模型面试题及答案。 1、P-tuning v2 思路、优缺点是什么 P-tuning v2是清华大学自然语言处理实验室(THUDM)等研究机构提出的一种新的预训练模型优化方法,主要关注如何通过动态构建任务相关的提示序列来引导预训练模型进行更…

【数据结构进阶】手撕红黑树

🔥个人主页: Forcible Bug Maker 🔥专栏: C || 数据结构 目录 🌈前言🔥红黑树的概念🔥手撕红黑树红黑树结点的定义红黑树主体需要实现的成员函数红黑树的插入findEmpty和Size拷贝构造析构函数和…

Redis和Mysql如何保持数据一致性

一般情况下,Redis是用来实现应用和数据库之间读操作得缓存层,主要目的是减少数据库IO,还可以提升数据的IO性能。 当应用程序需要去读取某个数据时,会首先尝试去Redis里面加载,如果命中就直接返回,如果没有…

C++ 操作Git仓库

代码 #include "common.h" #include "args.c" #include "common.c"enum index_mode {INDEX_NONE,INDEX_ADD };struct index_options {int dry_run;int verbose;git_repository* repo;enum index_mode mode;int add_update; };/* Forward declar…

vue项目Nginx部署启动

1.vue打包 (1)package.json增加打包命令 "scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 10.16.14.110","start": "npm run dev","un…