Vue3开发环境搭建和工程结构(一)

一、NVM和Node.js安装

NVM 是 Node Version Manager(Node 版本管理工具)的缩写,是一个命令行工具,用于管理和切换到不同版本的 Node.js。

1、前往 nvm-windows 仓库,然后单击立即下载

2、下载最新版本

3 、按照安装向导进行安装 

4、打开 PowerShell 或命令提示符并运行 nvm -v 以确认安装

5、以管理员身份打开并运行PowerShell

6、安装Node.js

安装 Node 的长期支持(LTS)版本更好,因为它的 bug 更少

要安装特定版本的 Node,你需要先运行 nvm list available,以便查看可用的 Node 版本。

要安装该特定版本,请运行 nvm install node-version-number,例如,nvm install 14.20.0

7、查看Node.js是否安装成功

二、创建Vue3项目

1、通过Vite方式创建项目

D:\01-study\vue3\vue01>npm create vue@latest
Need to install the following packages:
create-vue@3.9.2
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称: ... hello_vue3
√ 是否使用 TypeScript 语法? ... 否 / 是
√ 是否启用 JSX 支持? ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是
√ 是否引入 Pinia 用于状态管理? ... 否 / 是
√ 是否引入 Vitest 用于单元测试? ... 否 / 是
√ 是否要引入一款端到端(End to End)测试工具? » 不需要
√ 是否引入 ESLint 用于代码质量检测? ... 否 / 是

正在构建项目 D:\01-study\vue3\vue01\hello_vue3...

项目构建完成,可执行以下命令:

  cd hello_vue3
  npm install
  npm run dev

npm notice
npm notice New minor version of npm available! 10.2.4 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g npm@10.4.0 to update!
npm notice

三、 Vue3工程目录和文件说明

1、插件安装

2、依赖安装

3、入口文件

  • 启动项目,观察入口文件内容

4、工程配置文件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/372717.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构与算法】之排序系列-20240204

这里写目录标题 一、977. 有序数组的平方二、1051. 高度检查器三、1122. 数组的相对排序四、1200. 最小绝对差五、1331. 数组序号转换 一、977. 有序数组的平方 简单 给你一个按 非递减顺序 排序的整数数组 nums,返回 每个数字的平方 组成的新数组,要求…

rsync-3.1.2下载编译安装运行同步

下载 https://rsync.samba.org/ftp/rsync/src/ 解压 -解压源码包tar -xvf rsync-3.1.2.tar.gz -重命名mv rsync-3.1.2 rsync -将软件安装到指定目录下./configure --prefi/usr -编译 make - 安装 make install 安装之后启动脚本在/usr/bin/ -启动脚本 (启动之前需要配置一下…

BridgeTower:融合视觉和文本信息的多层语义信息,主打复杂视觉-语言任务

BridgeTower 核心思想子问题1:双塔架构的局限性子问题2:不同层次的语义信息未被充分利用子问题3:模型扩展性和泛化能力 核心思想 论文:https://arxiv.org/pdf/2206.08657.pdf 代码:https://github.com/microsoft/Bri…

MATLAB时域分析(附完整代码)

时域分析是一种分析信号或系统在时间维度下的行为或特性的方法。在时域分析中,信号或系统的状态是随时间变化的,这是最直观的分析方法。例如,一个音频信号在时域中可能会显示为波形随时间的变化。 在系统分析中,尤其是在电路分析…

LeetCode、216. 组合总和 III【中等,组合型枚举】

文章目录 前言LeetCode、216. 组合总和 III【中等,组合型枚举】题目类型与分类思路 资料获取 前言 博主介绍:✌目前全网粉丝2W,csdn博客专家、Java领域优质创作者,博客之星、阿里云平台优质作者、专注于Java后端技术领域。 涵盖…

MATLAB | 绘图复刻(十四) | 右侧对齐桑基图,及工具函数SSankey更新

hey 真的好久不见了,本期既是一期绘图复刻教程,也是我写的工具函数的版本更新,本期复刻的图片来自《Nature》: Elmarakeby, H.A., Hwang, J., Arafeh, R. et al. Biologically informed deep neural network for prostate cancer…

构建互联网医院系统:数字化医疗的代码之旅

