Vue开发环境 Nodejs安装 cnpm安装与卸载

已于 2023-09-18 08:05:14 修改
阅读量1.7w 收藏 110
点赞数 22
分类专栏： 前端知识vue/nodejs安装使用 文章标签： vue.js 前端 前端框架
于 2022-08-30 11:48:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46474921/article/details/126596539
版权

目录

Vue概述：

Vue特点：

Vue官网:

一、node.js安装和配置 

1. 下载安装node.js

Step1：下载安装包

Step2：安装程序

Step3：查看

 二、修订

三、环境配置

1、更改npm安装全局模块的目录和缓存路径

2、设置环境变量

① 新建NODE_PATH

② 编辑用户变量（环境变量）的 path

③ 在Path里面添加NODE_PATH

Tips：如果出现安装失败

三、Node.js测试

1.安装express，使用npm命令——> 

2.安装webpack，使用npm命令——> 

3.验证路径

四、下载安装cnpm

 1、配置淘宝镜像

 2、安装cnpm（按需安装）

问题解决：

解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.

1.问题原因

2.解决尝试一

3.解决尝试二

⭐⭐npm常用命令

vue前端框架的环境搭建

Vue 是一套用来动态构建用户界面的渐进式 JavaScript 框架

  • 构建用户界面：把数据通过某种办法变成用户界面
  • 渐进式：Vue 可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的 Vue 插件

Vue概述：

Vue是什么:Vue.js是一套由美籍华人（尤雨溪）开发的相应式系统，前端开发库。
2014年2月尤雨溪开源了前端开发库Vue.js。
2016年9月3日，尤雨溪以技术顾问的身份加盟阿里巴巴Weex团队。
他全职投入Vue.js的开发，立志将Vue打造成Angular/React平级的世界顶级框架Vue的核心库只关注视图层，非常容易和其他库整合

Vue非常适合开发复杂单页应用

Vue可实现数据和视图的双向绑定

Vue特点：

①轻量级框架，vue提供MVVM双向数据绑定，依赖模板表达式和计算属性，使用简单快捷vue可以将一个web开发Vue通过指令将数据和页面进行交互
③中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发
④与传统Web页面通过链接切换页面（重新刷新页面）不同，Vue通过客户端路由实现页面的平滑切换 Vue的界面属于响应式，在各种设备上都具有好的显示效果

Vue官网:

Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架icon-default.png?t=N7T8https://cn.vuejs.org/

一、node.js安装和配置 

1. 下载安装node.js

检查电脑上是否配备 node。
【命令行输入 node -v】【出现版本信息则说明已经安装好了】

我这里尚未安装node.js  接下来可以一同一步步操作。 

官网下载最新版本：Download | Node.js
可以下载安装包（安装教程见：Node.js 安装配置 | 菜鸟教程）
或者下载zip文件找个目录保存，解压下载的文件，然后配置环境变量，将解压文件所在的路径配置到环境变量中。

Step1：下载安装包

这里我选择windows64位操作系统，如上图。

Step2：安装程序

①下载完成后，双击安装包，开始安装，使用默认配置安装一直点next即可，安装路径默认在C:Program Files下，也可以自定义修改

下载完成后进行安装（傻瓜式操作，下一步--下一步即可）

②安装路径默认在C:Program Files下面，也能够自定义修改，而后点击next（我这里设置我的安装目录为D:\software\nodejs\根据自己的需要进行更改。）

 

 ③下图根据本身的需要进行，我选择了默认Node.js runtime，而后Next

  • Node.js runtime ：表示运行环境
  • npm package manager：表示npm包管理器
  • online documentation shortcuts ：在线文档快捷方式
  • Add to PATH：添加到环境变量


④以下图框中所示，我没有选中，而是直接next

⑤点击Install，进行安装

⑥点击finish，完成安装

⑦安装完成后，.msi格式的安装包已经将node启动程序添加到系统环境变量path中,咱们能够查看系统变量进行验证：在【个人电脑】右键→【属性】→【高级系统设置】

⑧点击【高级】→【环境变量】

⑨在系统变量中查看【path】，点击【编辑】

⑩会发现.msi格式的安装包已经将node启动程序添加到系统环境变量path中

由于Node.js 中默认安装了 npm，所以不用额外配置就能在全局命令中使用 npm命令，在cmd中测试一下是否安装成功了：输入 node -v 与 npm –v分别查看版本信息

Step3：查看

① 既然已经将node程序添加到全局系统变量中，把咱们能够直

