新近,
尤大在和人对喷的时候,悄然出狱了三个大招,于是为了追逐他的步履,赶紧试验了下,并且把原文给我们翻译下。

初稿地址:Announcing
vue-cli

先上原文翻译:

前不久有众多恢宏关于React项目标打造工具研究帖子,幸运的是,对于Vue.js来说,如若你想要飞快开端,那么您只要求在你的html中引入二个<code><script></code>标签,加上CDN的地方即可。可是,那并不算是二个一体化的vue实际应用。在实际上利用中,大家亟需要一一日千里的工具,包含:模块化,转译,预处理,热加载,静态检测和自动化测试等。对于2个需求长久体贴和大型的花色而言,那几个工具是少不了的,不过尝试配置开始化那些很惨痛(还不是你们那么些笔者老是改来改去的).那就是大家揭穿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的器重性,然后建立3个粗略的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那一个模板,修改他们以符合您协调特殊需求(甚至还足以创制3个你协调的模版),通过
vue-cli 命令使用。

vue init username/repo my-project

Vue Components Everywhere

不等的沙盘有例外的用处:
简易的可以更便捷的开发,全职能适合有野心的(大型、牛逼的–个人觉得)应用。他们的共同点就是,都扶助<code>.vue</code>文件类型的机件形式。意味着任何只要顺应
<code>
.vue</code>格局的第3方的组件都得以被运用,并且揭橥在NPM上–遨游在可复用的零部件世界中吗!

下边是作者个人的想法:
实际上那种自动的脚手架很已经有了,最早小编不知晓,作者接触过的有 ruby on
rails,相当勇敢,营造ruby的web开发,入门很快,能便捷搭建web网站。接着开始接触到别的的创设工具,例如:
laravel — 叁个仿照rails的php框架,
hexo–贰个nodejs的静态blog工具。Yeoman —
2个前端的脚手架工具,也是行使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

最好的就是足以跑单元测试,那里须求小心,依照 phantomjs
或者会冒出种种不当,版本大概会窘迫,还有权力难点,最好使用
root权限安装。借使依旧报错,可以尝试这几个命令:

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

解决方案来源:
phantomjs

Paste_Image.png

相关文章

网站地图xml地图