近些年,
尤大在与人对喷的下,悄然出狱了一个大招,于是以追逐他的步伐,赶紧试了产,并且将原文为大家翻译下。

原稿地址:Announcing
vue-cli

事先上原文翻译:

近期时有发生成千上万大方关于React项目的构建工具讨论帖子,幸运的是,对于Vue.js来说,如果你想使高速开,那么您只待以您的html中引入一个<code><script></code>标签,加上CDN的地点即可。但是,这并无算是一个完好的vue实际应用。在实际上利用被,我们须使一如既往多元之家伙,包括:模块化,转译,预处理,热加载,静态检测及自动化测试等。对于一个待长久保护和大型的花色而言,这些家伙是必需的,但是尝试配置初始化这些杀痛苦(还不是你们这些作者老是改来改去的).这便是咱们公布vue-cli的来头,一个大概的构建工具,通过几单默认的步骤帮助而速的构建Vue.js项目。

Just The Scaffolding

利用办法如下:(shell 命令)

npm install -g vue-cli
vue init webpack my-project
# answer prompts
cd my-project
npm install
npm run dev 
# tada! finish

实际就是起Github上的vuejs-templates集体拉取代码,安装npm的指,然后植一个简易的npm任务。安装好之后大概是这法的。

Paste_Image.png

Official Templates

即官的路模板目的是扶助大家通过定点的跟而安装的几乎独步骤快速开我们的应用。然而,这些模板并无限制而协调对于利用Vue.js的架构组织与选择类库。

持有的官项目模板在vuejs-templates
organization
。如果有新的沙盘上加进去,你要用下列命令,

vue init <template-name> <project-name>

为得以用 vue list 命令来查看有的合法模板列表。

此时此刻可用之模板包括:

  • browserify–全功能的Browserify +
    vueify,包括热加载,静态检测,单元测试
  • browserify-simple–一个简单的Browserify +
    vueify,以便为快速开。
  • webpack–全功能的Webpack +
    vueify,包括热加载,静态检测,单元测试
  • webpack-simple–一个简便的Webpack +
    vueify,以便为高效开。

Bring Your Own Setup

当然,作为自由开发者,你要不欣赏点的模板,你可以fork这些模板,修改他们坐合乎您协调特殊要求(甚至还可创造一个公协调的模板),通过
vue-cli 命令下。

vue init username/repo my-project

Vue Components Everywhere

今非昔比之模板来差之用途:
简易的足还迅捷的开销,全效可来野心的(大型、牛逼的–个人觉得)应用。他们之共同点就是是,都支持
<code>.vue</code>文件类型的组件方式。意味着任何要顺应
<code>
.vue</code>形式之老三正的零件都足以于运用,并且发表以NPM上–遨游在可复用的零部件世界中吧!

脚是自个人的想法:
实质上这种活动的底手架好已经来矣,最早我不亮,我碰过之出 ruby on
rails,非常大胆,构建ruby的web开发,入门很快,能迅速搭建web网站。接着开接触到另外的构建工具,例如:
laravel — 一个效rails的php框架,
hexo–一个nodejs的静态blog工具。Yeoman —
一个前端的下手架工具,也是以nodejs来自动生成(所以下一致不善或是说Yeoman这个东东,嘻嘻)。

说说vue-cli,其实就是一个典型的底下手架,帮助开发者建立vue.js的类,包括了布置好之
package.json 以及写好的包装配置, 例如 webpack或者
browserify的,并且产生一个大概vue例子提供参考。这个本总的来说是可怜有必不可少之,为什么吧?因为我所于的vuejs的群里,几乎每天都有人如果vue的实例,或者webpack打包配置又拧了,请求增援,现在吓了,这些问题作者帮助你解决了,你要之记住这些命令,并且按照提示去输入生成即可。

被大家截图看看自己已变完成的东东:

Paste_Image.png

Paste_Image.png

初始化的时,注意 webpack是得更改的,例如这样子

vue init browserify my-browserify

即使是跟方类型是对应之。
那么输入的事物是啊呢? — 就是同package.json的一些属性对应

Paste_Image.png

Paste_Image.png

绝好之饶是可以走单元测试,这里需要小心,按照 phantomjsonjs
可能会见起各种不当,版本可能会见尴尬,还发权力问题,最好使用
root权限安装。如果要报错,可以尝试这命令:

npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads

缓解方案来:
phantomjs

Paste_Image.png

相关文章

网站地图xml地图