Vue环境安装（详解）

Vue环境安装（详解）

一、修改npm默认安装路径和配置环境变量（或直接配置环境变量）

为什么需要修改npm安装路径和配置环境变量呢？

• 为什么需要修改npm安装路径
  • 由于npm的默认路径是在C盘，在某些时候电脑出现问题需要重装系统了，这个时候之前配置的什么环境、安装的包插件都会消失，这时就需要我们更改npm的安装路径了
• 修改路径指令操作步骤：
  1. 在任意位置打开cmd命令行(快捷键 Windows + R)
  2. 查看原npm的默认安装路径 使用指令：npm config ls prefix就是默认的npm的默认路径 “C:\Users\XXX\AppData\Roaming\npm”
  3. 修改路径
     • 指令：npm config set prefix “路径”(全局)
     • 指令：npm config set cache “路径” (缓存)
  • 重新输入指令：npm config ls 查看是否更改成功

配置环境变量

1. 右键此电脑点击属性
2. 点击高级系统操作,在右下角有一个环境变量点击
3. 在系统变量之中找到Path变量，选中编辑
4. 新建将更改之后的路径(全局)复制进去，一路确定
5. 环境变量配置完成

如果不考虑系统之后系统重装或者是只有一个盘符时，可以直接获取路径，配置环境变量

二、修改默认源

为什么要修改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
• 回车等待即可，接下来就是可能会卡在一半的位置
  
  安装完成打开localhost:8080