win10系统搭建vue相关运行环境全步骤

官网下载node.js

1.根据自己的操作系统选择对应的node安装包
传送门——》 https://nodejs.org/en/download/
历史版本传送门——》https://nodejs.org/en/download/releases/
(LTS大概就是正式稳定的版本,配图为windows64位的操作系统下载的安装包; msi好像是免解压缩直装版)LTS大概就是正式稳定的版本

  1. 双击安装node,选择同意协议后会进入以下安装界面
    (不管是安装外部资源的啥我个人都建议不要安装在系统盘,不过主要还是看个人)在这里插入图片描述

  2. 然后点下Add to PATH然后再点击下一步
    (Add to PATH这个选项表示默认安装后会直接给你配置相关的环境变量否则就要自己进行配置)在这里插入图片描述

  3. 通过如上步骤还后还有一个选项框,大概是让我们选择是否安装配置相关的某些东东,看不懂的就去百度翻译一下,最好勾选上
    因为没来得及截图所以就不上图了,你可以除了同意协议一路啥都不选就Next无脑装;按照我的方法就是为了后期省事哈

  4. 在第3步的基础上通过电脑下方任务栏搜索“cmd”然后选择cmd右键“ 使用管理员身份运行 ”然后分别执行node -v 和npm -v检查是否安装成功,成功会返回对应的版本号
    注:否则就要去系统检查node的相关环境变量是否配置上在这里插入图片描述

  5. 然后进入到node的安装位置新建 node_cache 和 node_global 两个文件夹
    (node_cache用来放置后期缓存的文件,node_global用来放全局全局配置依赖文件)在这里插入图片描述

  6. 通过使用管理员身份运行的cmd中执行以下命令来设置全局和缓存文件夹
    1.npm config set cache “D:\vueProject\nodejs\node_cache”
    2.npm config set prefix “D:\vueProject\nodejs\node_global”
    注:
    1.黄色标注部分请统一修改为自己的安装node.js的相关路径
    2.没有按照前面第4步安装步骤的请打开——》控制面板\系统和安全\系统 然后左侧点击【高级系统设置】里面配置node相关的环境变量后再进行此步骤
    3.再执行命令过程中不会有任何的返回结果属于正常现象
    4.你可以通过执行 npm config get prefixnpm config get cache来查看是否配置成功他们分别会返回刚刚你设置的对应文件路径
    在这里插入图片描述

  7. 全局配置淘宝镜像源: 执行 npm install -g cnpm --registry=https://registry.npm.taobao.org(有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败或者安装慢,所以我们还需要通过以上命令配置npm的国内镜像----cnpm)

  8. 全局配置webpack包cnpm install -g webpack 需要注意:webpack 4.X 开始还需要执行这条命令 npm install webpack webpack-cli -g来安装 webpack-cli 依赖;通过webpack -v 检查配置是否成功

2.了解npm和yarn以及日常使用建议

  1. yarn 就是一个类似于 npm 的包管理工具,它是由 facebook 推出并开源。与 npm 相比,yarn 有着众多的优势,主要的优势在于:1.速度快、2.离线模式、3.版本控制

  2. 下载yarn有3种方式(下载.msi安装包 / 用Chocolatey / 通过scoop)
    以上方法有时间自己可以去尝试,我只说简单的–》管理员运行cmd中执行npm install -g yarn命令安装

  3. 安装了之后执行yarn -v检查是否安装成功,没有返回版本信息则去检查系统环境变量是否没有配置在这里插入图片描述

  4. 若没有配置环境变量的话,则执行yarn config global bin把返回的路径配置到系统环境变量去。

  5. 在你的yarn安装目录中添加cacheglobal 文件后分别执行yarn config set global-folder "D:\Program Files\yarn\global"yarn config set global-folder "C:\Program Files\yarn\cache"配置缓存及依赖文件位置。(注:命令中的路径记得改为自己安装的路径

  6. 全局配置淘宝镜像 yarn config set registry https://registry.npm.taobao.org ;并使用 yarn config get registry 检查是否配置成功,成功则返回所配置的源。在这里插入图片描述

  7. 执行yarn add vue然后再执行yarn globala add vue-cli 全局安装vue及vue-cli,执行vue -V配置成功则返回vue版本信息。

  8. 配置vue项目运行环境:1.使用vscode将项目代码加入工作区右键选择在集成终端运行,2.或者cmd到项目所在目录,然后执行yarn配置项目依赖,加载完后再yarn run devyarn run serve在这里插入图片描述

npm和yarn常用命令

作用npmyarn
配置默认依赖npm installyarn
初始化npm inityarn init
安装某个依赖并保存npm install xxx --saveyarn add xxx
移除某个依赖npm uninstall xxx --saveyarn remove xxx
安装某个全局依赖npm install -g xxxxyarn global add xxx
更新依赖npm update --saveyarn upgrade
运行指令npm runyarn run

以上为基本配置过程,若过程有报错,请自行根据相关的错误搜索解答;一般不会有问题,主要问题解决思路为1.环境变量配置问题2.部分相关的配置依赖问题;可根据错误查找。
其他指令请自行搜索,以上内容仅供参考,更多相关内容无法一一陈述请谅解。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值