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

Vue项目搭建教程超详细

目录

一. 环境准备

1. 安装node.js

2. 安装Vue cli

二. 创建 Vue 2 项目 

1. 命令行方式

2. vue ui方式


一. 环境准备

1. 安装node.js

可参考node.js卸载与安装超详细教程-CSDN博客

2. 安装Vue cli

npm install -g @vue/cli

检查是否安装成功

vue --version 

Vue CLI 5.0.8 支持创建不同版本的 Vue 项目,包括 Vue 2 和 Vue 3。

二. 创建 Vue 2 项目 

1. 命令行方式

在合适的位置,创建vue的工作目录,我选择的是D盘下的desktop

C:\WINDOWS\System32>d:D:\>cd desktopD:\desktop>mkdir Vue-workspace   //创建工作目录D:\desktop>cd Vue-workspace

使用以下命令创建vue项目

vue create 项目名

在创建过程中,你会被提示选择 Vue 版本。选择 Vue 2 选项,如下所示:

根据自己的情况,选择合适的版本,我选的的是vue2

项目创建完成后,你可以进入项目目录并启动开发服务器:

cd hello-world
npm run serve

 

在浏览器输入localhost:8081:

 脚手架创建成功!

停止服务

两下Ctrl+C 或者Ctrl+C一下然后Y

2. vue ui方式

2.1 进入vue资源管理器界面(vue ui界面)

2.2 创建项目

2.3 配置信息:

点击下一步

2.4 选择预设,或者自定义

然后下一步完成创建

2.5 启动运行项目

按步骤来:任务>serve>运行>启动

 以上就是搭建vue脚手架的两种方式。

相关文章:

Vue项目搭建教程超详细

目录 一. 环境准备 1. 安装node.js 2. 安装Vue cli 二. 创建 Vue 2 项目 1. 命令行方式 2. vue ui方式 一. 环境准备 1. 安装node.js 可参考node.js卸载与安装超详细教程-CSDN博客 2. 安装Vue cli npm install -g vue/cli检查是否安装成功 vue --version Vue CLI …...

2025年01月蓝桥杯Scratch1月stema选拔赛真题—美丽的图形

美丽的图形 编程实现美丽的图形具体要求: 1)点击绿旗,角色在舞台中心,如图所示; 2)1秒后,绘制一个边长为 140的红色大正方形,线条粗细为 3,正方形的中心为舞台中心,如图所示; 完整题目可点击下…...

【React】插槽渲染机制

目录 通过 children 属性结合条件渲染通过 children 和 slot 属性实现具名插槽通过 props 实现具名插槽 在 React 中,并没有直接类似于 Vue 中的“插槽”机制(slot)。但是,React 可以通过 props和 children 来实现类似插槽的功能…...

计算机网络 | 什么是公网、私网、NAT?

关注:CodingTechWork 引言 计算机网络是现代信息社会的基石,而网络通信的顺畅性和安全性依赖于有效的IP地址管理和网络转换机制。在网络中,IP地址起到了标识设备和进行数据传输的核心作用。本文将详细讨论公网IP、私网IP以及NAT转换等网络技…...

如何解决Outlook无法连接到服务器的问题

Microsoft Outlook 是一款广泛使用的电子邮件客户端,它能够帮助用户高效地管理邮箱、日历和任务。然而,尽管其功能强大,用户有时会遇到“Outlook无法连接到服务器”的问题。这种问题通常会让用户无法接收或发送电子邮件,甚至可能导…...

vue2 web 多标签输入框 elinput是否当前焦点

又来分享一点点工作积累及解决方案 产品中需要用户输入一些文字后按下回车键生成标签来显示在页面上&#xff0c;经过尝试与改造完成如下&#xff1a; <template><div class"tags-view" click"beginInput"><el-tag :key"index" …...

32单片机综合应用案例——物联网(IoT)环境监测站(四)(内附详细代码讲解!!!)

无论你身处何种困境&#xff0c;都要坚持下去&#xff0c;因为勇气和毅力是成功的基石。不要害怕失败&#xff0c;因为失败并不代表终结&#xff0c;而是为了成长和进步。相信自己的能力&#xff0c;相信自己的潜力&#xff0c;相信自己可以克服一切困难。成功需要付出努力和坚…...

LabVIEW与WPS文件格式的兼容性

LabVIEW 本身并不原生支持将文件直接保存为 WPS 格式&#xff08;如 WPS 文档或表格&#xff09;。然而&#xff0c;可以通过几种间接的方式实现这一目标&#xff0c;确保您能将 LabVIEW 中的数据或报告转换为 WPS 可兼容的格式。以下是几种常见的解决方案&#xff1a; ​ 导出…...

