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

组件开发的环境准备： nodejs安装，npm镜像源的修改，pnpm包管理器的安装（全局安装），基于pnpm创建脚手架项目

news 2026/3/27 16:08:29

Node.js 是一个开源的、跨平台的 JavaScript 运行环境（本质是Chrome引擎的封装）,允许开发者使用 JavaScript 来编写服务器端代码
npm(Node Package Manager)是 Node.js 包管理器, 用来安装各种库、框架和工具

【Node.js官网】 
https://nodejs.org

【npm官网】
https://www.npmjs.com

Node.js安装的时候一直按next就可以了，直到最后按finish就完成安装了，效果如下图

接下来如下图

  

 在画圈的地方输入cmd然后按回车键，跳出如下图

【设置淘宝镜像源（默认镜像源是国外网址，国内访问经常失败，所以要设置淘宝镜像源）】
输入：npm config set registry https://registry.npmmirror.com/ 按回车键

再安装pnpm工具包： npm install -g pnpm

 接下来创建脚手架：pnpm create vue 

项目名称可改可不改，配置脚手架相关插件（最简单脚手架项目就是全部选“否（一直按回车键）”）

接下来就直接按照可执行以下命令的3个命令执行

  cd vue-project

再输入  pnpm i


  再输入 pnpm dev 启动它

复制画圈的网址到浏览器打开它

接下来在软件（ Visual Studio Code）打开

                        ​​​​​​​        ​                         

【常用vscode插件的安装】  
1. Vue - Official （Vue官方插件，强烈推荐，默认的xxx.vue文件是没有语法高亮的，都是一片白色，不利于阅读，安装这个插件以后，语法就会高亮）
2. 有些vscode编辑器版本较低，无法使用，这时候可以安装最新的vscode编辑器，或者换下面这个语法高亮插件（但是这个插件不好用，不推荐）：
   Vue 3 Support - All In One  
3. Vue VSCode Snippets  (我们经常需要使用一些现成的代码片段，这个插件为我们提供大量代码片段，提高编码效率)

安装好后打开src这个文件，把App.vue这个文件的内容全部删掉，输入v3（vbase-3-setup）,按回车（把画圈的地方删掉）

这样基本就完成了，只需要再输入内容就可以运行了

（运行只要打开之前复制在浏览器那个网页就行，没反应的话就刷新一下浏览器）

相关文章：

组件开发的环境准备： nodejs安装，npm镜像源的修改，pnpm包管理器的安装（全局安装），基于pnpm创建脚手架项目

Node.js 是一个开源的、跨平台的 JavaScript 运行环境（本质是Chrome引擎的封装）,允许开发者使用 JavaScript 来编写服务器端代码 npm(Node Package Manager)是 Node.js 包管理器, 用来安装各种库、框架和工具 【Node.js官网】 https://nodejs.org 【n…...

编程日记 2024/12/9 5:46:14

学生成绩统计系统

实验内容 问题描述: 输入n个学生的考试成绩，每个学生信息由姓名与分数组成;试设计一种算法: (1)按分数高低次序，打印出每个学生的名次，分数相同的为同一名次; (2)按名次输出每个学生的姓名与分数。 基本要求: (1)学生的考试成绩必须通过…...

编程日记 2024/12/9 5:45:13

【Spring项目】图书管理系统

阿华代码，不是逆风，就是我疯 你们的点赞收藏是我前进最大的动力！！ 希望本文内容能够帮助到你！！ 目录 一：项目实现准备 1：需求 （1）登录 2：准备…...

编程日记 2024/12/9 5:44:12

Vivado ILA数据导出MATLAB分析

目录 ILA数据导出 分析方式一 分析方式二 有时候在系统调试时，数据在VIVADO窗口获取的信息有限，可结合MATLAB对已捕获的数据进行分析处理 ILA数据导出 选择信号，单击右键后，会有export ILA DATA选项，将其保存成CS…...

