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是否当前焦点
又来分享一点点工作积累及解决方案 产品中需要用户输入一些文字后按下回车键生成标签来显示在页面上,经过尝试与改造完成如下: <template><div class"tags-view" click"beginInput"><el-tag :key"index" …...
32单片机综合应用案例——物联网(IoT)环境监测站(四)(内附详细代码讲解!!!)
无论你身处何种困境,都要坚持下去,因为勇气和毅力是成功的基石。不要害怕失败,因为失败并不代表终结,而是为了成长和进步。相信自己的能力,相信自己的潜力,相信自己可以克服一切困难。成功需要付出努力和坚…...
LabVIEW与WPS文件格式的兼容性
LabVIEW 本身并不原生支持将文件直接保存为 WPS 格式(如 WPS 文档或表格)。然而,可以通过几种间接的方式实现这一目标,确保您能将 LabVIEW 中的数据或报告转换为 WPS 可兼容的格式。以下是几种常见的解决方案: 导出…...
小结: 路由协议的演进和分类
路由协议的演进和分类,包括其发展历史及主要应用场景。路由协议用于在网络中确定数据传输的最佳路径,主要分为内部网关协议(IGP)和外部网关协议(EGP) AS-AS 之间的。 路由协议的演进 1982年:出…...
OpenCV相机标定与3D重建(60)用于立体校正的函数stereoRectify()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 为已校准的立体相机的每个头计算校正变换。 cv::stereoRectify 是 OpenCV 中用于立体校正的函数,它基于已知的相机参数和相对位置&am…...
Android wifi列表中去自身的热点
Android wifi列表中去自身的热点 一、前言 Android wifi列表中能搜索到自身的热点wifi? 正常手机上都不会出现这个问题;可能是系统底层已经做了过滤处理。 现实开发中Android设备的Wifi能搜索到自身热点也可能会存在。 比如基于两个单独的wifi双模组硬…...
Windows环境本地配置pyspark环境详细教程
目录 一、背景简记二、本地单机spark环境配置详细步骤第一步:python环境安装第二步:安装jdk及配置环境变量安装包下载安装环境变量配置 第三步:安装Spark安装包下载安装配置环境变量 第四步:安装hadoop安装包下载安装配置环境变量…...
《自动驾驶与机器人中的SLAM技术》ch9:自动驾驶车辆的离线地图构建
目录 1 点云建图的流程 2 前端实现 2.1 前端流程 2.2 前端结果 3 后端位姿图优化与异常值剔除 3.1 两阶段优化流程 3.2 优化结果 ① 第一阶段优化结果 ② 第二阶段优化结果 4 回环检测 4.1 回环检测流程 ① 遍历第一阶段优化轨迹中的关键帧。 ② 并发计算候选回环对…...
IP属地会随着人的移动而改变吗
在当今数字化时代,互联网已成为人们生活中不可或缺的一部分。无论是社交媒体的日常互动,还是在线购物、远程工作,IP地址作为网络身份的重要标识,扮演着举足轻重的角色。随着移动互联网技术的飞速发展,人们越来越多地在…...
openharmony应用开发快速入门
开发准备 本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用(如下图所示),快速了解工程目录的主要文件,熟悉OpenHarmony应用开发流程。 在开始之前,您需要了解有关OpenHarmon…...
USB3020任意波形发生器4路16位同步模拟量输出卡1MS/s频率 阿尔泰科技
信息社会的发展,在很大程度上取决于信息与信号处理技术的先进性。数字信号处理技术的出现改变了信息 与信号处理技术的整个面貌,而数据采集作为数字信号处理的必不可少的前期工作在整个数字系统中起到关键 性、乃至决定性的作用,其应用已经深…...
云消息队列 Kafka 版 V3 系列荣获信通院“云原生技术创新标杆案例”
2024 年 12 月 24 日,由中国信息通信研究院(以下简称“中国信通院”)主办的“2025 中国信通院深度观察报告会:算力互联网分论坛”,在北京隆重召开。本次论坛以“算力互联网 新质生产力”为主题,全面展示中国…...
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应用程序中,当用户授予了相应的权限,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.…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
【HTTP三个基础问题】
面试官您好!HTTP是超文本传输协议,是互联网上客户端和服务器之间传输超文本数据(比如文字、图片、音频、视频等)的核心协议,当前互联网应用最广泛的版本是HTTP1.1,它基于经典的C/S模型,也就是客…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
