Vue爬坑之路一：开发环境

Vue作为最简单的前端框架三巨头非常适合入坑
但是是个坑就需要爬所以我们记录一下爬坑之路

官网：https://cn.vuejs.org/

菜鸟教程：http://www.runoob.com/vue2/vue-tutorial.html

一. 开发环境

使用vue首先要在电脑中安装一些工具，包括：
npm: Nodejs下的包管理器。
cnpm: 可选，npm的淘宝镜像。安装完后可用cnpm代替npm提高装包速度。
webpack: 主要用途是把所有浏览器端需要发布的静态资源做相应的合并和打包。
vue-cli: vue脚手架，用于生成Vue工程模板。

注：虽然直接在html文件中引入vue.js就可进行vue的基本开发操作，但构建系统应用的时候仍然推荐使用npm的方式安装vue。

Step1: Installing Node & NPM
下载node安装文件，（官网中文地址：http://nodejs.cn/）
安装了node也就有了npm，安装完后可利用node-v和npm -v查看版本。

node安装文件.png

查看node与npm.png

Step2: 安装淘宝镜像

npm install -g cnpm --registry=http://registry.npm.taobao.org

Step3: 安装webpack

npm install webpack -g

Step4: 安装vue脚手架

npm install vue-cli -g*

此时命令行输入vue，若显示vue信息表示安装成功。

Vue安装成功.png

二. 创建工程

安装完vue后，可以通过vue脚手架创建工程了。

Step1: cd到你想放置工程的目录根据模板创建项目

vue init webpack your-project

输入完毕后，会要求输入初始化的设置，大部分回车默认即可。

Project name (test) 回车默认
Project description (A Vue.js project) 回车默认
Author 回车默认
install vue-router?No 这里现在不安装路由模块，也可以以后用npm再装上
Use ESLint to lint your code? No
setup unit tests No
setup e2e tests with Nightwatch?No

Should we run `npm install` for you after the project has been created? (recommended)
这里回车直接安装，如果不安装，进入目录下，自己输入npm install也是一样的。

Vue脚手架搭建项目.png

Step2: 启动项目
上述执行完毕后，进入项目所在目录，执行命令。

npm run dev

浏览器输入：localhost:8080(默认端口为8080)，看到Vue页面表示环境搭建成功。

vue搭建成功

此时，查看工程目录结构如下。

工程目录.png

修改src中的app.vue和src/components中各组件即可开始编写vue之旅。