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

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

news 文章来源：https://blog.csdn.net/zhangfuping123456789/article/details/134848911 2024/9/22 1:42:07

今天讲解 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 项目，搭建 vue 开发环境，这是这个系列的第一章，有什么问题请留言，请点赞收藏！！！ 文章目录一、Vue简单介绍二、开始搭建1、安装node.js环境2、配置npm下载时的默…...

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

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

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

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

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

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

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

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

一、BiFPN是什么？ 1、什么是BiFPN BiFPN是一种基于特征金字塔网络（FPN）和双向特征金字塔网络（BiFPN）的对象检测神经网络结构，它被用于提高目标检测的准确度和速度。在目标检测领域，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 图像相关层图像相关层主要包括卷积层（Conv）、池化层（Pool）…...

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

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

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

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

看图学源码之 CopyOnWriteArraySet源码分析

基本介绍使用内部CopyOnWriteArrayList进行所有操作的Set 特点它最适合以下应用程序：集合大小通常较小、只读操作的数量远远多于可变操作，并且您需要在遍历期间防止线程之间的干扰。它是线程安全的。突变操作（ 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 提供了很多强大的功能，使开发人员可以创建更加吸引人的视觉效果，而不需要依赖于 JavaScript 或 Flash。其中，transition 和 transform 是两个常用的属性，它们分别用于创建平滑的过渡效果和元素的变形效果。下面我们将详细介绍…...

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

TCP通讯

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

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

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

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

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

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

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

Android 默认打开应用的权限

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

视频源：1.03-k8s是什么？_哔哩哔哩_bilibili 1 基础知识 1.1 K8s 有用么？ K8s有没有用 K8s要不要学？ 参考资料: 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

Stable Diffusion 系列教程 - 1 基础准备（针对新手）

使用SD有两种方式： 本地： 显卡要求：硬件环境推荐NVIDIA的具有8G显存的独立显卡，这个显存勉勉强强能摸到门槛。再往下的4G可能面临各种炸显存、炼丹失败、无法生成图片等各种问题。对于8G显存，1.0模型就不行&#xff0…...

编程日记 2023/12/8 6:41:43

听GPT 讲Rust源代码--src/tools(8)

File: rust/src/tools/rust-analyzer/crates/ide-assists/src/handlers/add_missing_match_arms.rs 在Rust源代码中，rust-analyzer是一个Rust编程语言的语言服务器。它提供了代码补全、代码重构和代码导航等功能来帮助开发者提高编码效率。在rust-analyzer的代码目…...

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

Linux硬链接和软连接是什么？

在Linux操作系统中，文件管理是一个基本且重要的概念。其中，软链接（Symbolic Link）和硬链接（Hard Link）是文件系统中两种不同类型的链接方式，它们在文件管理和操作中扮演着重要的角色。软链接软…...

编程日记 2023/12/8 6:38:40

LangChain 23 Agents中的Tools用于增强和扩展智能代理agent的功能

LangChain系列文章 LangChain 实现给动物取名字，LangChain 2模块化prompt template并用streamlit生成网站实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗的平均年龄LangChain 4用向量数据库Faiss存储，读取YouTube的视频文本搜索I…...

编程日记 2023/12/8 6:36:39

VS2015编译GDAL3.2.0+opencl+C#

参考借鉴https://www.cnblogs.com/litou/p/15004877.html 参考借鉴https://www.cnblogs.com/xiaowangba/p/6313903.html 参考借鉴gdal、proj、geos、sqlite等在VS2015下编译和配置_vs2015编译sqlite3-CSDN博客参考借鉴Windows下GDAL3.1.2编译 (VS2015)_gdal windows编译-CS…...

编程日记 2023/12/8 6:34:36

3、Linux_系统用户管理

