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

创建vue项目：node.js下载安装、配置环境变量，下载安装cnpm，配置npm的目录、镜像，安装vue、搭建vue项目开发环境（保姆级教程一）

news 2025/7/4 22:16:41

今天讲解 Windows 如何创建 vue 项目，搭建 vue 开发环境，这是这个系列的第一章，有什么问题请留言，请点赞收藏！！！

文章目录

    • 一、Vue简单介绍
    • 二、开始搭建
      • 1、安装node.js环境
      • 2、配置npm下载时的默认安装目录和缓存日志目录
      • 3、配置npm镜像
      • 4、npm常用命令
      • 5、安装webpack打包模块

一、Vue简单介绍

搭建 node 环境，最重要的作用就是为创建 vue 项目作准备的，所以这里先简单介绍下 vue，以及 vue 的创建安装方式：

1、vue 简单介绍：

  • Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
  • Vue.js是一个MVVM(Model - View - ViewModel)的SPA框架。
    • Model：数据
    • View：视图
    • ViewModel：连接View与Model的纽带

2、Vue.js的安装使用方式有几种，简单的只需要引入一个第三方的JS包即可。在 <head> 中引入Vue.js包。

<script src="https://cdn.jsdelivr.net/npm/vue@4.5.12"></script>

重点： 这里只重点关注 npm 方式安装 vue ，即本系列主要内容。

二、开始搭建

在用 Vue.js 构建大型应用的时候推荐使用 npm 安装方法，npm 能很好的和 Webpack 或者 Browserify 模块打包器配合使用。

npm 方式安装 vue 需要的工具：

  • node 环境（也就是 npm 包管理器）
  • vue-cli 脚手架构建工具

1、安装node.js环境

1、官网下载：下载地址 。下载稳定版本 v20.10.0。注意：偶数是稳定版本 奇数是不稳定版本。
在这里插入图片描述

在这里插入图片描述
然后直接安装（记得选择 Add To Path），其余保持默认即可。

2、测试是否成功：按下cmd+R，输入cmd，打开终端，在命令行输入 node -v，显示 v20.10.0，表示成功。顺带输入 npm -v，显示10.2.3，这个表示查看 npm 版本。

NPM（Node Package Manager）：Node JS 包管理工具。注意：Node安装成功，默认就安装了 npm

2、配置npm下载时的默认安装目录和缓存日志目录

这里的环境配置，主要配置的是：npm安装的全局模块所在的路径，以及缓存 cache 的路径。之所以要配置，是因为 npm install express -g 执行全局安装语句时，会将安装的模块安装到：C:\Users\用户名\AppData\Roaming\npm 路径目录下，久而久之 C 盘很容易被占满（C 盘足够大可以无视此步骤，最好更改目录）。

通过设置，将 默认安装目录 和 缓存日志目录 重新配置到其他盘符。

1、输入命令：

npm config set prefix "D:\nodeJs\node_global"
npm config set cache "D:\nodeJs\node_cache"

① 操作完成会在你所选择的路径建立 node_global 和 node_cache 两个文件夹（没有自动生成就手动创建）。

② 如果你想要修改设置的 node_global 和node_cache 的名称，可以通过重新输入设置命令的方式修改，或者进入 C:\Users\用户名 目录，修改 .npmrc 文件里面的内容即可。

2、配置好后，可以查看：

npm config get prefix     //查看npm全局安装保存路径
npm config get cache      //查看npm安装缓存cache路径

3、配置npm镜像

1、安装时指定安装源（可选择）
npm install 安装的东西（比如：jquery） --registry=https://registry.npm.taobao.org2、永久指定镜像源：
npm config set registry https://registry.npm.taobao.org换回默认全局镜像
npm config set registry https://registry.npmjs.org3、安装cnpm：由于需要加速从而选择安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org==============================
查看镜像
npm config get registry

报错1：cmd 输入 安装cnpm 的命令后，报错 Error: EPERM: operation not permitted, mkdir....：
在这里插入图片描述
解决1：没有权限的原因，cmd 窗口需要以管理员的身份打开，然后再次输入即可。

报错2：安装完 cnpm 后，输入：cnpm -v 报错：‘cnpm’ 不是内部或外部命令，也不是可运行的程序或批处理文件。

解决2：由于之前设置了全局安装的目录，所以这里会找不到位置（假如不修改目录，可能不报错，假如也报错，也配置下）：


注意：如果没有修改全局目录也报错的话，也需要：找到全局安装的位置，然后同样配置即可。所以 cnpm 也安装完毕。

4、npm常用命令

npm list     查看已经安装的模块
npm install jquery		        默认下载最新的版jquery
npm install jquery@1.12.4	    下载指定版本jquery，后面会将前面的文件覆盖（覆盖式安装）
npm uninstall jquery          	卸载模块，但不卸载模块留在package.json中的对应信息
npm uninstall express --save  	卸载模块，同时卸载留在package.json中dependencies下的信息
npm uninstall express -g      	卸载全局模块
npm update 模块名  			  更新最新版本的模块
npm update 模块名@指定版本        更新到指定版本号的模块
npm search jquery			    搜索包
npm view 模块名 version   		  查看模块最新的版本号