小结: 路由协议的演进和分类

路由协议的演进和分类&#xff0c;包括其发展历史及主要应用场景。路由协议用于在网络中确定数据传输的最佳路径&#xff0c;主要分为内部网关协议&#xff08;IGP&#xff09;和外部网关协议&#xff08;EGP&#xff09; AS-AS 之间的。 路由协议的演进 1982年&#xff1a;出…...

OpenCV相机标定与3D重建(60)用于立体校正的函数stereoRectify()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 为已校准的立体相机的每个头计算校正变换。 cv::stereoRectify 是 OpenCV 中用于立体校正的函数&#xff0c;它基于已知的相机参数和相对位置&am…...

Android wifi列表中去自身的热点

Android wifi列表中去自身的热点 一、前言 Android wifi列表中能搜索到自身的热点wifi&#xff1f; 正常手机上都不会出现这个问题&#xff1b;可能是系统底层已经做了过滤处理。 现实开发中Android设备的Wifi能搜索到自身热点也可能会存在。 比如基于两个单独的wifi双模组硬…...

Windows环境本地配置pyspark环境详细教程

目录 一、背景简记二、本地单机spark环境配置详细步骤第一步&#xff1a;python环境安装第二步&#xff1a;安装jdk及配置环境变量安装包下载安装环境变量配置 第三步&#xff1a;安装Spark安装包下载安装配置环境变量 第四步&#xff1a;安装hadoop安装包下载安装配置环境变量…...

《自动驾驶与机器人中的SLAM技术》ch9:自动驾驶车辆的离线地图构建

目录 1 点云建图的流程 2 前端实现 2.1 前端流程 2.2 前端结果 3 后端位姿图优化与异常值剔除 3.1 两阶段优化流程 3.2 优化结果 ① 第一阶段优化结果 ② 第二阶段优化结果 4 回环检测 4.1 回环检测流程 ① 遍历第一阶段优化轨迹中的关键帧。 ② 并发计算候选回环对…...

IP属地会随着人的移动而改变吗

在当今数字化时代&#xff0c;互联网已成为人们生活中不可或缺的一部分。无论是社交媒体的日常互动&#xff0c;还是在线购物、远程工作&#xff0c;IP地址作为网络身份的重要标识&#xff0c;扮演着举足轻重的角色。随着移动互联网技术的飞速发展&#xff0c;人们越来越多地在…...

openharmony应用开发快速入门

开发准备 本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用&#xff08;如下图所示&#xff09;&#xff0c;快速了解工程目录的主要文件&#xff0c;熟悉OpenHarmony应用开发流程。 在开始之前&#xff0c;您需要了解有关OpenHarmon…...

USB3020任意波形发生器4路16位同步模拟量输出卡1MS/s频率 阿尔泰科技

信息社会的发展&#xff0c;在很大程度上取决于信息与信号处理技术的先进性。数字信号处理技术的出现改变了信息 与信号处理技术的整个面貌&#xff0c;而数据采集作为数字信号处理的必不可少的前期工作在整个数字系统中起到关键 性、乃至决定性的作用&#xff0c;其应用已经深…...

云消息队列 Kafka 版 V3 系列荣获信通院“云原生技术创新标杆案例”

2024 年 12 月 24 日&#xff0c;由中国信息通信研究院&#xff08;以下简称“中国信通院”&#xff09;主办的“2025 中国信通院深度观察报告会&#xff1a;算力互联网分论坛”&#xff0c;在北京隆重召开。本次论坛以“算力互联网 新质生产力”为主题&#xff0c;全面展示中国…...

linux下的NFS和FTP部署