最低0.47元/天 解锁文章
Siobhan.Mxin
关注
专栏目录
node.js安装+卸载，npm+cnpm安装+卸载 vue安装+卸载
qq_45383769的博客
12-11 2105
老 http://npm.taobao.org 和 http://registry.npm.taobao.org 域名将于 2022 年 05 月 31 日零时起停止服务。点击电脑左下角windows图标，输入cmd，点击命令提示符打开命令提示符窗口。一般这样就表示电脑上是没有node.js的，一般没安装过的电脑都没有。淘宝NPM新的Web 站点：https://npmmirror.com。再检查下npm是否安装好（node附带就安装了）首先看一下电脑是有没有node.js软件。
Vue环境安装(一)
qq_35673187的博客
08-20 303
Vue环境安装(一) 前言 学习后端十几天了, 总是觉得用着springboot配套的thymeleaf不舒服, 仿佛回到了JSP时代, 现在正好赶上前后端分离, 也想试试自己能不能从零开始整这么一套. 说白了就是前端框架学习, 后端框架学习加上整合. 能跑起来就心满意足了. 写这个笔记只是为了记录学习过程. 现在的状态是Vue完全不了解, SSM懂个皮毛, 对如何从0开始搭建完全没有概念…不过还是要保持乐观! 接下来打算跟着https://www.bilibili.com/video/BV1EE411
CNPM 安装与使用指南
最新发布
gitblog_00095的博客
08-10 528
CNPM 安装与使用指南 cnpmcnpm: npm client for China mirror of npm项目地址:https://gitcode.com/gh_mirrors/cn/cnpm CNPM（China NPM）是针对中国地区的npm镜像服务，它提高了在国内下载 npm 包的速度。本教程将指导您了解其项目结构、启动文件以及配置文件。 1. 项目目录结构及介绍 CNPM 的源代...
cnpm安装
热门推荐
Jack, what else can you do besides holding your little darling?
07-12 1万+
cnpm安装
cnpm 安装
c153284575的博客
01-28 3866
1、安装cnpm，输入以下命令： npm install -g cnpm --registry=https://registry.npm.taobao.org 2、输入cnpm -v，检测是否正常 cnpm -v 失败 配置淘宝镜像 npm config set registry https://registry.npm.taobao.org 配置完成后检验是否成功 npm config get registry ...
cnpm的安装
ouyangqing的专栏
09-08 3554
cnpm的安装
Node.js使用cnpm
langresser的专栏
10-15 2385
npm是Node.js中维护第三方库、模块的工具，但是国外的速度很悲剧，这里有一个中国的源cnpm。 http://cnpmjs.org/ 需要在命令行中运行 npm install -g cnpm --registry=http://r.cnpmjs.org 然后所有使用npm的地方直接使用cnpm来替代 第三方的模块的安装目录 C:\Users\当前用户\AppData\Roami
安装nodejs 配置cnpm 安装vue UI
xyj_1_2的博客
12-01 944
一、安装nodejs 下载地址：http://nodejs.cn/download/ 选择合适自己系统的版本 安装时修改安装路径 在C盘以外的盘建立一个文件夹 D:\nodejs 安装 下一步下一步 。。。。 在cmd 控制台输入 nodejs -v 检测nodejs是不是安装成功 在cmd输入 npm -v 检测是不是下载成功 二、配置环境 在D:\nodejs的目录下新建两个文件夹 node_cache和node_global 在控制台cmd 输入 npm config set prefi
搭建vue开发环境
12-09
在进入Vue.js开发之前，首先需要确保你的计算机上已经安装了必要的开发环境。本文将详细介绍如何搭建Vue的开发环境，以便开始你的Vue项目。 一、安装Node.js Vue.js的开发依赖于Node.js环境，因此第一步是下载并...
Vue开发环境搭建的详细教程，图文并茂
11-29
### Vue开发环境搭建详解 #### 一、Node.js 安装与配置 为了开始使用Vue进行前端开发，首先需要确保你的计算机上安装了Node.js。本文档提供了详细的步骤指导你如何在Windows环境下安装Node.js。 - **安装Node.js*...
安装cnpm命令报错
12-13
根据提供的引用内容，安装cnpm命令报错可能有以下三种类型及解决方法： 1.安装cnpm失败： 如果在安装cnpm时出现错误，可以尝试以下方法解决： - 检查网络连接是否正常； - 检查npm源是否被墙，可以使用淘宝镜像源进行安装； - 检查是否有管理员权限。 2.cnpm install失败： 如果在使用cnpm install命令时出现错误，可以尝试以下方法解决： - 检查网络连接是否正常； - 检查npm源是否被墙，可以使用淘宝镜像源进行安装； - 检查是否有管理员权限； - 检查是否有package.json文件，如果没有可以使用npm init命令生成。 3.常见错误： 在使用cnpm命令时，还可能会出现其他错误，例如： - EACCES权限错误：可以使用sudo命令获取管理员权限； - ENOENT文件或目录不存在错误：可以检查文件或目录是否存在。 下面是一个安装cnpm命令报错的例子： ``` npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/cnpm npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/cnpm' npm ERR! { [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/cnpm'] npm ERR! stack: npm ERR! 'Error: EACCES: permission denied, mkdir \'/usr/local/lib/node_modules/cnpm\'', npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'mkdir', npm ERR! path: '/usr/local/lib/node_modules/cnpm' } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator. ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Siobhan.Mxin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值