在互联网时代,医疗服务也在逐步数字化,而构建一个互联网医院系统成为了医疗领域的一项创新。在这篇文章中,我们将探讨如何通过技术代码构建一个基础的互联网医院系统,为患者和医生提供便捷、高效的医疗服务。 1. 环境搭建与前端…

ES6中新增Array.from()函数的用法详解

目录 Map对象的转换 Set对象的转换 字符串的转换 类数组对象的转换 Array.from可以接受三个参数 ES6为Array增加了from函数用来将其他对象转换成数组。当然,其他对象也是有要求,也不是所有的,可以将两种对象转换成数组。 1、部署了Iter…

【BIAI】Lecture 13 - Language processing

Language processing 专业术语 Aphasia 失语症 fMRI 功能性磁共振成像 auditory cortex 听觉皮层 motor cortex 运动皮层 primary visual cortex 初级视觉皮层 permotor cortex 前运动皮层 课程概要 What is language 语言是一种用词汇按照语法规则组合来表示和交流信息的系统…

将.sqlite文件转化为.sql文件并存入mysql数据库

场景描述 今天在处理Bird数据,里面都是.sqlite格式的文件,我需要把这些文件都存到mysql数据库里面。具体的流程如下。 1、.sqlite转化为.sql 在当前目录下打开终端 sqlite3 movie_platform.sqlite .dump > movie_platform.sql2、存入mysql 在 MyS…

Spring Data Envers 数据审计实战2 - 自定义监听程序扩展审计字段及字段值

上篇讲述了如何在Spring项目中集成Spring Data Envers做数据审计和历史版本查看功能。 之前演示的是业务表中已有的字段进行审计,那么如果我们想扩展审计字段呢? 比如目前对员工表加入了Audited审计,员工表有个字段为dept_id,为…

第16届大广赛命题详情它来啦!

“中国大学生创造力”全国大学生广告艺术竞赛(以下简称:广播竞赛)作为高水平三维生产教育一体化、科学教育一体化竞争平台,坚持高地位,基于大模式,在19年的发展过程中,坚持道德培养人才的基础&a…

高速接口PCB布局指南(一)高速信号接口概述

高速接口PCB布局指南(一)高速信号接口概述 1.什么是高速信号接口?2.高速信号PCB设计概述2.1 概述2.2 关键信号 tips:资料主要来自网络,仅供学习使用。 1.什么是高速信号接口? 高速信号接口是指用于传输高…

计算机毕业设计 基于SpringBoot的宠物爱心组织管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

蓝桥杯省赛无忧 组合数学 课件102 计数原理

01 前置基础知识 02 分类加法 03 分步乘法

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Radio组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Radio组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Radio组件 单选框,提供相应的用户交互选择项。 子组件 无。 接口 …

c语言--指针的传值调用和传址调用

目录 一、前言二、传值调用。三、传址调用四、总结 一、前言 学习指针的目的是使用指针解决问题&#xff0c;那什么问题&#xff0c;非指针不可呢&#xff1f; 二、传值调用。 写个函数&#xff0c;交换两个整数的内容。 #include<stdio.h> void Swap1(int x, int y)…

计算机毕业设计 | springboot商城售后管理系统(附源码)

1&#xff0c;绪论 1.1 开发背景 在数字化时代的推动下&#xff0c;产品售后服务管理机构面临着信息化和网络化的挑战。传统的手工管理和纸质档案已经无法满足管理人员和读者的需求。为了提高产品售后服务管理机构的管理效率和服务质量&#xff0c;开发和实现一个基于Java的售…

Linux项目自动化构建工具之make/Makefile演示gcc编译

文章目录 一、背景二、如何使用&#xff1f;三、原理四、关于make的问题五、再次理解/编写makefile依赖关系依赖方法 六、原理讲解项目清理makefile是支持变量的取消执行make后显示命令依赖方法可以多行 一、背景 会不会写makefile&#xff0c;从一个侧面说明了一个人是否具备…

仪器接口设计

不是所有设备都是TCP连接模式&#xff0c;有读文件的、读数据库的设备&#xff0c;为此还需要一个客户端仪器接口程序&#xff0c;面向接口编程是一个良好的思想&#xff0c;他使得调用者和接口实现者不用绑定太死&#xff0c;只要双方按约定实现即可。 仪器有读文件的、写文件…