当前位置: 首页 > 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_…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

从零开始了解数据采集(二十八)——制造业数字孪生

近年来&#xff0c;我国的工业领域正经历一场前所未有的数字化变革&#xff0c;从“双碳目标”到工业互联网平台的推广&#xff0c;国家政策和市场需求共同推动了制造业的升级。在这场变革中&#xff0c;数字孪生技术成为备受关注的关键工具&#xff0c;它不仅让企业“看见”设…...

C++中vector类型的介绍和使用

文章目录 一、vector 类型的简介1.1 基本介绍1.2 常见用法示例1.3 常见成员函数简表 二、vector 数据的插入2.1 push_back() —— 在尾部插入一个元素2.2 emplace_back() —— 在尾部“就地”构造对象2.3 insert() —— 在任意位置插入一个或多个元素2.4 emplace() —— 在任意…...