Vue新手教程(1)－使用vue-cli脚手架搭建vue环境

刚开始学习vuejs,将相关vue环境的搭建步骤整理如下，供新手们参考：

第一步：安装node环境

要使用vue来开发前端框架，首先要有node环境，所以要先下载安装nodejs，官网下载地址为：http://nodejs.cn/download/

若安装成功，则在命令行输入node -v 会显示node版本

2.安装npm的淘宝镜像

node环境安装完成后，自带了包管理器npm,可以通过 npm install 命令安装项目需要的依赖项,不过可能下载速度会比较慢，

可以安装国内的淘宝镜像，安装命令为： > npm install -g cnpm –registry=https://registry.npm.taobao.org

以后用到npm的地方直接用cnpm来代替就好了

3.安装全局vue-cli脚手架

之所以要用vue-cli，是应为这个工具能帮我们搭建好我们需要的模板框架，比较简单。

安装方法，在命令行输入 cnpm install -g vue-cli 回车

安装成功后，在命令行中输入vue，出来vue的信息说明安装成功

4.初始化项目

安装完脚手架以后便可以开始创建一个基于webpack的新项目：命令 vue init webpack myfirstVue

最后的myfirstVue为项目方件夹名

5.安装项目myfirstVue的环境依赖

用命令进入到项目文件夹>cd myfirstVue，然后输入cnpm install,安装完成后会发现项目文件夹中会多出一个node_modules的子文件夹，里面就是刚才安装的所有依赖

6.项目启动运行

准备工作做好以后，测试一下项目里面默认的app.vue模块能否跑起来，这是需要先安装一下服务器环境，在命令行中输入cnpm run dev 回车即可

项目成功启动后，根据提示“Your application is running here:http://localhost:8080”

在浏览器地址栏中输入http://localhost:8080会发现默认的模块打开了