目录 NFS应用场景架构通信原理部署权限认证Kerberos5其他认证方式 命令serverclient查看测试系统重启后自动挂载 NFS 共享 高可用实现 FTP对比一些ftp服务器1. **vsftpd (Very Secure FTP Daemon)**2. **ProFTPD (Professional FTP Daemon)**3. **Pure-FTPd**4. **WU-FTPD (Was…...

JS Clipboard API

1.作用 在web应用程序中&#xff0c;当用户授予了相应的权限&#xff0c;Clipboard API 就能实现系统剪切板的复制、粘贴和剪切功能。系统剪切板暴露在Navigator.clipboard 中。 2.例子 window.onload () > {// 监听用户的复制事件document.addEventListener(copy, (e) …...

MySQL中大量数据优化方案

文章目录 1 大量数据优化1.1 引言1.2 评估表数据体量1.2.1 表容量1.2.2 磁盘空间1.2.3 实例容量 1.3 出现问题的原因1.4 解决问题1.4.1 数据表分区1.4.1.1 简介1.4.1.2 分区限制和执行计划1.4.1.3 分区表的索引1.4.1.4 为什么分区键必须是主键的一部分1.4.1.5 操作分区1.4.1.5.…...

Unity安卓构建72小时实战指南:从零到真机运行

1. 这不是“又一本Unity教程”&#xff0c;而是我带三个新人从零上线第一款安卓游戏的真实路径你点开这个标题&#xff0c;大概率正站在两个路口之间&#xff1a;一边是满屏“30天速成Unity”“零基础做爆款”的短视频封面&#xff0c;一边是你刚下载完Unity Hub、卡在Android …...

2026在线测评系统十大量表对比:信效度与场景全解析

【30s 核心摘要】2026 年在线测评成人才管理刚需&#xff0c;信效度与场景适配成选型核心。本文聚焦十大量表&#xff0c;从信度、效度、适配场景等维度深度对比&#xff0c;重点解析问卷星、北森、金数据等主流平台的量表能力与落地效果&#xff0c;为企业、高校及机构提供科学…...

BetterJoy完整配置指南:5分钟让Switch手柄在PC上完美运行

BetterJoy完整配置指南&#xff1a;5分钟让Switch手柄在PC上完美运行 【免费下载链接】BetterJoy Allows the Nintendo Switch Pro Controller, Joycons and SNES controller to be used with CEMU, Citra, Dolphin, Yuzu and as generic XInput 项目地址: https://gitcode.c…...

自制BLE112串口编程器:基于Bootloader的免调试器烧录方案

1. 项目概述&#xff1a;为BLE112模块打造一款免调试器的RS232编程器在嵌入式开发&#xff0c;特别是早期的蓝牙低功耗&#xff08;BLE&#xff09;模块应用中&#xff0c;我们常常会遇到一个棘手的问题&#xff1a;官方开发工具链的依赖和限制。以Silicon Labs&#xff08;当时…...

苏州创新药20年,站上全球产业洗牌暴风眼

一个城市的创新药产业集群如何从无到有&#xff0c;又如何在全球化临界点寻找自己的位置。文&#xff5c;徐鑫编&#xff5c;任晓渔过去一年多&#xff0c;苏州是全球创新药产业版图中一个绕不过去的城市。大额海外授权交易频繁传出&#xff0c;在中国高端制造走出去的背景下&a…...

MBTI性格测试

简介 MBTI&#xff08;Myers‑Briggs Type Indicator&#xff0c;迈尔斯‑布里格斯类型指标&#xff09;是基于荣格心理类型理论发展出的性格类型工具&#xff0c;由凯瑟琳库克布里格斯及其女儿伊莎贝尔布里格斯迈尔斯创建。它通过四对偏好维度将个体的认知与行为倾向归纳为 16…...

Unity iOS构建报错SDK version is 0的根因与精准修复

1. 这个报错不是Unity在“发脾气”&#xff0c;而是工程配置在“装死”刚接手一个老项目&#xff0c;打开Unity编辑器&#xff0c;点Build Settings准备打包iOS&#xff0c;结果弹出一行红字&#xff1a;“SDK version is 0, cannot build”。我第一反应是——这什么鬼&#xf…...

TorchDynamo与TorchInductor:PyTorch编译器生态的完整解析

TorchDynamo与TorchInductor&#xff1a;PyTorch编译器生态的完整解析 【免费下载链接】torchdynamo A Python-level JIT compiler designed to make unmodified PyTorch programs faster. 项目地址: https://gitcode.com/gh_mirrors/to/torchdynamo TorchDynamo 是一个…...

DIY四路自动音频源切换器:从信号检测到继电器隔离的完整设计

1. 项目概述与核心需求解析作为一个喜欢在工作室里捣鼓各种音频设备的玩家&#xff0c;我经常遇到一个挺烦人的问题&#xff1a;我的功放只有一组输入&#xff0c;但我想接的设备却有好几个——台式电脑、平板、蓝牙接收模块&#xff0c;还有一台树莓派。每次想切换音源&#x…...

【DeepSeek灰度发布黄金法则】:20年SRE亲授7步零故障上线实战框架

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek灰度发布策略全景图 DeepSeek模型服务的灰度发布并非简单的流量切分&#xff0c;而是一套融合可观测性、渐进式验证与多维熔断机制的工程化闭环体系。其核心目标是在保障线上推理稳定性的同时&…...