Vue环境安装(详解)
一、修改npm默认安装路径和配置环境变量(或直接配置环境变量)
不配置环境变量会发生
-
在安装Vue的情况下,输入指令会显示不是内部或外部命令,也不是可运行的程序或处理文件
为什么需要修改npm安装路径和配置环境变量呢? -
为什么需要修改npm安装路径
- 由于npm的默认路径是在C盘,在某些时候电脑出现问题需要重装系统了,这个时候之前配置的什么环境、安装的包插件都会消失,这时就需要我们更改npm的安装路径了
-
修改路径指令操作步骤:
- 在任意位置打开cmd命令行(快捷键 Windows + R)
- 查看原npm的默认安装路径 使用指令:npm config ls prefix就是默认的npm的默认路径 “C:\Users\XXX\AppData\Roaming\npm”
- 修改路径
- 指令:npm config set prefix “路径”(全局)
- 指令:npm config set cache “路径” (缓存)
- 重新输入指令:npm config ls 查看是否更改成功
配置环境变量
- 右键此电脑点击属性
- 点击高级系统操作,在右下角有一个环境变量点击
- 在系统变量之中找到Path变量,选中编辑
- 新建将更改之后的路径(全局)复制进去,一路确定
- 环境变量配置完成
如果不考虑系统之后系统重装或者是只有一个盘符时,可以直接获取路径,配置环境变量
二、修改默认源
为什么要修改npm源呢?
- npm官方镜像:https://registry.npmjs.org/
- cnpm镜像:http://r.cnpmjs.org/
- 由于官方的镜像都是国外的,网速不稳定时可能会出现因为丢包而产生的不必要报错
- 使用这里使用国内的镜像是非常舒服的
修改npm镜像(taobao)
- 指令:npm config set registry http://registry.npm.taobao.org
三、安装Vue Cli脚手架
安装
- 在目标文件夹下开启cmd
- 输入指令:cnpm i -g @vue/cli 稍等片刻即可完成安装
创建项目
- 继续输入指令:vue create “所创建的项目名称”
- 第一个是选择创建的项目,只有Vue cli版本在4.之上的才会有vue3版本项目,在这里初学者选择的是第三个自定义项目
- 接下来是选择初始化文档,里面上下键控制选择,空格选中,对于初学者来说是需要选择四项即可,Choose Vue version、 Banbel、Vuex、Router,如果有别的需要那么选择上即可
- 根据Vue版本选择2x/3x
- 选择Router模式history||hash,两者的差别在路径后是否有/#/,在开发app是使用的是hash模式
- 选择In package.json
- 是否保存模板,这里根据但是情况来定是否保存,保存的话下次就可以使用模板来进行创建了
- 使用的管理方式是NPM还是Yarn,这里使用NPM
- 回车等待即可,接下来就是可能会卡在一半的位置