编程日记 2024/12/9 5:42:10

【开源免费】基于SpringBoot+Vue.JS高校学科竞赛平台（JAVA毕业设计）

博主说明：本文项目编号 T 075 ，文末自助获取源码 \color{red}{T075，文末自助获取源码} T075，文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...

编程日记 2024/12/9 5:41:09

【机器学习】——windows下安装anaconda并在vscode上进行配置

一、安装anaconda 1.进入清华的镜像网站，下载自己电脑对应的anaconda版本。网站：https://repo.anaconda.com/archive/ 这里我下载的版本是anaconda3-2024.10-1-Windows-x86-64 2.下载完毕后开始安装anaconda 3.配置anaconda环境变量 在设置中找到编…...

编程日记 2024/12/9 5:40:08

【H2O2|全栈】Node.js与MySQL连接

目录 前言 开篇语 准备工作 初始配置 创建连接池 操作数据库 封装方法 结束语 前言 开篇语 本节讲解如何使用Node.js实现与MySQL数据库的连接，并将该过程进行函数封装。 与基础部分的语法相比，ES6的语法进行了一些更加严谨的约束和优化&#…...

编程日记 2024/12/9 5:37:05

汽配行业数字化解决方案（一）

汽配行业数字化解决方案，是通过整合云计算、大数据、人工智能、物联网等先进技术，构建一个全面、高效、智能的数字化生态系统，以实现汽配供应链的全程可视化与智能化管理。该解决方案涵盖了从供应商管理、库存优化、订单处理、物流跟踪到客户…...

编程日记 2024/12/9 5:36:03

前端路径“@/“的使用和配置

