Vuejs本身的构建东西

近来， 尤大在和人对喷的时刻，悄悄放出了一个大招，因而为了追逐他的步调，赶忙实验了下，而且把原文给人人翻译下。

原文地点：Announcing vue-cli

译文源地点： Vuejs本身的构建东西

先上原文翻译：

近来有许多大批关于React项目标构建东西议论帖子，荣幸的是，关于Vue.js来讲，假如你想要疾速最先，那末你只须要在你的html中引入一个标签，加上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使命。装置完成今后大概是这个模样的。

Official Templates

如今官方的项目模板目标是协助人人经由过程牢固的和可设置的几个步骤疾速最先我们的运用。但是，这些模板并不限定你本身关于运用Vue.js的架构构造和挑选类库。

一切的官方项目模板在vuejs-templates organization。假如有新的模板增加进来，你须要运用以下敕令，

vue init

也能够运用 vue list 敕令来检察一切的官方模板列表。

如今可用的模板包含：

• browserify&＃8211;全功能的Browserify + vueify，包含热加载，静态检测，单元测试

• browserify-simple&＃8211;一个浅易的Browserify + vueify，以便于疾速最先。

• webpack&＃8211;全功能的Webpack + vueify，包含热加载，静态检测，单元测试

• webpack-simple&＃8211;一个浅易的Webpack + vueify，以便于疾速最先。

Bring Your Own Setup

固然，作为自在开辟者，你假如不喜欢上面的模板，你能够fork这些模板，修正他们以相符你本身特殊要求（以至还能够建立一个你本身的模板），经由过程 vue-cli 敕令运用。

vue init username/repo my-project

Vue Components Everywhere

差别的模板有差别的用途： 浅易的能够更疾速的开辟，全功能合适有野心的（大型、牛逼的&＃8211;个人认为）运用。他们的共同点就是，都支撑 .vue文件范例的组件体式格局。意味着任何只需相符 .vue情势的第三方的组件都能够被运用，而且宣布在NPM上&＃8211;游览在可复用的组件天下中吧！

下面是我个人的主意：
实在这类自动的脚手架很早就有了，最早我不知道，我打仗过的有 ruby on rails，异常刁悍，构建ruby的web开辟，入门很快，能疾速搭建web网站。接着最先打仗到其他的构建东西，比方： laravel &＃8212; 一个模拟rails的php框架， hexo&＃8211;一个nodejs的静态blog东西。Yeoman &＃8212; 一个前端的脚手架东西，也是应用nodejs来自动天生（所以下一次多是说Yeoman这个东东,嘻嘻）。

说说vue-cli，实在这是一个典范的脚手架，协助开辟者竖立vue.js的项目，包含了设置好的 package.json 以及写好的打包设置， 比方 webpack或许 browserify的，而且有一个简朴vue例子供应参考。这个如今看来是很有必要的，为何呢？由于我地点的vuejs的群里，险些天天都有人要vue的实例，或许webpack打包设置又出错了，要求协助，如今好了，这些题目作者协助你处理了，你须要的记着这些敕令，而且根据提醒去输入天生即可。

给人人截图看看我已天生完成的东东：

初始化的时刻，注重 webpack是能够变动的，比方这模样

vue init browserify my-browserify

就是和上面范例是对应的。
那末输入的东西是什么呢？ &＃8212; 就是和package.json的一些属性对应

最好的就是能够跑测试，这里须要注重，根据 phantomjs 可能会涌现种种毛病，版本可能会不对，另有权限题目，最好运用 root权限装置。假如照样报错，能够尝试这个敕令：

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

处理方案泉源： phantomjs