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

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

news 2025/11/10 10:38:52

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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/11/9 9:12:25

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/11/7 20:36:12

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/11/7 18:51:31

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/9/27 18:25:59

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/11/7 20:34:32

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2025/11/9 1:49:18