Vue安装保姆级教程

安装环境：win10 64位系统

目录

一、下载安装Node.js

二、安装Vue.js

---

一、下载安装Node.js

官网链接地址：Download | Node.js

1、选择下方红圈标记的版本

2、点击进行安装

3、按下列步骤安装（博主忘截图了，下面尽量写的详细）

（1）点击Next、显示Node.js的许可协议页面；

（2）勾选“I accept the terms in the License Agreement”同意许可协议，并单击Next下一步；

（3）Node.js默认安装路径为“C:\Program Files\nodejs\”，也可以选择自己想要安装的路径，然后单击Next；

（4）点击 “Add to PATH” 然后Next；

（5）点击Install，开始安装；

（6）进度条完成后点击Finish，完成安装

4、配置环境变量：

Node.js安装完成之后，默认会自动在系统的path环境变量中配置了node.exe的目录路径

如果在cmd中输入

node -v

npm -v

报错：'npm'不是内部或外部命令,也不是可运行的程序 或批处理文件

此时，查看自己的环境变量是否配好

详细的教程可以看这篇文章

https://blog.youkuaiyun.com/qq_51644702/article/details/123997488

如果输出版本号就说明配置好了 ，如下图：

二、安装Vue.js

1、用npm命令来安装下载

在cmd中输入

npm i vue -g

npm i vue-cli -g

注：输入【npm i vue -g】下载vue时，尽量使用-g，因为vue的文件中有一些文件是可以vue开头的命令行的，因为-g是下载到环境变量配置的Path地址，所以如果下载到这里，那么vue开头的命令就可以在cmd窗口中直接使用了，不然还需要重新配置环境变量，添加当前下载目录。这样下载下来的Vue CLI i版本号就是最新的，目前已经有5以上的版本，如果要学习vue2，就需要指定版本号。Vue CLI 4.5以下，对应的是Vue2。

下面这篇文章博主介绍了如何运行一个vue2项目：

https://blog.youkuaiyun.com/qq_51644702/article/details/124705426?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22124705426%22%2C%22source%22%3A%22qq_51644702%22%7D&ctrtid=9JoWL

2、下载完Vue后，我们新建一个文件夹，然后打开CMD跳转到该目录

在cmd中输入

vue init webpack my-project

3、输入完命令后，会提示我们配置项目信息，可以一直回车使用默认配置，然后等待项目创建完成

项目创建完成后，如图：

4、项目创建完成，我们会在目录下多了一个文件夹—my-project

5、进入my-project文件夹中运行cmd，输入以下命令进行初始化

npm install

6、最后，我们再输入命令

npm run dev

得到窗体如下：

7、然后打开浏览器，输入http://localhost:8080，vue项目运行成功，如下图：