5、安装webpack打包模块

这个模块可以根据需要来安装。Webpack 是一个模块打包器（bundler）

1、安装（cmd为以管理员身份打开）：npm install webpack -g

2、查看 webpage 的版本：npm webpack -v。webpack4 以上的版本，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装 webpack-cli：npm install webpack-cli -g

至此，本教程结束，后续内容给点击专栏查看！！！

相关文章：

创建vue项目：node.js下载安装、配置环境变量，下载安装cnpm，配置npm的目录、镜像，安装vue、搭建vue项目开发环境（保姆级教程一）

今天讲解 Windows 如何创建 vue 项目&#xff0c;搭建 vue 开发环境&#xff0c;这是这个系列的第一章&#xff0c;有什么问题请留言&#xff0c;请点赞收藏&#xff01;&#xff01;&#xff01; 文章目录 一、Vue简单介绍二、开始搭建1、安装node.js环境2、配置npm下载时的默…...

编程日记 2023/12/8 7:22:18

uni-app 微信小程序之好看的ui登录页面（一）

文章目录 1. 页面效果2. 页面样式代码 更多登录ui页面 uni-app 微信小程序之好看的ui登录页面&#xff08;一&#xff09; uni-app 微信小程序之好看的ui登录页面&#xff08;二&#xff09; uni-app 微信小程序之好看的ui登录页面&#xff08;三&#xff09; uni-app 微信小程…...

编程日记 2023/12/8 7:18:15

[ES]ElasticSearch强转日期的时区问题

问题 由于ES不能修改时区&#xff0c;且默认时区始终为UTC。 当才查询数据时&#xff0c;通过强转获得的日期并不是想要的&#xff0c;通过分析发现&#xff0c;正是由于默认时区导致结果相差了8个小时。 查询语句&#xff1a; POST http://localhost:9200/_sql?formattext {&…...

编程日记 2023/12/8 7:17:14

YOLOv5结合BiFPN，如何替换YOLOv5的Neck实现更强的检测能力？

一、BiFPN是什么&#xff1f; 1、什么是BiFPN BiFPN是一种基于特征金字塔网络&#xff08;FPN&#xff09;和双向特征金字塔网络&#xff08;BiFPN&#xff09;的对象检测神经网络结构&#xff0c;它被用于提高目标检测的准确度和速度。在目标检测领域&#xff0c;FPN用于将不同…...

编程日记 2023/12/8 7:16:13

3.PyTorch——常用神经网络层

import numpy as np import pandas as pd import torch as t from PIL import Image from torchvision.transforms import ToTensor, ToPILImaget.__version__2.1.13.1 图像相关层 图像相关层主要包括卷积层&#xff08;Conv&#xff09;、池化层&#xff08;Pool&#xff09;…...

编程日记 2023/12/8 7:14:11

状态机的练习：按键控制led灯

设计思路&#xff1a; 三个按键控制led输出。 三个按键经过滤波(消抖)&#xff0c;产生三个按键标志信号。 三个led数据的产生模块&#xff08;流水&#xff0c;跑马&#xff0c;闪烁模块&#xff09;&#xff0c;分别产生led信号。 这六路信号&#xff08;三路按键信号&am…...

编程日记 2023/12/8 7:07:06

看图学源码之 CopyOnWriteArraySet源码分析

基本介绍 使用内部CopyOnWriteArrayList进行所有操作的Set 特点 它最适合以下应用程序&#xff1a;集合大小通常较小、只读操作的数量远远多于可变操作&#xff0c;并且您需要在遍历期间防止线程之间的干扰。它是线程安全的。突变操作&#xff08; add 、 set 、 remove等&…...

编程日记 2023/12/8 7:06:05

almaLinux centos8 下载ffmpeg离线安装包、离线安装

脚本 # 添加RPMfusion仓库 sudo yum install https://download1.rpmfusion.org/free/el/rpmfusion-free-release-8.noarch.rpm wget -ymkdir -p /root/ffmpeg cd /root/ffmpegwget http://rpmfind.net/linux/epel/7/x86_64/Packages/s/SDL2-2.0.14-2.el7.x86_64.rpmyum instal…...

编程日记 2023/12/8 7:05:04

CSS3 属性： transition过渡 与 transform动画

CSS3 提供了很多强大的功能&#xff0c;使开发人员可以创建更加吸引人的视觉效果&#xff0c;而不需要依赖于 JavaScript 或 Flash。其中&#xff0c;transition 和 transform 是两个常用的属性&#xff0c;它们分别用于创建平滑的过渡效果和元素的变形效果。下面我们将详细介绍…...

编程日记 2023/12/8 7:04:03

TCP通讯

第二十一章 网络通信 本章节主要讲解的是TCP和UDP两种通信方式它们都有着自己的优点和缺点 这两种通讯方式不通的地方就是TCP是一对一通信 UDP是一对多的通信方式 接下来会一一讲解 TCP通信 TCP通信方式呢 主要的通讯方式是一对一的通讯方式&#xff0c;也有着优点和缺点 …...

