当前位置: 首页 > news >正文

学习使用在windows系统上安装vue前端框架以及环境配置图文教程

学习使用在windows系统上安装vue前端框架以及环境配置图文教程

    • 1、安装nodejs
    • 2、安装vue
    • 3、安装Vue-cli脚手架
    • 4、安装高版本
    • 5、创建vue项目
    • 6、启动项目
    • 7、配置开发环境
    • 8、发布项目

1、安装nodejs

点我查看教程

2、安装vue

win+R,打开cmd

在这里插入图片描述

cnpm install vue -g

在这里插入图片描述
表示安装成功

3、安装Vue-cli脚手架

cnpm install -g vue-cli

在这里插入图片描述验证vue是否安装成功

vue -V

在这里插入图片描述
可以看到vue的版本号,如果需要安装3.x版本,将vue-cli改为@vue/cli即可

卸载旧版本命令

npm uninstall -g vue-cli

在这里插入图片描述

安装之前先卸载旧版本 npm uninstall -g @vue/cli
安装3.0及其以后版本 npm install -g @vue/cli@x.x.x
安装3.0以前的旧版本 npm install -g vue-cli@2.x

4、安装高版本

cnpm install -g @vue/cli

使用cnpm更快,npm太慢了
在这里插入图片描述再次执行

vue -V

在这里插入图片描述

5、创建vue项目

确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。我本地是在D盘下创建了一个vue的文件夹,
在这里插入图片描述
在命令行中运行以下命令

npm create vue@latest

或者

npm  init vue@latest

执行会看到以下内容,可以点击yes,或者no,根据自己的需求选择,不知道就回车,按默认选项安装即可
在这里插入图片描述执行

npm install
npm run format

在这里插入图片描述

6、启动项目

npm run dev

在这里插入图片描述在浏览器中访问

http://localhost:5173/

在这里插入图片描述vue项目启动成功

7、配置开发环境

推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展

在这里插入图片描述默认都是白色代码,安装插件后,不用重启vscode,可以看到代码已经有颜色了,方便查看函数和开发

在这里插入图片描述

8、发布项目

当你准备将应用发布到生产环境时,请运行:

npm run build

在这里插入图片描述

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本

在这里插入图片描述

相关文章:

学习使用在windows系统上安装vue前端框架以及环境配置图文教程

学习使用在windows系统上安装vue前端框架以及环境配置图文教程 1、安装nodejs2、安装vue3、安装Vue-cli脚手架4、安装高版本5、创建vue项目6、启动项目7、配置开发环境8、发布项目 1、安装nodejs 点我查看教程 2、安装vue winR,打开cmd cnpm install vue -g表示安…...

基于Delphi的题库生成系统

基于Delphi的题库生成系统是一个复杂的项目,涉及到多个模块的设计和实现。以下是一个简化的代码案例,展示了如何使用Delphi构建一个基本的题库生成系统。 1. 数据库设计 首先,你需要设计一个数据库来存储试题信息。一个简单的数据库设计可…...

鸿蒙OpenHarmony【小型系统基础内核(进程管理任务)】子系统开发

任务 基本概念 从系统的角度看,任务Task是竞争系统资源的最小运行单元。任务可以使用或等待CPU、使用内存空间等系统资源,并独立于其它任务运行。 OpenHarmony 内核中使用一个任务表示一个线程。 OpenHarmony 内核中同优先级进程内的任务统一调度、运…...

SpringBoot框架下的客户管理策略

1 绪论 1.1研究背景 随着网络不断的普及发展,企业客户管理系统依靠网络技术的支持得到了快速的发展,首先要从员工的实际需求出发,通过了解员工的需求开发出具有针对性的首页、个人中心、员工管理、客户信息管理、行业类型管理、项目信息管理、…...

GreenPlum与PostgreSQL数据库

*** Greenplum*** 是一款开源数据仓库。基于开源的PostgreSQL改造,主要用来处理大规模数据分析任务,相比Hadoop,Greenplum更适合做大数据的存储、计算和分析引擎 它本质上是多个PostgreSQL面向磁盘的数据库实例一起工作形成的一个紧密结合的数…...

CVE-2024-46101

前言 自己挖的第一个CVE~ 喜提critical 这里简单说一下。 漏洞简介 GDidees CMS < 3.9.1 的版本&#xff0c;存在一个任意文件上传漏洞。允许登录后的攻击者上传webshell获得网站的权限。 影响版本&#xff1a; GDidees CMS < 3.9.1 &#xff08;其它的我没测。。&am…...

PHPStorm如何调整字体大小

01 02...

string 的介绍及使用

一.string类介绍 C语言中&#xff0c;字符串是以’\0’结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c;但是这些库函数与字符串是分离开的&#xff0c;不太符合OOP的思想&#xff0c;而且底层空间需要用户自己管理&a…...