1.Linux 用户管理 1.1概述 Linux系统是一个多用户多任务的操作系统，任何一个要使用系统资源的用户，都必须首先向系统管理员申请一个账号，然后以这个账号的身份进入系统。root用户是系统默认创建的管理员账号。 1.2添加用户语法 useradd […...

编程日记 2023/12/8 6:32:35

C语言指针详解上

1 野指针 int main01(){//野指针就是没有初始化的指针,指针的指向是随机的,不可以操作野指针//int a 0;//指针p保存的地址一定是定义过的(向系统申请过的)int *p;//野指针*p 200;printf("%d\n",*p);system("pause");return 0;}2 空指针空指针的作用…...

编程日记 2023/12/8 6:29:32

力扣面试150题｜ 27.移除元素

力扣面试150题 ｜ 27.移除元素题目描述解题思路代码实现复杂度分析题目描述 27.移除元素给你一个数组 nums 和一个值 val，你需要原地移除所有数值等于 val 的元素，并返回移除后数组的新长度。不要使用额外的数组空间，你必…...

编程日记 2023/12/8 6:28:31

JAVA 通过get,post访问远程接口

get请求参数拼接在url ？namevalue&sexvalue // httpurlhttp:127.0.0.1/project public static String doGet(String httpurl){HttpURLConnection connection nul；Inputstream is null;BufferedReader br null;String result null;//返回结果字…...

编程日记 2023/12/8 6:27:30

Spark例子

Spark例子以下是一个简单的AI Spark例子： 假设我们有一个数据集，包含房屋大小、卧室数量和售价。我们想使用Spark来预测房屋售价。首先，我们需要导入所需的库和数据。在这个例子中，我们将使用Pyspark。 python from pyspark…...

编程日记 2023/12/8 6:26:30

linux下ls和df卡死

1. strace看下卡在哪里 https://lokie.wang/article/43 strace ls strace df -h 2. 原因 https://segmentfault.com/a/1190000040620740 3. fuser 和 umount都不行，最后只能重启重启机器还起不来了垃圾...

编程日记 2023/12/8 6:25:29

iOS(swiftui)——系统悬浮窗( 可在其他应用上显示，可实时更新内容)

因为ios系统对权限的限制是比较严格的，ios系统本身是不支持全局悬浮窗（可在其他app上显示）。在iphone14及之后的iPhone机型中提供了一个叫灵动岛的功能，可以在手机上方可以添加一个悬浮窗显示内容并实时更新，但这个功能有很多局限性如：需要iPhone14及之后的机型且系统…...

编程日记 2023/12/8 6:24:28

css弹窗动画效果，示例弹窗从底部弹出

从底部弹出来，有过渡动画效果用max-height可以自适应内容的高度，当内容会超过最大高度时可以在弹窗里加个scroll-view 弹窗不能用v-if来隐藏，不然transition没效果，transition只能对已有dom元素起效果，所以用透明和v…...

编程日记 2023/12/8 6:21:26

STM32CubeIDE(CUBE-MX hal库)----RTC时钟，时钟实时显示

系列文章目录 STM32CubeIDE(CUBE-MX hal库)----初尝点亮小灯 STM32CubeIDE(CUBE-MX hal库)----按键控制 STM32CubeIDE(CUBE-MX hal库)----串口通信 STM32CubeIDE(CUBE-MX hal库)----定时器 STM32CubeIDE(CUBE-MX hal库)----蓝牙模块HC-05（详细配置） 前言…...

编程日记 2023/12/8 6:20:25

ubuntu 安装Nvidia驱动

官网下载 sudo bash NVIDIA。。。。。跟着b站机器人工匠阿杰即可。...

编程日记 2023/12/8 6:19:24

『亚马逊云科技产品测评』活动征文｜基于亚马逊云EC2搭建PG开源数据库

授权声明：本篇文章授权活动官方亚马逊云科技文章转发、改写权，包括不限于在 Developer Centre, 知乎，自媒体平台，第三方开发者媒体等亚马逊云科技官方渠道亚马逊EC2云服务器（Elastic Compute Cloud）是亚马…...

编程日记 2023/12/8 6:18:23

【开题报告】基于J2EE的高校水电费管理系统的设计与实现

1.选题背景随着高校规模的扩大和信息化建设的深入，学生宿舍的水电费管理成为一项复杂而重要的任务。传统的水电费管理方式通常依赖于人工操作，存在着管理效率低下、数据处理繁琐、费用统计不准确等问题。因此，设计和实现一款基于J2EE的高校…...

编程日记 2023/12/8 6:17:22

Revisiting Proposal-based Object Detection阅读笔记

Revisiting Proposal-based Object Detection阅读笔记论文地址：link Abstract For any object detector, the obtained box proposals or queries need to be classified and regressed towards ground truth boxes. 对于任何物体检测器来说，获得的…...

编程日记 2023/12/8 6:16:21

Docker部署NFS服务

创建基础镜像 mkdir /data/nfs -p chmod 755 /data/nfs# NFS默认端口: 111、2049、20048 docker run -d \ --privileged \ --name nfs_server \ -p 111:111/tcp \ -p 111:111/udp \ -p 2049:2049/tcp \ -p 2049:2049/udp \ -p 30001-30005:30001-30005/tcp \ -p 30001-30005:3…...

编程日记 2023/12/8 6:15:20

深度学习TensorFlow2基础知识学习后半部分

介绍几个重要操作： 1.范数 a tf.fill([1,2], value2.) b tf.norm(a)# 二范数#第二种计算方法 # 计算验证 a tf.square(a) log("a的平方:", a) a tf.reduce_sum(a) log("a平方后的和:", a) b tf.sqrt(a) log("a平方和后开根号:"…...

编程日记 2023/12/8 6:13:18

电脑系统重装Win10专业版操作教程

用户想给自己的电脑重新安装上Win10专业版系统，但不知道具体的重装步骤。接下来小编将详细介绍Win10系统重新安装的步骤方法，帮助更多的用户完成Win10专业版的重装，重装后用户即可体验到Win10专业版系统带来的丰富功能。准备工作 1. 一台正常…...

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

打包Python项目

打包Python项目本教程将指导您如何打包一个简单的Python项目。它将向您展示如何添加必要的文件和结构来创建包，如何构建包，以及如何将其上传到Python包索引（PyPI）。尖端如果您在运行本教程中的命令时遇到问题，请…...

编程日记 2023/12/8 6:11:16

使用Python实现爬虫IP负载均衡和高可用集群

做大型爬虫项目经常遇到请求频率过高的问题，这里需要说的是使用爬虫IP可以提高抓取效率，那么我们通过什么方法才能实现爬虫IP负载均衡和高可用集群，并且能快速的部署并且完成爬虫项目。通常在Python中实现爬虫ip负载均衡和高可用集群需要一…...

编程日记 2023/12/8 6:10:15

Jenkins+Maven+Gitlab+Tomcat 自动化构建打包，部署

环境准备 1、安装服务 Jenkins工具、环境、插件配置全局变量配置 Manage Jenkins>tools>JDK 安装安装插件 Deploy to container 安装此插件，才能将打好的包部署到tomcat上配置国内mvn源创建maven项目 1 2 3 4 5 6 7 8 9 10...

编程日记 2023/12/8 6:07:13

泰凌微(Telink)8258配置串口收发自定义数据

在官网下载SDK后（以Mesh SDK为例）使用Eclipse打开，对应MCU的配置文件在app_config_8258.h，默认的HCI接口是HCI_USE_NONE，如果改成HCI_USE_UART后可以通过串口收发数据，此时默认接收函数处理的是以Telink的协…...

编程日记 2023/12/8 6:04:10

入门低代码开发：快速构建应用程序的方法

一、什么是低代码低代码开发是一种通过可视化建模和拖拽式设计工具来快速构建应用程序的方法。传统软件开发通常需要编写大量的代码，而低代码开发则提供了更高层次的抽象，使开发过程更加简单和高效。通过可视化界面，用户可以通过拖拽组件、配…...

编程日记 2023/12/8 6:03:09

常见客户端消息推送服务【Java后端】

客户端消息推送 1、推送服务苹果 APNs（Apple Push Notification service） 谷歌 FCM（Firebase Cloud Messaging）GCM（Google Cloud Messaging） 第三方个推（Getui）UniApp&#xff…...

编程日记 2023/12/8 6:02:08

C++11(下)

可变参数模板 C11的新特性可变参数模板能够创建可以接受可变参数的函数模板和类模板. 相比C98/03, 类模版和函数模版中只能含固定数量的模版参数, 可变模版参数无疑是一个巨大的改进, 然而由于可变模版参数比较抽象, 使用起来需要一定的技巧, 所以这块还是比较晦涩的.掌握一些基…...

编程日记 2023/12/8 6:01:08

深度学习与逻辑回归模型的融合--TensorFlow多元分类的高级应用

手写数字识别文章目录手写数字识别1、线性回归VS逻辑回归Sigmoid函数 2、逻辑回归的基本模型-神经网络模型3、多元分类基本模型4、TensorFlow实战解决手写数字识别问题准备数据集数据集划分特征数据归一化归一化方法归一化场景标签数据独热编码One-Hot编码构建模型损失函数…...

编程日记 2023/12/8 6:00:07

水库大坝安全监测参数与设备

智慧水利中，水库大坝的安全监测必不可少。做好水库大坝的安全监测，是确保水库大坝结构安全和预防灾害的重要手段。对于预防灾害、保护人民生命财产安全、优化工程管理、改进工程设计、保护环境资源和提高公众信任等方面有着重要的意义。水利水库大坝安全…...

编程日记 2023/12/8 5:59:06