编程日记 2023/12/8 7:02:01

（NeRF学习）3D Gaussian Splatting Instant-NGP

学习参考&#xff1a; 3D Gaussian Splatting入门指南【五分钟学会渲染自己的NeRF模型&#xff0c;有手就行&#xff01;】 三维重建instant-ngp环境部署与colmap、ffmpeg的脚本参数使用 一、3D Gaussian Splatting &#xff08;一&#xff09;3D Gaussian Splatting环境配置…...

编程日记 2023/12/8 7:01:00

uni-app 微信小程序之好看的ui登录页面（三）

文章目录 1. 页面效果2. 页面样式代码 更多登录ui页面 uni-app 微信小程序之好看的ui登录页面&#xff08;一&#xff09; uni-app 微信小程序之好看的ui登录页面&#xff08;二&#xff09; uni-app 微信小程序之好看的ui登录页面&#xff08;三&#xff09; uni-app 微信小程…...

编程日记 2023/12/8 6:58:58

Android 默认打开应用的权限

有项目需要客户要安装第三方软件&#xff0c;但是要手动点击打开权限&#xff0c;就想不动手就打开。 //安装第三方软件&#xff0c;修改方式 frameworks\base\services\core\java\com\android\server\pm\PackageManagerService.java //找到如下源码&#xff1a; //有三种方…...

编程日记 2023/12/8 6:57:58

2023年广东工业大学腾讯杯新生程序设计竞赛

E.不知道叫什么名字 题意&#xff1a;找一段连续的区间&#xff0c;使得区间和为0且区间长度最大&#xff0c;输出区间长度。 思路&#xff1a;考虑前缀和&#xff0c;然后使用map去记录每个前缀和第一次出现的位置&#xff0c;然后对数组进行扫描即可。原理&#xff1a;若 s …...

编程日记 2023/12/8 6:55:55

FFmpeg开发笔记（六）如何访问Github下载FFmpeg源码

学习FFmpeg的时候&#xff0c;经常要到GitHub下载各种开源代码&#xff0c;比如FFmpeg的源码页面位于https://github.com/FFmpeg/FFmpeg。然而国内访问GitHub很不稳定&#xff0c;经常打不开该网站&#xff0c;比如在命令行执行下面的ping命令。 ping github.com 上面的ping结…...

编程日记 2023/12/8 6:52:52

SpringCloud | Dubbo 微服务实战——注册中心详解

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 |Eureka,Nacos,Consul,Zookeeper在Spring Cloud和Dubbo中实战 引言 在项目开发过程中&#xff0c;随着项目不断扩大&#xff0c;也就是业务的不断增多&#xff0c;我们将采用集群&#xf…...

编程日记 2023/12/8 6:51:52

PostGIS学习教程十一：投影数据

PostGIS学习教程十一&#xff1a;投影数据 地球不是平的&#xff0c;也没有简单的方法把它放在一张平面纸地图上&#xff08;或电脑屏幕上&#xff09;&#xff0c;所以人们想出了各种巧妙的解决方案&#xff08;投影&#xff09;。 每种投影方案都有优点和缺点&#xff0c;一…...

编程日记 2023/12/8 6:49:50

jQuery ajax读取本地json文件 三级联动下拉框

步骤 1&#xff1a;创建本地JSON文件 {"departments": [{"name": "会计学院","code": "052"},{"name": "金融学院","code": "053"},{"name": "财税学院",&qu…...

编程日记 2023/12/8 6:47:48

Kubernetes(K8s 1.27.x) 快速上手+实践，无废话纯享版（视频笔记）

视频源&#xff1a;1.03-k8s是什么&#xff1f;_哔哩哔哩_bilibili 1 基础知识 1.1 K8s 有用么&#xff1f; K8s有没有用 K8s要不要学&#xff1f; 参考资料: https://www.infoq.com/articles/devops-and-cloud-trends-2022/?itm_sourcearticles_about_InfoQ-trends-report…...

编程日记 2023/12/8 6:44:45

深度学习实战66-基于计算机视觉的自动驾驶技术，利用YOLOP模型实现车辆区域检测框、可行驶区域和车道线分割图

大家好，我是微学AI，今天给大家介绍一下深度学习实战66-基于计算机视觉的自动驾驶技术，利用YOLOP模型实现车辆区域检测框、可行驶区域和车道线分割图。本文我将介绍自动驾驶技术及其应用场景，并重点阐述了基于计算机视觉技术下的自动驾驶。自动驾驶技术是一种利用人工智能和…...

编程日记 2023/12/8 6:42:44

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/6/30 11:49:08

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/7/4 16:54:47

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/7/4 1:30:15

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/7/1 6:09:18

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/6/21 5:31:03

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/7/3 13:21:09

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/6/26 20:21:28

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/7/4 4:41:30

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/6/15 15:47:35

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/6/21 3:16:21