NodeJS 安装及环境配置

前言:作者最近也准备学习一些热门的前端技术,以前都是JQ一把梭(作者是前端菜鸟ε=(´ο`*)))唉)。随着后面接触到了Angular、Vue等项目,作者动起手来很吃力,这几天开始学习VueJS。特地写几篇文章记录一下学习心得,如有写的不对的地方,还请各位指正。(小弟不胜感激())

一、NodeJS下载


1.下载NodeJS安装包
下载地址: NodeJS下载
如何下载NodeJS安装包
2.开始安装
打开安装包后,一直Next即可。当然,建议还是修改一下安装位置,NodeJS默认安装位置为 C:\Program Files
3.验证是否安装成功
打开DOS命令界面:

node -v

在这里插入图片描述
出现NodeJS版本即为安装成功!

npm -v

在这里插入图片描述
出现npm的版本号说明npm工具也已安装成功!

二、环境配置

说明:环境配置的目的主要是为了改变安装NodeJS依赖的下载位置,方便日后管理,以及配置缓存Cache的路径。因为NodeJS在执行安装语句时,会将安装的模块默认安装到**C:\Users\用户名\AppData\Roaming\npm**,从而占用C盘的空间。

1.创建npm模块安装目录

安装时,默认是使用国外的镜像,速度较慢。推荐使用国内镜像!
更换镜像
在这里插入图片描述
分别在NodeJS安装目录下创建node_cache和node_global两个文件夹,如上图所示。
创建文件夹后,打开dos命令窗口,分别执行下面两行命令

npm config set prefix "D:\MySoftware\nodejs\node_global"
npm config set cache "D:\MySoftware\nodejs\node_cache"

2.配置环境变量
我的电脑->右键->属性->高级系统设置->高级->环境变量
在这里插入图片描述
2.1新建NODE_PATH系统变量
在这里插入图片描述

在这里插入图片描述
其实看到这个变量值我开始是有一些疑问的,明明node_global是一个空文件夹,为什么这个值需要定义到一个不存在的文件夹上,原来后面node会自动创建。

2.2更改用户path变量
在这里插入图片描述
将其中默认的C:\Users\用户名\AppData\Roaming\npm更改为下图:
D:\MySoftware\nodejs\node_global
点击确定!

三、测试

我们先安装一个express模块试试

打开dos命令窗口,执行下面的命令

npm install express -g      # -g  是全局安装的意思

在这里插入图片描述
安装成功!
打开D:\MySoftware\nodejs\node_global\node_modules目录
在这里插入图片描述
发现已经安装好了,而这个位置就是我们在环境变量中配置的NODE_PATH的值!

以上就是本文章的全部内容!

参考:https://www.cnblogs.com/liuqiyun/p/8133904.html

  • 192
    点赞
  • 733
    收藏
    觉得还不错? 一键收藏
  • 77
    评论
Ant Design Vue 是一个基于 Vue.js 的 UI 组件库,而 vuedraggable 是一个 Vue.js 的拖放组件。两者结合使用,可以实现拖拽排序的功能。 首先,需要在项目中安装 Ant Design Vue 和 vuedraggable: ``` npm install ant-design-vue vuedraggable --save ``` 接着,在需要使用拖拽排序功能的组件中,引入 vuedraggable 组件: ```html <template> <div> <draggable v-model="list" :options="{handle:'.drag-handle'}"> <div v-for="(item, index) in list" :key="item.id"> <span class="drag-handle">☰</span> {{ item.name }} </div> </draggable> </div> </template> <script> import draggable from 'vuedraggable'; export default { components: { draggable, }, data() { return { list: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, { id: 5, name: 'Item 5' }, ], }; }, }; </script> ``` 在上述示例中,我们使用了 v-model 绑定了一个数组 `list`,这个数组里面包含了需要排序的元素。然后,在 `draggable` 组件中,我们使用了 `v-for` 循环渲染了每个元素,并且给每个元素添加了一个拖拽的句柄(也就是 `drag-handle` 类的元素)。 最后,我们还需要在 `options` 属性中传入一个选项对象,这个对象包含了一个 `handle` 属性,它指定了拖拽句柄的 CSS 选择器。 这样,我们就可以通过拖拽句柄来实现拖拽排序了。当用户拖动一个元素时,它会被移动到新的位置上,并且 `list` 数组中对应的元素顺序也会发生改变。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 77
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值