如何用vue-cli脚手架搭建Vue项目

闲聊一会儿 >_< 这篇文章只是刚刚打开vue的大门，放轻松~~

安装node环境

先检测下node版本吧！或许你还没有安装node呢~
（如果使用Mac在安装的时候报错，除了网络原因就是权限问题，你要在安装的指令前加上sudo）

在终端输入指令

$  node -v

如果你看不到版本号的话，那就劳烦去官网安装一个吧。
当然，如果你安装了node，自然就会有npm工具了。
官网地址：https://nodejs.org/en/download/

安装vue-cli脚手架工具

接下来，我们就可以先全局安装vue-cli~

在终端输入指令

  $ npm install -g vue-cli

=======......如果等的实在是太漫长了，那就Ctrl+c结束这段漫长的等待，使用国内的淘宝镜像cnpm
在终端输入指令

npm install -g cnpm –registry=[https://registry.npm.taobao.org]

安装完成后可以输入cnpm -v去检测，如果返回版本号，说明安装成功。只要把npm换成cnpm的写法就可以愉快的使用淘宝镜像去安装你需要的东西了。

最后，检测一下我们是否安装成功了vue-cli

在终端输入指令

$ vue - V

注意是大写的V，大写的~
看到版本号了，说明安装成功了。

初始化项目

首先，cd到自己想要创建新项目的文件夹下
< vue init 模板类型 项目名称 > 以这样的格式
其中，模板类型有：

• browserify -- 全功能的Browserify + vueify，包括热加载，静态检测，单元测试
• browserify-simple -- 一个简易的Browserify + vueify，以便于快速开始。
• webpack -- 全功能的Webpack + vueify，包括热加载，静态检测，单元测试
• webpack-simple -- 一个简易的Webpack + vueify，以便于快速开始。

（根据项目需求来选择模板类型，我这里就选择最全面的webpack模板吧！）

在终端输入指令

$ vue init webpack item

item是我自己取的项目名称
然后，就会让你填写一些项目的信息(不知道选什么就一路回车就对了，哈哈~对了，填写项目名称要小写字母哦！)

我的正在初始化，可是好慢，也许是网速的原因吧~
报错了！！应该是忘了给权限~

再次在终端输入指令

$ sudo vue init webpack item

噢耶！终于初始化成功了！

接着，cd进入到创建的目录

按照我标注的红色框框去一步步做~
第一，进入到创建的目录
第二，输入指令 npm install ，因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。(安装 vue 路由模块 vue-router 和网络请求模块 vue-resource，输入：cnpm install vue-router vue-resource --save)。
第三，启动项目，输入指令 npm run dev
第四，复制http://localhost:8080这个链接，浏览器会默认打开一个“欢迎页面”。

vue-cli创建的项目目录结构及说明