Vue学习记录（四）--------搭建vue开发环境

客官°小女子只卖身不卖艺 2023-07-08 02:53 1阅读 0赞

1、下载安装Node Js。  
Node Js提供的NPM依赖管理和编译打包工具使用起来非常方便，对于前端比较大型一些的项目还是采用NPM作为打包工具比较理想。要使用NPM，就需要安装NodeJS，下载地址: [https://nodejs.org/en/download/][https_nodejs.org_en_download] ，请选择本机电脑对应的下载32位或者是64位。下载完成后，进行安装，安装过程中，采用默认的步骤就行，唯一值得注意的是，安装路径是否要进行改变，一般默认都为C盘。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhb1hpUg_size_16_color_FFFFFF_t_70]2、配置node的全局变量  
配置npm的全局模块的存放路径、cache的路径，此处我选择放在：D:\\Program Files\\nodejs ,这里是nodejs的安装目录，在安装目录下新建node\_global和node\_cache文件夹，然后在命令行中输入一下命令。  
输入如下命令：

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhb1hpUg_size_16_color_FFFFFF_t_70 1]

3、安装webpack  
安装好nodejs后，安装打包工具webpack, -g表示全局安装。

npm install webpack -g

4、安装vue-cli  
安装vue脚手架项目初始化工具vue-cli， -g表示全局安装。

npm install vue-cli -g

5、配置淘宝镜像  
因为NPM使用的是国外中央仓库，有时候下载速度很慢，所以这里建议使用淘宝的镜像。安装淘宝镜像，安装成功后用cnpm 替代npm命令即可，如cnpm install webpack -g 。

npm install -g cnpm --registry=https://registry.npm.taobao.org

6、安装Yarn  
Yarn是Facebook发布的node.js包管理器，比npm 更快，更高效，可以使用Yarn 替代 npm，安装了Node，同时也就安装了NPM，可以使用下面的命令来安装。

npm i yarn -g -verbose

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhb1hpUg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200224214639291.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhb1hpUg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhb1hpUg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200409205506737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhb1hpUg==,size_16,color_FFFFFF,t_70