wionds 系统安装vue.js 教程一步步带你踏进vue的世界

1.安装node.js 从node.js 官网下载从node.js 官网下载并安装node

不推荐用最新版本，选择大多数人选择的本版本绿色箭头的版本

2.接下来开始踩坑之旅哈，安装一步步傻瓜式安装小编不在阐述

我们通过命令工具win+r 打开黑窗口，个人建议切换到你的安装目录下 输入node -v查看node的版本号，若出现对应的版本号则说明安装成功

3. 接下来使用npm -v查看 npm包管理器是否安装成功，npm包管理器是集成在node中，如果node安装成功也就是npm安装成功了

4.如果上述步骤操作成功了，接下来是安装镜像听说由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm（淘宝的镜像）那我们使用阿里的镜像cnpm 打开命令窗口
在命令行中输入 npm install -g cnpm --registry=https://registry.npm.taobao.org ，然后等待，没报错表示安装成功，（我的已经安装过了，显示更新成功的信息）

 

完成之后，我们就可以用cnpm代替npm来安装依赖包了。

4.安装vue-cli脚手架构建工具

这一步有个问题 正常使用npm install -g vue-cli 安装脚手架，因我们使用的国内镜像 cnpm来代替的npm，如果使用npm install -g vue-cli 安装失败或者卡着不动不用着急 我们使用cnpm install -g vue-cli命令安装脚手架，小编在这里难过了大半天的时间很多教程中没有提到这个事情在这里小编特此说明

脚手架安装完成后使用 vue -V 检测是否安装成功

以上四个步骤准备好了，我们基本的开发环境和工具也就完成了，接下来我们使用vue-cli来构建项目

构建项目来喽

我们首先选择我们要存放项的位置，（在这里我就进入D盘了，你也可以进入其他盘符来创建）用DOS命令先进到我的D盘，再输入dir查看所有D盘中所有的文件及文件夹(可以看到现在E盘并没有myNode这个文件夹)

如果文件存在我们使用dos命令进入cd myNode

进入目录之后使用 在命令行中运行命令 vue init webpack 项目名。这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中项目名是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在myNode目录生成该文件夹），
运行初始化命令的时候会让用户输入几个基本的配置选项，如项目名称、项目描述、作者信息，对于不明白不想填的信息可以一直按回车去填写就好了如下图:

这个需要等待一会，耐心等待结果

如果一直在等待，到你的创建的项目的文件下查看项目是否存在（如果没有出现的此情况可跳过）

如果创建的项目存在关掉正在创建的项目dos窗口，然后打开黑窗口进入项目的根目录下，

在这里解释一下为什么出现这个原因 第一次创建vue项目的话 node_modules这个依赖包资源就会没有，如果没有的话我么使用 cnpm install创建,如果项目创建完就有 node_modules这个依赖包资源文件夹了就不用再创建了，如果创建完了我们去看看项目下是否有这个文件。

你看到项目根目下有node_modules 文件恭喜你第一个vue项目即将成功 哈哈哈

最后一个步骤使用npm run dev 运行项目

出现访问地址就可以访问了

如果在浏览前上打开，到此就结束了 欢迎进入vue大军一员 陆续更新使用vue+element-ui+ssm 搭建ui框架