使用Vue-cli下载一个以webpack打包的vue模板

如今vue.js热度不减，利用vue-cli和webpack可以非常便捷的搭建一个开发环境，以下列出利用vue-cli搭建一个vue.js模板的过程：

1：安装vue-cli
安装vue-cli前系统必须先装有node.js，我们将通过npm来进行环境搭建和依赖加载；本文将介绍window开发环境下的操作，mac系统下大同小异，在操作时需要加入权限sudo即可。
打开cmd，输入node -v查看当前node版本号。如果显示– ‘node’ 不是内部或外部命令，也不是可运行的程序
或批处理文件。
说明系统未装有node，请下载并安装（http://nodejs.cn/download/），下载安装后再cmd查看node -v以及npm -v均会有相应的版本信息。此时node环境准备完毕。

2：下载vue-cli脚手架工具
关于vue-cli：
Vue-cli是vue官方提供的一个命令行工具（vue-cli），可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

执行命令：npm install -g vue-cli 全局安装vue-cli脚手架工具

安装完毕有会得到一大堆目录，先不用理会！看到以下画面说明安成。。
此时执行vue会得到相息
Commands:

init        generate a new project from a templatelist        list available official templatesbuild       prototype a new projecthelp [cmd]  display help for [cmd]

Options:

-h, --help     output usage information-V, --version  output the version number

3：下载模板
C:\Users\hauyi>vue init webpack first_project

‘git’ ——-这里最好先在电脑装有git
? Project name first_project    //项目名称
? Project description A Vue.js project  //项目描述
? Author hau5yi //项目作者，如有git则会自动关联
? Vue build standalone
? Install vue-router? No  //是否使用vue_router
? Use ESLint to lint your code? Yes //esLint的语法检测（ES6）
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

vue-cli · Generated “first_project”.

To get started:

 cd first_project npm install npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

看到以上提示，表示项目已经创建完毕，vue-cli非常友好的提示我们下一步应该如何操作，首先打开项目，然后下载依赖再运行项目，我们跟着提示操作完成这三个步骤即可搭建起一个基础模板。
4：下载依赖并运行   

 cd first_project    //打开项目  npm install         //下载依赖下载依赖完毕之后，会出现很多目录，这些都是项目总用到的依赖项，我们可以通过dir查看当前文件夹，会发现多出了一个 node_modules文件夹，这里就是存放依赖项的地方 npm run dev      //运行项目            

到这里，可以看到电脑8080端口已经运行起来了这个项目，可以看到hellovue界面已经出现了，模板就创建完成了，浏览器打开localhost:8080即即可查看当前项目。