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

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

news 2026/5/17 5:15:51

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

从理论到实践：三维形状上下文(3DSC)如何构建鲁棒的点云局部描述符

1. 为什么我们需要三维形状上下文(3DSC) 想象一下你正在玩一个拼图游戏&#xff0c;但所有碎片都被随机撒上了胡椒粉&#xff0c;有些碎片还被书本盖住了一角。这就是计算机处理含噪声、遮挡的点云数据时的真实处境。在机器人导航、自动驾驶或者工业质检中&#xff0c;我们经常…...

编程新知 2026/5/17 5:04:27

三维重建下半场，拼的全是底层基建实力！

三维重建已从算法创新竞赛正式迈入基础设施比拼新阶段&#xff0c;主流技术路线逐步收敛&#xff0c;单纯算法红利见顶&#xff0c;行业竞争核心转向数据、算力、平台、生态等底层综合能力。当下竞争不再只比模型效果&#xff0c;而是聚焦四大核心基建维度&#xff1a;采集传感…...

编程新知 2026/5/17 4:40:31

开源可视化利器：用声明式数据驱动构建交互式技术解释图

1. 项目概述&#xff1a;一个将复杂概念可视化的开源利器最近在整理技术分享材料时&#xff0c;我一直在寻找一种能直观展示复杂系统架构或算法流程的工具。传统的流程图工具要么太笨重&#xff0c;要么定制化程度不够&#xff0c;直到我遇到了nicobailon/visual-explainer这个…...

编程新知 2026/5/17 4:05:05

Sunshine游戏串流架构深度解析：3种高效部署方案完全指南

Sunshine游戏串流架构深度解析&#xff1a;3种高效部署方案完全指南 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine Sunshine作为一款开源自托管的游戏串流服务器&#xff0c;为Mo…...

编程新知 2026/5/17 1:35:17

企业采购必读：ElevenLabs合同中6处关键条款陷阱（含地域限制、转授权失效、审计权模糊等），法务已验证

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;企业采购必读&#xff1a;ElevenLabs合同中6处关键条款陷阱&#xff08;含地域限制、转授权失效、审计权模糊等&#xff09;&#xff0c;法务已验证 地域限制条款的隐性封锁效应 ElevenLabs服务协议第…...

编程新知 2026/5/17 0:32:42

py每日spider案例之某website之xin东方选课搜索接口(难度一般 扣取代码即可)

加密位置: 逆向接口参数: 逆向接口: const g = globalThis; g.window = g; g.self = g; g.location = {<...

编程新知 2026/5/17 0:01:36

caj2pdf深度解析：如何将中国知网CAJ文件转换为可搜索PDF的完整技术指南

caj2pdf深度解析&#xff1a;如何将中国知网CAJ文件转换为可搜索PDF的完整技术指南 【免费下载链接】caj2pdf Convert CAJ (China Academic Journals) files to PDF. 转换中国知网 CAJ 格式文献为 PDF。佛系转换&#xff0c;成功与否&#xff0c;皆是玄学。 项目地址: https:…...

编程新知 2026/5/16 23:28:53

告别命令行！用Python脚本批量管理Docker容器和镜像的实战技巧

告别命令行&#xff01;用Python脚本批量管理Docker容器和镜像的实战技巧 在DevOps和云原生技术快速发展的今天&#xff0c;Docker已经成为现代应用部署的标准工具。然而&#xff0c;随着容器数量的增加和部署频率的提高&#xff0c;手动通过命令行管理Docker容器和镜像变得越来…...

编程新知 2026/5/16 22:53:30

汽车电子实战指南：从零到一，用CANdb++ Editor构建你的首个DBC文件

1. 认识DBC文件&#xff1a;汽车电子的"通讯词典" 第一次接触DBC文件时&#xff0c;我把它想象成汽车电子系统的"通讯词典"。就像不同国家的人需要字典来理解彼此的语言&#xff0c;汽车里的各个ECU&#xff08;电子控制单元&#xff09;也需要DBC文件来解…...

编程新知 2026/5/16 22:43:14

在STM32F103上用FreeRTOS模拟I2C，为什么我劝你放弃硬件I2C？

为什么在STM32F103上使用FreeRTOS时&#xff0c;模拟I2C比硬件I2C更靠谱&#xff1f; 如果你正在使用STM32F103开发项目&#xff0c;并且需要在FreeRTOS环境下实现I2C通信&#xff0c;那么这篇文章可能会改变你的技术选型决策。很多开发者初次接触STM32时&#xff0c;都会优先考…...

编程新知 2026/5/16 22:22:24