环境：vitets 需要安装types/node npm install types/node --save-dev在tsconfig.json中添加 如果有tsconfig.app.json和tsconfig.node.json文件，则在app.json中添加 "compilerOptions": {"baseUrl":".","paths&q…...

编程日记 2024/12/9 5:35:02

动态规划子序列问题系列一＞最长递增子序列

题目&#xff1a; 解析&#xff1a; 代码&#xff1a; public int lengthOfLIS(int[] nums) {int n nums.length;int[] dp new int[n];int ret 1;//最坏情况为1//初始化for(int i 0; i < n; i) dp[i] 1;for(int i 1; i < n; i){for(int j 0; j < i-1; j)if(…...

编程日记 2024/12/9 5:34:00

链表头文件大更新！！！

引言 原文章:链表简介及自制链表操作头文件_自己写一个链表头文件-CSDN博客。 此次更新添加了更多功能&#xff0c;让改头文件更 人性化 。 安装教程见原文章。 介绍 linked_list.h 头文件 linked_list.h 是一个 C 头文件&#xff0c;定义了一个模板类 LinkedList&#xff…...

编程日记 2024/12/9 5:32:59

力扣3381.长度可被K整除的子数组的最大元素和

力扣3381.长度可被K整除的子数组的最大元素和 题目 题目解析及思路 题目要求返回一段长度为K的倍数的最大子数组和 同余前缀和 代码 class Solution { public:long long maxSubarraySum(vector<int>& nums, int k) {int n nums.size();vector<long long>…...

编程日记 2024/12/9 5:30:57

http.ServeMux多路复用器的设置

package mainimport ("fmt""net/http" )func first(w http.ResponseWriter, r *http.Request) {fmt.Fprintln(w, "多函数-first") }func second(w http.ResponseWriter, r *http.Request) {fmt.Fprintln(w, "多函数-second") }func ma…...

编程日记 2024/12/9 5:29:56

优化器与优化方法：在现代科学与工程中的应用

目录 ​编辑 优化器&#xff1a;机器学习中的参数调整 1. 梯度下降系列 2. 动量法&#xff08;Momentum&#xff09; 3. Adagrad 4. RMSprop 5. Adam 优化方法&#xff1a;寻找系统最优解 线性规划 非线性规划 凸优化 非凸优化 结论 在当今的科学和工程领域&#…...

编程日记 2024/12/9 5:28:55

笔记本外接显示屏没声音

1、笔记本正常有声音&#xff0c;但是外接显示屏后没有声音了怎么回事呢&#xff1f;原来外接显示屏后笔记本的声音输出会自动选择显示屏的音频输出&#xff0c;但是显示屏可能没有声音输出所以导致笔记本没有声音。 2、解决办法&#xff1a;打开笔记本设置&#xff0c;选择声…...

编程日记 2024/12/9 5:27:54

vue框架

Vue.js是一种用于构建用户界面的JavaScript框架。它是一个轻量级框架&#xff0c;被设计为逐渐采用的渐进式框架&#xff0c;可以与现有项目集成&#xff0c;也可以作为一个完整的单页应用程序框架使用。 Vue.js具有以下特点&#xff1a; 简单易学&#xff1a;Vue.js的API简单…...

编程日记 2024/12/9 5:25:51

Vue指令（一）--v-html、v-show、v-if、v-else、v-else-if、v-on、v-bind、v-for、v-model

目录 &#xff08;一&#xff09;初识指令和内容渲染指令v-html 1.v-html 案例&#xff1a; 官网的API文档 &#xff08;二&#xff09;条件渲染指令v-show和v-if 1. v-show 2. v-if &#xff08;三&#xff09;条件渲染指令v-else和v-else-if 案例 &#xff08;四…...

编程日记 2024/12/9 5:24:49

ElK 8 收集 MySQL 慢查询日志并通过 ElastAlert2 告警至飞书

文章目录 1. 说明2. 启个 mysql3. 设置慢查询4. filebeat 设置5. 触发慢查询6. MySQL 告警至飞书 1. 说明 elk 版本&#xff1a;8.15.0 2. 启个 mysql docker-compose.yml 中 mysql&#xff1a; mysql:# restart: alwaysimage: mysql:8.0.27# ports:# - "3306:3306&q…...

编程日记 2024/12/9 5:22:46

QT通过在线安装器安装【详细】

在线安装器地址&#xff1a; 官方在线安装器&#xff1a;Index of /official_releases/online_installers (qt.io) 通过命令行启动安装页面 直接双击qt安装程序&#xff0c;在线安装会非常慢&#xff0c;甚至安装失败&#xff0c;所以通过命令行页面启动安装页面。点击wind…...

编程日记 2024/12/9 5:21:45

34.1 uber开源的m3db简介

本节重点介绍 : m3db自己的定位m3db自己的架构m3db自己的组件 两句话简介 M3最初是在优步开发的&#xff0c;目的是提供对优步业务运营&#xff0c;微服务和基础架构的可视性由于M3具有轻松进行水平扩展的能力&#xff0c;因此它为所有监视用例提供了一个集中式存储解决方案…...

编程日记 2024/12/9 5:18:40

wan2.1-vae开源可部署：支持国产操作系统（麒麟/UOS）的适配方案

wan2.1-vae开源可部署&#xff1a;支持国产操作系统&#xff08;麒麟/UOS&#xff09;的适配方案 1. 平台介绍 muse/wan2.1-vae 文生图是基于 Qwen-Image-2512 模型的AI图像生成平台&#xff0c;支持中英文提示词&#xff0c;可生成高质量、高分辨率的图像。该平台特别针对国…...

编程新知 2026/3/27 16:05:17

Revit插件开发效率革命：热重载技术如何彻底改变你的开发流程

Revit插件开发效率革命&#xff1a;热重载技术如何彻底改变你的开发流程 【免费下载链接】RevitAddInManager Revit AddinManager update .NET assemblies without restart Revit for developer. 项目地址: https://gitcode.com/gh_mirrors/re/RevitAddInManager RevitA…...

编程新知 2026/3/27 14:56:49

如何通过FCEUX实现NES游戏高精度模拟？解锁经典游戏的数字化体验

如何通过FCEUX实现NES游戏高精度模拟&#xff1f;解锁经典游戏的数字化体验 【免费下载链接】fceux FCEUX, a NES Emulator 项目地址: https://gitcode.com/gh_mirrors/fc/fceux 你是否曾因找不到可靠的NES模拟器而无法重温童年经典游戏&#xff1f;是否遇到过模拟器兼容…...

编程新知 2026/3/27 14:28:28

全网最详细的AI产品经理学习路线，非常详细收藏这一篇就够了

前言 AI产品经理作为一个新兴且热门的职业&#xff0c;不仅需要具备传统产品经理的能力&#xff0c;还需要对AI技术有深入的理解和应用。本学习路线旨在帮助有志于成为AI产品经理的学习者系统地掌握所需的知识和技能。 前排提示&#xff0c;文末有大模型AGI-CSDN独家资料包哦…...

编程新知 2026/3/27 13:53:14

保姆级教程：手把手教你将若依(RuoYi)项目从Java 8迁移到Java 17（含Spring Boot 3升级）

保姆级教程&#xff1a;手把手教你将若依(RuoYi)项目从Java 8迁移到Java 17&#xff08;含Spring Boot 3升级&#xff09; 最近几年Java生态发生了翻天覆地的变化&#xff0c;从Java 8到Java 17不仅仅是版本号的跳跃&#xff0c;更是一次技术栈的全面革新。作为国内广泛使用的…...

编程新知 2026/3/27 13:37:11

终极MCP服务器指南：解锁AI智能决策的完整工具箱 [特殊字符]

终极MCP服务器指南&#xff1a;解锁AI智能决策的完整工具箱 &#x1f680; 【免费下载链接】servers Model Context Protocol Servers 项目地址: https://gitcode.com/GitHub_Trending/se/servers MCP服务器&#xff08;Model Context Protocol Servers&#xff09; 是现…...

编程新知 2026/3/27 13:21:06

Repomix用户体验：CLI界面设计与交互的终极指南

Repomix用户体验&#xff1a;CLI界面设计与交互的终极指南 【免费下载链接】repomix &#x1f4e6; Repomix (formerly Repopack) is a powerful tool that packs your entire repository into a single, AI-friendly file. Perfect for when you need to feed your codebase t…...

编程新知 2026/3/27 13:15:04

别再让AI芯片‘睡大觉’了：手把手教你用华为昇腾+CANN搞定异构算力调度

华为昇腾CANN实战&#xff1a;破解AI芯片利用率困局的5个关键策略 推开实验室玻璃门&#xff0c;迎面是十几台Atlas 800服务器闪烁的指示灯&#xff0c;而工程师小王正对着监控大屏上30%的平均利用率皱眉——这场景在采用国产AI芯片的团队中太常见了。当我们谈论异构算力调度时…...

编程新知 2026/3/27 12:42:49

6_Harness驾驭工程可靠性层：混沌工程与服务可靠性管理

6_Harness驾驭工程可靠性层&#xff1a;混沌工程与服务可靠性管理 关键字&#xff1a; Chaos Engineering、混沌工程、SRM、服务可靠性管理、SLI、SLO、错误预算、韧性评分、故障模拟、事件响应、事后分析、韧性验证、自动故障注入、最小爆炸半径、Datadog、New Relic、Prometh…...

编程新知 2026/3/27 12:14:27

4步实现Obsidian插件全中文显示：从技术原理到实践指南

4步实现Obsidian插件全中文显示&#xff1a;从技术原理到实践指南 【免费下载链接】obsidian-i18n 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-i18n Obsidian作为一款强大的知识管理工具&#xff0c;其生态系统依赖于丰富的第三方插件扩展功能。然而&#…...

编程新知 2026/3/27 12:02:21