Vue.js入门--环境安装

废话：我只是搭一个helloWorld的环境。可这一路走来，跌跌撞撞，前前后后搞了五个晚上。这篇文档就是我在搭建Vue.js时，遇到了很多问题，而没有技术文章能痛快地解决我的痛处，所以我只好自己写一遍文章来记录我当时遇到的阻碍和解决的办法。请各位看官轻踩~

第一步：下载node.js
点击下载node.js
这里需要说明下，因为在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生影响。

阻碍点1：旧版的node.js是没有附带npm的，因为我的电脑在很久之前下载了一个很久的node.js版本，所以没有附带npm的。
解决方法1：卸载旧版node.js，安装新版node.js。当前node.js 版本是V10.13.0。
附带npm版本是6.4.1。
下载node.js界面如下：

下载完之后安装，安装步骤：我略过啦，不过大家可参考这里
点击查看安装教程

不要迷失方向，安装完软件之后就可以回来了！
安装完成，我们开始检查版本：
node版本命令：node -v
npm版本命令: npm -v

 这个步骤不知道有神马用，暂时打问号
 新建两个文件夹node_global 和 node_cache ，我也不是很清楚这两个文件具体用来干嘛的。
执行下面两条命令（根据自己实际路径修改。）
npm config set prefix "D:\A_A_Tool\A-web\node.js\installl\node_global"
npm config set cache "D:\A_A_Tool\A-web\node.js\installl\node_cache”

网上教程： 安装淘宝镜像，打开命令行工具，把这个
（npm install -g cnpm --registry= https://registry.npm.taobao.org）
复制（这里要手动复制就是用鼠标右键那个，具体为啥不多解释），安装这里是因为我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。
我：npm install -g cnpm --registry=https://registry.npm.taobao.org

阻碍点2：这个命令的等号后面有个空格，但是不能有空格！我一直不知道，所以花了一晚上百度，也没看出个所以然，后来看评论，说去除等号后面的空格就好了。上面那一段字体是我当时在简书上看到的文章，看看这个命令，多了一个空格，导致我一直执行失败。（https://www.jianshu.com/p/1626b8643676/）
当时看到的教程是这样的，一开始没有看评论，自己也没有经验，所以掉在坑里面了。
解决办法2：去除等号后面的空格

1、 终于成功安装了,检查是否安装成功：cnpm -v
发现cmd命令报错：‘cnpm’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
百度（https://blog.youkuaiyun.com/u014540814/article/details/78777961
）得知，是我没有配置环境变量，
第三个阻碍点：没有配置环境变量
解决方法：配置环境变量
于是配置环境变量后，
继续检查，在cmd输入：cnpm -v 发现仍然报错。我想了下路径有中文，发现有可能是环境变量路径有中文的问题，于是把中文路径修改成英文路径D:\A_A_Tool\A-web\node.js\installl\node_global，
注意，配置了环境变量之后要重新打开cmd啊，重新打开cmd命令，终于成功。看截图
第四个阻碍点：环境变量路径有中文
解决方法：中文路径修改成英文路径

安装webpack，打开命令行工具输入：npm install webpack -g

别人的文章：安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

我的：输入webpack -v后报错。

报错的原因目前还没有搞清楚，但是看了这篇文章，输入下面这个命令之后就可以了。（https://segmentfault.com/q/1010000014941714）

安装vue-cli脚手架构建工具，打开命令行工具输入：npm install vue-cli -g，
安装完成之后输入 vue -V（注意这里是大写的“V”），
如下图，如果出现相应的版本号，则说明安装成功


通过以上步骤之后，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目
在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：
①cd 目录路径
②如果以安装git的，在相关目录右键选择Git Bash Here
我是选择第一种，简单粗暴。
但是输入了这个命令之后，需要等待的时候很长，看到时间太久了，我去洗了个澡，洗完澡出来发现还是没有下载完成。

上面的hellovue项目因为卡主，被我暂时废弃了。我重新加了一个项目

我不知道这个命令装了多久，我已经睡觉了，第二天早上就看到显示报错。但是显示有get started.

cd 命令进入创建的工程目录，首先cd exprice（这里是自己建工程的名字）；

安装项目依赖：npm install，因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行 .可是，我装了一个白天，这个进度条还是没有变化，

于是，我使用了这个命令：cnpm install。
当时的文章是这么描述的：
不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)，但是但是如果真的安装“个把”小时也没成功那就用：cnpm install 吧

然后很快就装完了！

这一步好像我漏了。。。。
安装 vue 路由模块 vue-router 和网络请求模块 vue-resource，输入：cnpm install vue-router vue-resource --save。

后来，
我直接启动项目了。

打开网页
http://localhost:8080/#/
美滋滋。
第五个晚上，终于完成。