使用Yeoman构建vuejs

       之前使用AngularJs的时候，一直用Yeoman构建项目，感觉还不错。接下里的项目定位使用轻量型的框架，所以最近开始学习vuejs，这里插一句题外话，与facebook这帮人写的react教程相比，@尤雨溪 写的vuejs教程实在是太好了，中英教程，通俗易懂，赞一个！

言归正传，简单介绍下Yeoman

       首先，Yeamon就是一个工具， 帮助你快速的开展一个项目工程，提供最佳实践和工具，来让你保持高效率编码，in short，它帮你完成代码编写之前的一些配置工作。其次，Yeoman包含三个工具， yo --- 脚手架，自动生成工具；Grunt、gulp --- 构建工具 （最初只有grunt，后面gulp火了添加进来的）；Bower、npm --- 包管理工具 （原来是 bower，后面添加了npm）。相当于Yeoman是boss，上面这三个是打工的，虽然三个打工者都是独立的，但是在boss的指挥下却能发挥很大的最用。

准备工作：

                环境：自己组装的台式机 windows 10 (没用过mac，555...)  

                软件：nodejs   cmder    webstorm   

                Yeoman官网：http://yeoman.io/      

                Yeoman中文网： http://www.yowebapp.com/ (英文不好的童鞋可以参考中文的，不过还是以官网为主)

安装：

npm install -g yo  // 这是全局安装，路径默认就可以

安装界面

安装成功

安装完成之后我们就可以使用 "yo" 命令了，我的实际项目在D盘，所以先建去D盘建个文件夹，如图。

mytodo就是刚才新建的文件夹

在此路径下运行"yo"命令。(webapp/Fountain Vue/Fountain webapp/Angular 是我之前使用的时候安装的，如果是初次使用，不会有这几项)

这里会有几项提示，初次使用我们选择 "Install a generator(安装一个生成器)"，按Enter选择后输入vue，我们可能会得到很多选择，然后选择一个自己想要的等待安装完成就可以了（请注意，是可能！正常情况下应该出现很多generator供大家选择，但是小编的电脑就是不出现，反而报错）。不过没关系，我们可以手动安装，命令如下：

npm install -g generator-fountain-vue  // 这里的fountain-vue 是我选择的generator

关于generator，大家可以根据自己的需要自由选择，也可以自己去创建一个，具体方法请参照官网教程。

官方生成器：http://yeoman.io/generators/

我们搜索"vue"，出现了很多可以选择的generator，这里小编选择的是fountain-vue

正在安装generator

安装成功

其实，我们可以把新建项目文件夹的位置放到这里，因为之前安装的yo和generator都是全局的，我们看路径就明白了。

我们在新建的文件夹mytodo下，再次运行"yo"命令，选择刚才安装的generator包"Fountain-vue"，run 一下

Run a generator

接下来会依次出现css预处理器和集成工具的一些配置选项，这里不再赘述。之后就是等待安装了，时间会比较长，请大家耐心等待。如果安装过程卡住或者报错，请大家检查安装信息的配置时候正确或者重新安装。安装成功后的界面，大体上是这样的：

最后，输入启动命令

npm run serve   // 不同的包可能启动命令不同 npm run start || npm start 等

启动完成

浏览器地址栏输入： http://localhost:3000/

单页

接下来，我们就可以用编辑器打开我们的工程，开始码代码了，怎么样，还是挺快的吧！

当然，vue也有自己的构建工具vue-cli，我们在接下来的会继续更新，欢迎大家转阅！

刚才使用 vue-cli 构建了个项目，前后五步就完成了，所以就不单独更新了，具体细节请参照：

Vuejs自己的构建工具：www.jianshu.com/p/f8e21d87a572