使用Yeoman构建vuejs

作者: 我是王小一 | 来源:发表于2017-01-15 14:04 被阅读2980次

       之前使用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

相关文章

  • 使用Yeoman构建vuejs

    之前使用AngularJs的时候,一直用Yeoman构建项目,感觉还不错。接下里的项目定位使用轻量型的框架,...

  • react+redux实战(-)——基本流程

    工程框架可以使用项目构建工具yeoman构建,使用方法可自行搜索。我们使用的是react-webpack,到使用i...

  • 使用yeoman构建angular应用

    本文将介绍如何亲手来完成一个yeoman的generator,以实现快速构建最适合自己的项目。本文将实现的gene...

  • 使用yeoman 构建react项目

    1.npm 全局安装 2.创建项目文件夹,cd到工程目录 根据提示即可新建一个项目 可能出现的错误 node-sa...

  • 如何搭建一个比较省心的前端开发环境

    根据 《windows下使用Yeoman快速构建web项目(当前web富前端开发最全环境配置)》整理所得。 1、安...

  • vuejs环境配置

    单独的vuejs文件,点击 此处 下载 通过npm命令安装vuejs在用 Vue.js 构建大型应用时推荐使用 N...

  • 前端脚手架Yeoman

    今天给大家介绍一款前端的构建工具,Yeoman 那Yeoman到底是做什么的呢? Yeoman可以帮助我们启动一个...

  • yeoman+webpack+react

    yeoman+webpack+react yeoman 脚手架工具,项目开始阶段,使用yeoman来生成项目的文件...

  • vue常见面试问题收藏

    1.Vuejs组件 vuejs构建组件使用 这里注意一点,组件要先注册再使用,也就是说: 如果反过来会报错,因为反...

  • vue需注意的地方

    1. Vuejs中的组件 vuejs构建组件使用: 这里注意一点,组件要先注册再使用如果反过来会报错,因为反过来代...

网友评论

    本文标题:使用Yeoman构建vuejs

    本文链接:https://www.haomeiwen.com/subject/appybttx.html