vue-cli 发布(译)

5

最近有许多关于React项目工具的讨论,讨论了工具的使用问题。如果你现在正在使用Vue.js,当你构建一个原型的时候,你所需要做的通常就是通过<script>把Vue.js引入进来,然后就完事了。但是真实情况往往不是这样的。当我们真正开发一个应用的时候,我们不可避免的会用到一大堆的工具,模块化、预处理器、热模块加载、代码校验和测试。这些工具对于一个需要长期维护的大型应用是必须的,但是项目初始化将会是让人痛苦的事情。这就是为什么我们做了vue-cli,让一个简单的命令行工具来帮助你快速的构建一个拥有强大构建能力的Vue.js项目。

仅仅为了初始化

下面是使用方法:

# 安装vue-cli
npm install -g vue-cli

# 使用vue-cli初始化项目
vue init webpack my-project

# 进入到目录
cd my-project

# 安装依赖
npm install

# 开始运行
npm run dev

上面的这些命令会从vuejs-templates拉取模板并安装,然后用NPM安装依赖,最后你只需要用个NPM脚本启动就能开始开发了。

官方模板

这些官方的模板存在的意义在于提供强大的项目构建能力,以至于用户可以尽可能快速的进行开发。然而能否真正的发挥作用还在于你如何组织你的代码和你使用的其他库。

所有的官方模板都可以在vuejs-templates organization找到。如果有一个新的模板放在了这里,你可以直接就用vue init <template-name> <project-name>使用。你也可以运行vue list命令来看看现在有哪些官方模板是现在可用的。

目前有以下模板可供选择:

  • browserify - 拥有高级功能的 Browserify + vueify 用于正式开发。

  • browserify-simple - 拥有基础功能的 Browserify + vueify 用于快速原型开发。

  • webpack - 拥有高级功能的 Webpack + vue-loader 用于正式开发。

  • webpack-simple - 拥有基础功能的 Webpack + vue-loader 用于快速原型开发。

创建属于你的模板

如果你对官方的模板不感兴趣,你可以自己fork下来然后进行修改(或者重新写一个),然后用vue-cli来调用。因为vue-cli可以直接拉取git源

vue init username/repo my-project

无处不在的Vue组件

每一个模板都有自己的作用:基础版本用于快速构建原型,高级版本用于正式开发。这些模板有许多共同的功能,如都支持*.vue组件。这意味着任何第三方的Vue组件都可以随意使用,并且可以轻而易举的发布在NPM上 - 让我们创建出更多的可重用组件!

你可能感兴趣的

25 条评论
夜聆风 · 2015年12月30日

cli非常棒 点100个赞

+1 回复

jxy179 · 2016年06月28日

楼主,你好!根据脚手架快速生成的应用只可运行在webpack的server中,如何将成果放到自己的server中,如wamp或虚拟主机?

+1 回复

jack · 2017年01月14日

vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:8080
这个问题谁解决了

+1 回复

0

这个问题 你怎么解决的

一切都无所谓 · 2018年03月21日
jack · 2017年01月14日

你解决了吗

+1 回复

limichange 作者 · 2015年12月30日

:)

回复

qxl1231 · 2015年12月30日

前排留名,哇塞,这个vue真心不错啊,我要用哈哈

回复

边川 · 2015年12月30日

才发现你也是南京的

回复

limichange 作者 · 2015年12月30日

在仙林

回复

丁一 · 2015年12月30日

我也南京

回复

eyakcn · 2016年01月05日

跟yeoman有啥区别??

回复

limichange 作者 · 2016年01月05日

是给vue专用的,只是初始化项目用的。

回复

liujs · 2016年03月12日

有基于 vue-router 的 sap 脚手架吗?

回复

浴火小青春 · 2016年06月30日

同问

回复

2997215859 · 2016年08月19日

江宁的路过:)

回复

limichange 作者 · 2016年08月19日

@jxy179 @浴火小青春 npm run build, 生成打包文件

回复

forever_lighting · 2016年08月20日

@limichange 生成的index.html中的模块没被解析,还是<app></app>,是怎么回事呢?

回复

为自由奋斗的人 · 2016年10月02日

想问下这个问题该怎么解决?安装好vue-cli初始化项目一直报这个错! vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:8118

回复

0

请问这个问题你解决了吗

Yfling · 2017年02月21日
0

没有解决

cunlu · 2017年03月02日
東周_dz · 2016年10月17日

你好,问一下你这个问题怎么解决的呀。

回复

taiyanghua0525 · 2016年11月08日

直接把终端关了,重新打开终端输入命令就行

回复

zhilianbi520 · 2016年11月09日

遇到同样问题了。但是关掉终端重新打开也没用。就是下不下来模板

回复

载入中...