高等数学的后续课程

1. 高等数学的后续课程 复变函数&#xff1a;研究复数的函数及其性质&#xff0c;包含解析函数、积分理论和应用。偏微分方程&#xff1a;处理涉及多个变量的微分方程&#xff0c;应用于物理、工程等领域。数学分析&#xff1a;更深入地研究极限、连续性、导数和积分等概念&am…...

基于 K8S kubernetes 搭建 安装 EFK日志收集平台

目录 1、在k8s中安装EFK组件 1.1 安装elasticsearch组件 1.2 安装kibana组件 1.3 安装fluentd组件 文档中的YAML文件配置直接复制粘贴可能存在格式错误&#xff0c;故实验中所需要的YAML文件以及本地包均打包至网盘 链接&#xff1a;https://pan.baidu.com/s/15Ryaoa0_…...

浅谈分布式系统

单机架构 单机架构就是只有一台服务器&#xff0c;这台服务器负责所有的工作。 初期&#xff0c;在用户访问量很少&#xff0c;没有对我们的性能、安全等提出很高的要求&#xff0c;而且系统架构简单&#xff0c;无需专业的运维团队&#xff0c;所以选择单机架构是合适的。 当…...

QT 自定义可拖动缩放的无边框窗口,可用于mainmindow, widget

1. 用于拖动&#xff0c;缩放的工具类 “WindowControl.h” #ifndef WINDOWCONTROL_H #define WINDOWCONTROL_H#include <QObject> #include <QRubberBand> #include <QStyleOptionFocusRect> #include <QStylePainter>class RubberBand; class Curs…...

鸿蒙 OS 开发零基础快速入门教程

视频课程: 东西比较多, 这里主要分享一些代码和案例. 开关灯效果案例: 开灯 开关灯效果案例: 关灯 Column 和 Row 的基本用法 Entry Component struct Index {State message: string 张三;build() {// 一行内容Row() {// 一列内容Column() {// 文本内容Text(this.mess…...

yolo介绍

YOLO&#xff08;You Only Look Once&#xff09;是一种目标检测算法。 一、主要特点 1. 速度快&#xff1a;YOLO 能够快速处理图像&#xff0c;实现实时目标检测。与其他一些目标检测算法相比&#xff0c;它在处理速度上具有明显优势&#xff0c;可以满足对实时性要求较高的应…...

传输层 II(TCP协议——协议的特点、报文段、连接管理)【★★★★】

&#xff08;★★&#xff09;代表非常重要的知识点&#xff0c;&#xff08;★&#xff09;代表重要的知识点。 一、TCP 协议的特点 TCP 是在不可靠的 IP 层之上实现的可靠的数据传输协议&#xff0c;它主要解决传输的可靠、有序、无丢失和不重复问题。TCP 是 TCP/IP 体系中非…...

质量小议47 - AI写用例

试着用AI写测试用例 AI替代基础性工作&#xff0c;帮助人思考&#xff0c;将会是更全面、更细致 时替代还是辅助 提问&#xff1a;密码输入框 测试用例评价指标- 功能性 - 可靠性 - 易用性 - 效率- 可维护性 - 可移植性基本思路 - 输入&#xff1a;遵从设计逻辑 和 系…...

etcd 集群搭建与测试指南

etcd 集群搭建与测试指南 一、容器搭建 1. 拉取 etcd 镜像 首先&#xff0c;需要从 Docker Hub 拉取 etcd 的镜像&#xff1a; docker pull quay.io/coreos/etcd:v3.3.12. 创建自定义网络 为了设置容器的固定 IP&#xff0c;需要创建一个自定义网络&#xff1a; docker n…...

写毕业论文用什么软件?分享6款好用的AI论文写作软件网站

撰写毕业论文是一项既重要又具挑战性的任务&#xff0c;尤其是在当今数字化时代&#xff0c;AI写作工具已经成为大学生撰写毕业论文的重要辅助手段。这些工具不仅能够提高写作效率&#xff0c;还能帮助学生生成高质量的文稿。以下是六款备受推荐的AI写毕业论文软件&#xff0c;…...

【技术解析】wx.request 封装:优化小程序网络请求的最佳实践

在当今的小程序开发领域&#xff0c;网络请求是构建动态应用的核心。微信小程序提供的 wx.request API 虽然强大&#xff0c;但在面对复杂业务逻辑时&#xff0c;其直接使用方式可能会带来一系列问题。本文将深入探讨封装 wx.request 的必要性&#xff0c;并提供一套实用的封装…...

9.24 C++ 常成员,运算符重载

//my_string.cpp #include "my_string.h" #include <iostream> #include <cstring>using namespace std;My_string::My_string():size(15){this->ptr new char[size];this->ptr[0] \0; //表示串为空串this->len 0;}//有参构造My_…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...