Vue安装步骤及教程(详细)

先从node官网下载并安装node.js,安装node.js的作用就是利用npm资源管理器下载插件等…

 

------把下载好的.exe文件双击安装，一直下一步就OK-------------

1.安装node.js
安装好的node试一下查看是不是安装成功,window键+r输入cmd进入系统管理器
进入系统命令页面输入 node -v 检查是否安装成功

2.安装npm管理器
npm包管理器，是集成在node中的，所以安装了node也就有了npm。有了npm就可以去下载资源库文件，可以通过命令进行下载了，先查看一下npm的版本号
npm -v

 

 

3.安装淘宝镜像(cnpm)
在系统管理台输入
npm install -g cnpm --registry=https://registry.npm.taobao.org 耐心等待，没有报错就是成功的，因为我是安装过的，所以会提示这个信息，有可能网络的原因，下载会慢点 …，安装成功后就可以用cnpm 代替npm下载资源文件

4.安装vue脚手架构建工具
在系统管理台输入
npm install -g vue-cli然后耐心等待安装…
如下图:

 

 

完成后，环境搭建和准备任务就差不多了，现在就可以用vue-cli来创建项目。可以在一个空白的文件下创建使用，这样显着不是太乱，不然等你的项目创建出来之后也不知道放哪里了。

5.创建空文件夹放入vue项目
输入 md vuedemo创建空文件，然后进入到vuedemo文件下
cd vuedemo

6.开始创建Vue-click项目
在命令行中运行命令 vue init webpack vueClickDemo,这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中vueClickDemo是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。

 

 

稍等一波，项目会自动创建，

 

进入文件夹查看一下下载的东西

这个项目的目录和结果（如果是第一次创建vue项目的话 没有node_modules这个依赖包，没有的话安装一下依赖就好了命令是:cnpm install），我不是第一次创建vue项目所以node_modules会有的，

 

安装完成后，要去看一下文件是不是有，要确保资源文件一定要有

7.运行项目
在命令行输入npm run dev，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

在浏览器输入:http://localhost:8080/

大功告成！！！