Vue CLI（Vue脚手架）搭建与学习

安装开发工具vscode

工欲善其事，必先利其器。因此一个好的开发工具，能够让你在开发过程中事半功倍。在学习vue的过程中，我个人推荐使用vscode开发工具。下载地址为：vscode官网，具体版本可根据个人电脑选择下载。

vscode简介

Visual Studio Code（简称vscode）是一个轻量且强大的代码编辑器，支持Windows，OS X和Linux系统。内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统，对开发人员比较友好。更多详情请查看官网

安装nodejs

下载安装nodejs

Node.js 安装包及源码下载地址为：nodejs官网，然后根据电脑版本下载msi文件进行安装

下载完毕后，双击msi文件进行安装，安装完毕后，按win+r输入cmd回车打开，输入node -v查看node版本，如有输出，则安装成功

npm安装

由于新版的nodejs已经集成了npm，所以在安装好nodejs时，npm也一并安装好了。我们可以通过输入 “npm -v” 来测试是否成功安装。

• 如果出现npm版本提示，则表示安装成功
• 如果出现“‘npm’ 不是内部或外部命令,也不是可运行的程序或批处理文件”，则我们需要手动配置npm环境变量，具体操作如下
  
  配置完成后，点击确定，关闭cmd窗口后重新打开，使用"npm -v" 来测试是否配置成功。成功界面如图
  

修改nodejs的全局依赖包下载路径

默认情况下，我们在执行npm install -g XXXX命令下载全局包时，包的默认存放路径为：C:\Users\用户名\AppData\Roaming\npm\node_modules下，可以通过在cmd控制面板上使用命令npm root -g进行查看，如下图（本人的路径是已经修改过了的，故不是默认路径）

但是我们习惯性很少把东西放C盘，故我们可以通过命令自定义依赖包的存放路径。

• 通过命令自定义依赖包的存放路径
      npm config set prefix "D:\tools\nodejs\node_global"
    npm config set cache "D:\tools\nodejs\node_cache"
• 通过修改配置文件自定义包的存放路径
  打开nodejs的安装目录下的node_modules文件夹下的npm文件夹，将该文件夹下的.npmrc文件修改为如下：
  
  以上操作涉及的文件夹，均不需要自己手动创建，在你下载全局包时会自动创建。上述操作的意思是：修改全局包的下载目录为D:\tools\nodejs\node_global，缓存目录为D:\tools\nodejs\node_cache。在你下载全局包时会自动创建node_global目录和node_cache缓存目录。

下载vue脚手架

配置npm淘宝镜像

npm config set registry https://registry.npm.taobao.org

全局安装vue-cli脚手架

npm install @vue/cli -g

搭建vue脚手架项目

打开cmd面板，进入到需要创建vue项目的文件目录，然后按照下面命令格式输入vue项目的创建命令：vue create projectname（项目名）。值得注意的地方是，项目名中不使用小驼峰命名。

• 如果出现下面图片中的successfully，这说明项目创建成功，这时我们进入项目的创建目录，即可看到新建的vue项目。然后便可在该项目中开发我们的vue项目了。
  
• 如果出现“‘vue’ 不是内部或外部命令,也不是可运行的程序或批处理文件”，则表示vue脚手架没有安装成功或者系统无法识别vue脚手架，这时我们需要重新下载vue脚手架或者手动去添加vue脚手架系统环境。
  
  解决方法(确保npm安装成功后)：
      1.进入node.js的安装目录中查看一级目录下是否存在vue.cmd指令；
  
      2.如果看不到该指令，则回到控制台；执行下面两个命令；如果能看到，就跳过第二、三步。
       npm install -g vue
     npm install -g @vue/cli
  
      3. 安装完成后，通过命令vue -V查看是否安装成功。
      
      4.系统环境变量
      将自定义的依赖包存放路径配置到系统中        
      5.配置完环境变量后，重新执行第三步，通过命令vue -V查看是否配置成功。