如何在本地搭建vue的运行环境
官网下载node.js
1.根据自己的操作系统选择对应的node安装包
传送门——》 https://nodejs.org/en/download/
历史版本传送门——》https://nodejs.org/en/download/releases/
(LTS大概就是正式稳定的版本,配图为windows64位的操作系统下载的安装包; msi好像是免解压缩直装版)
-
双击安装node,选择同意协议后会进入以下安装界面
(不管是安装外部资源的啥我个人都建议不要安装在系统盘,不过主要还是看个人) -
然后点下Add to PATH然后再点击下一步
(Add to PATH这个选项表示默认安装后会直接给你配置相关的环境变量否则就要自己进行配置) -
通过如上步骤还后还有一个选项框,大概是让我们选择是否安装配置相关的某些东东,看不懂的就去百度翻译一下,最好勾选上
( 因为没来得及截图所以就不上图了,你可以除了同意协议一路啥都不选就Next无脑装;按照我的方法就是为了后期省事哈) -
在第3步的基础上通过电脑下方任务栏搜索“cmd”然后选择cmd右键“ 使用管理员身份运行 ”然后分别执行node -v 和npm -v检查是否安装成功,成功会返回对应的版本号
(注:否则就要去系统检查node的相关环境变量是否配置上) -
然后进入到node的安装位置新建 node_cache 和 node_global 两个文件夹
(node_cache用来放置后期缓存的文件,node_global用来放全局全局配置依赖文件) -
通过使用管理员身份运行的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 prefix 和 npm config get cache来查看是否配置成功他们分别会返回刚刚你设置的对应文件路径) -
全局配置淘宝镜像源: 执行 npm install -g cnpm --registry=https://registry.npm.taobao.org(有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败或者安装慢,所以我们还需要通过以上命令配置npm的国内镜像----cnpm)
-
全局配置webpack包cnpm install -g webpack 需要注意:webpack 4.X 开始还需要执行这条命令 npm install webpack webpack-cli -g来安装 webpack-cli 依赖;通过webpack -v 检查配置是否成功
2.了解npm和yarn以及日常使用建议
-
yarn 就是一个类似于 npm 的包管理工具,它是由 facebook 推出并开源。与 npm 相比,yarn 有着众多的优势,主要的优势在于:1.速度快、2.离线模式、3.版本控制。
-
下载yarn有3种方式(下载.msi安装包 / 用Chocolatey / 通过scoop)
以上方法有时间自己可以去尝试,我只说简单的–》管理员运行cmd中执行npm install -g yarn
命令安装 -
安装了之后执行
yarn -v
检查是否安装成功,没有返回版本信息则去检查系统环境变量是否没有配置 -
若没有配置环境变量的话,则执行
yarn config global bin
把返回的路径配置到系统环境变量去。 -
在你的yarn安装目录中添加cache 和 global 文件后分别执行
yarn config set global-folder "D:\Program Files\yarn\global"
和yarn config set global-folder "C:\Program Files\yarn\cache"
配置缓存及依赖文件位置。(注:命令中的路径记得改为自己安装的路径) -
全局配置淘宝镜像
yarn config set registry https://registry.npm.taobao.org
;并使用yarn config get registry
检查是否配置成功,成功则返回所配置的源。 -
执行
yarn add vue
然后再执行yarn globala add vue-cli
全局安装vue及vue-cli,执行vue -V
配置成功则返回vue版本信息。 -
配置vue项目运行环境:1.使用vscode将项目代码加入工作区右键选择在集成终端运行,2.或者cmd到项目所在目录,然后执行
yarn
配置项目依赖,加载完后再yarn run dev
或yarn run serve
npm和yarn常用命令
作用 | npm | yarn |
---|---|---|
配置默认依赖 | npm install | yarn |
初始化 | npm init | yarn init |
安装某个依赖并保存 | npm install xxx --save | yarn add xxx |
移除某个依赖 | npm uninstall xxx --save | yarn remove xxx |
安装某个全局依赖 | npm install -g xxxx | yarn global add xxx |
更新依赖 | npm update --save | yarn upgrade |
运行指令 | npm run | yarn run |
以上为基本配置过程,若过程有报错,请自行根据相关的错误搜索解答;一般不会有问题,主要问题解决思路为1.环境变量配置问题2.部分相关的配置依赖问题;可根据错误查找。
其他指令请自行搜索,以上内容仅供参考,更多相关内容无法一一陈述请谅解。