ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

win10 搭建 npm 环境

2022-01-05 02:31:08  阅读:213  来源: 互联网

标签:npm node vue cnpm nodejs win10 v16.13 搭建


前言

最近,根据CSDN和博客园等文章的帮助下,搭建了一个npm的环境,现在将搭建过程记录下来,留作参考。

搭建过程

  1. 下载nodejs,我是使用的zip包安装的,安装包官网地址https://nodejs.org/dist/v16.13.1/node-v16.13.1-win-x64.zip

  2. 我把下载的 node-v16.13.1-win-x64.zip 解压到了D盘的nodejs文件夹下,目录D:/nodejs/node-v16.13.1-win-x64/

  3. 在步骤 2 中的**D:\nodejs\node-v16.13.1-win-x64**目录下,新建 node_cachenode_global 两个文件夹

  4. 配置环境变量,在用户环境变量 Path 中添加
    D:\nodejs\node-v16.13.1-win-x64\node_global
    D:\nodejs\node-v16.13.1-win-x64
    D:\nodejs\node-v16.13.1-win-x64\node_modules

    Home + R 输入 cmd 打开系统命令行,输入 node -v 回车 返回 node 的版本号 v16.13.1 , 输入 npm -v 返回 npm 版本号 8.1.2 证明环境变量配置成功

  5. 修改pip源(可解决pip安装第三方包慢的问题,vue初始化项目慢也是由于安装第三方包导致的)
    在c盘的用户目录(C:\Users\你的用户名)下,新建pip文件夹,在pip文件夹下新建pip.ini
    在pip文件夹中,添加如下内容

[global]
index-url = http://mirrors.aliyun.com/pypi/simple/
[install]
trusted-host = mirrors.aliyun.com

如此一来,就可以解决vue初始化项目慢的问题,同时在开发中安装第三方包,也可直接通过pip快速安装。

  1. 配置npm安装目录
    打开命令行,运行:
    npm config set prefix “D:\nodejs\node-v16.13.1-win-x64\node_global”
    npm config set cache “D:\nodejs\node-v16.13.1-win-x64\node_cache”

  2. 安装个module测试npm是否配置成功
    命令行:
    npm install express –g
    运行完毕后,会在D:\nodejs\node-v16.13.1-win-x64\node_global\node_modules\目录下生成一个express文件夹存放express模块
    我运行完毕上面的指令后,命令行提示现有的npm版本低,建议升级:npm install -g npm@8.3.0,直接执行命令即可

  3. 安装淘宝镜像,配置cnmp
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm -v 检查是否安装成功
    npm config set registry https://registry.npm.taobao.org 更换nmp镜像为淘宝源(解决vue init慢的问题)

  4. 安装 webpack
    cnpm install webpack –g

  5. 安装vue-cli
    cnpm install vue-cli –g

  6. 测试环境
    新建一个文件夹 D:\vueTst\tst
    在目录路径下运行:
    vue init webpack test2
    使用vscode打开,在vscode中新建终端,运行 cnpm install
    如果提示:cnpm : 无法加载文件 D:\nodejs\node-v16.13.1-win-x64\node_global\cnpm.ps1,因为在此系统上禁止运行脚本
    需要以管理员身份打开powershell,输入set-ExecutionPolicy RemoteSigned,选择y即可。
    npm run dev,打开浏览器,输入http://localhost:8080,出现vue欢迎页面,证明vue环境配置成功

  7. 安装vue
    cnpm install vue
    测试 vue -V 查看vue版本

  8. 安装vue的脚手架工具
    cnpm install -g @vue/cli
    vue是框架名称,vue也是vue-cli在终端里面的命令。
    vue-cli是vue框架开发的快速工程化命令工具。
    @vue/cli是vue-cli的最新的npmjs的包的名称。

运行:
cnpm install
cnpm run dev或npm run dev
打正式包:
npm run build:prod

参考博客

[1]. Node.js+VScode安装+Vue全家桶环境搭建+Win10(主要参考)
[2]. Node.js安装及环境配置之Windows篇
[3]. 搭建vue开发环境,解决vue init慢的问题
[4]. cnpm : 无法加载文件 C:\software\nodejs\node_global\cnpm.ps1,因为在此系统上禁止运行脚本

标签:npm,node,vue,cnpm,nodejs,win10,v16.13,搭建
来源: https://www.cnblogs.com/brian-sun/p/15765232.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有