用VScode运行Vue项目详细全过程（node.js环境的配置）

        在用VScode运行Vue项目前，我们需要先配置node.js环境，就类似于使用eclipse前需要配置Java环境的这个过程。

一、安装node.js并配置环境变量

1、安装

        从官网下载安装包，解压到指定位置，就相当于安装完成了。然后在解压后的目录下新建node_global和node_cache这两个文件夹。

        node_global：npm全局安装位置

        node_cache：npm缓存路径

2、配置环境变量

        在系统变量里添加一个名为NODE_HOME的变量，值为node.js的安装路径

         然后在path中添加：%NODE_HOME%和%NODE_HOME%\node_global这两个变量

         环境变量配置好后，打开cmd，输入node -v和npm -v，若显示出版本号，说明安装配置成功。

 3、配置npm全局模块路径和cache默认安装位置

        这一步是将前面安装之后新建的两个文件夹node_global（npm全局安装位置）和node_cache（npm缓存路径）与npm联系起来

        打开cmd，将执行目录切换到node.js的安装目录，分别执行以下命令，最好以管理员身份运行cmd，不然可能导致无法识别。

        （注意！！从这一步开始的以下所有关于npm的在cmd里的命令操作都要切换到node.js的安装目录下执行）

npm config set prefix "D:\Program Files\node-v10.16.0\node_global"

npm config set cache "D:\Program Files\node-v10.16.0\node_cache"

         注意，路径用的引号是英文状态下的双引号，不是单引号，也不是中文的双引号。

4、修改npm镜像 

        使用npm的官网镜像下载依赖包速度太慢，为了提高速度，这里我们使用npm淘宝镜像，同样是在cmd中，将执行目录切换到node.js的安装目录，执行以下命令

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

5、安装vue-cli脚手架

        以上都设置好后，重新打开cmd，执行以下命令，然后等待安装完成就行。

（！！！现在好像把cnpm禁用了，如果执行报错的话，就试试用npm，以下涉及到cnpm的，凡是不能执行，都先试试换npm）

cnpm install -g @vue/cli

注意！！以上所有的安装过程，在node版本上可能会出现坑，最好安装稳定版本node10，之前安装失败过一次，装的是node12，然后在第5步装vue脚手架的时候，一直报错如下图，看了网上的经验，说是node版本问题，换成10之后果然就解决了

二、在VScode上跑clone来的vue项目

         能正常运行的vue项目的目录里都有一个名为node_modules的文件夹，里面存放了运行这个vue项目需要的所有依赖包，一般来讲，从网上直接clone来的别人的项目目录里是不会包含node_modules文件夹的，因为占得内存太大。所以要想运行别人的项目，必须先重新给它下载依赖包。

        打开VScode，点击file/open folder，选择项目文件夹，点击打开，按Ctrl+shift+Y呼出终端，执行以下命令，等待npm安装完成

（因为前面已经设置好了cnpm，所以这里可以直接用cnpm替换npm进行安装）

    cnpm install 

        npm安装完成后，项目目录下就会出现node_modules文件夹了

         然后执行cnpm run dev，运行vue项目

cnpm run dev

         出现以上就代表项目成功运行，在浏览器中输入http://localhost:8090即可看到项目主界面。

注意！！如果你用dev出现以下图中的错，那么就把命令换成cnpm run serve试试，因为dev/start是老项目的执行方法，新项目一般是serve

       PS:  端口号是可以自己修改的，在这里是8090，设置的端口最好不要和其他程序端口一样，以免产生冲突。

        在项目目录下找到config文件夹，打开config里的index.js文件，里面可以设置端口。