原文链接: https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources
校对:Kathy
简介
激动人心的时刻!Vue 2.0 目前来到了 RC 阶段,并且支持库 vuex、vue-router,以及构建工具 vueify 和 vue-loader 都已经提供了支持 2.0 的预览版本!vue-cli 也在今天提供了 2.0 的简单模版!
尽管我们还在准备文档的更新,但这并不能成为阻止你现在就开始尝试 2.0 的理由。
这一系列文章通过整理归纳 2.0 相关的各种库的信息,来帮助你快速入门。
Vue 2.0.0-rc
安装
npm install vue@next --save-dev |
新 API 指南
2.0 的 API 基本没有发生变化,大多数变化存在于表面之下(比如 virtual DOM),除此之外一部分特性被废除,这样做是为了使 API 更加简洁一致,同时引导你以更好的方式使用 2.0。
如果你在此之前从来没有使用过 Vue,WIP official 2.0 Guide 是最好的起点。这份教程并不需要你在此之前接触过 Vue.js,因此你可以直接跳入 2.0。
即使你有使用 Vue.js 1.x 的经验,浏览一遍新的教程也是一个不错的主意,因为其中有许多新的内容,这全都要感谢 @chrisvfritz 的努力。值得注意的是 API 的部分还没有完成,你可以查看这个 issue 来追踪文档更新情况。
如果你仅仅想知道相比于 1.x 有哪些变化,你可以查看 2.0 Changes Github Issue。它会带你快速浏览所有的变化、新特性以及废除的特性,还包括如何用推荐的模式来处理废除的特性(你可以在已经完成的特性和变更列表后面找到这部分内容)。
仓库的 releases 页面提供了有关每个 beta/rc 发布的详情,包括了详细描述版本变化的扩展信息。
next 分支中的示例同样已经更新到了 Vue 2.0 的版本,因此在这里你可以找到可供参考的示例代码。
如果你还有其他问题(我们确定你一定会有),不要犹豫,来 http://forum.vuejs.org/ 提问吧。请不要在 Github 中创建 issue,因为那是专门用来完成报告 Bug、请求功能这类事情。
如果你发现了 Bug,请立即报告给我们!只需要按照 Issue Reporting Guidelines 即可。
独立 vs. 运行时版本
Vue 2.0 有两个可用版本,独立版本和仅运行时版本。
- 独立版本包括模板编译器,并且支持
template
选项。 - 仅运行时版本不包括模板编译器,也不支持
template
选项。在使用仅运行时版本时你只能使用render
选项。优点是其体积比独立版本轻量约 1/3。
当你使用 vue-loader
或 vueify
来引入 vue 文件时,文件中的 template
部分会被自动编译为 render 方法。因此我们推荐运行时版本和 vue 文件配合使用。
当使用 Browserify 或 Webpack 之类的打包工具时,如果你这样写:
import Vue from "vue"; |
你将会得到仅运行时版本,因为它是 NPM 包的默认导出项。如果你出于某些原因确实想使用独立版本(比如你不得不在 HTML 文档中使用模板),你需要在打包工具中为 vue 配置别名。
以 webpack 为例,将下面代码添加到 webpack 配置中:
// ... |
对于 Browserify,你可以使用 aliasify 达到同样的效果。
注意:不要使用 import Vue from 'vue/dist/vue'
—— 因为某些工具或第三方库同样会导入 vue,这种写法可能会导致运行时版本和独立版本同时被导入,进而导致错误。
支持库
最主要的支持库是 vue-router —— 一个 Vue 组件路由,以及 vuex —— 一个拥有单一状态树的类 flux 实现。以上两个库目前均发布了 2.0-rc 版本,但文档还没有被更新。
vue-router
vue-router 是 Vue 官方的路由库,现在已经是 2.0 RC 状态,目前已经实现了对 Vue 2.0 的支持,同时还有若干优化以及重新设计的 API。
2.0 分支中包含了一个拓展示例来说明如何使用新的路由 API。
查看 v.2.0.0-beta.1 以上版本的发布页可以得到所有改进详情。
安装
npm install vue-router@next --save-dev |
vuex
两个 RC 版本?什么鬼?
是的,目前有两个独立的发布候选版:一个是 1.0 版本(发布文档),另一个是 2.0 版本(发布文档)。
那么,两者之间有何区别?
v1.0.0-rc.*
本质上将会是一个针对<1.0.0
API 的稳定发布,目前的文档已经与这一版本同步。v2.0.0-rc.*
是一个使用新 API 的发布候选版,新的 API 包含诸多变化。要了解所有的变化,可以参考这个关于 2.0 设计的 Github issue,也可以参考v2.0.0-rc.1
最新的发布文档。
这两个版本同时兼容 Vue 1.0 和 Vue 2.0!!
这是因为 vuex 对于 Vue 2.0 的底层变化来说在很大程度上来说是独立的。
安装
v1.0.0-rc.* is tagged as `latest` on npm so the default install will give you this version |
构建工具
vue-loader(webpack 工具)以及 vueify(browserify 工具)也已经更新到位,并提供了预览版。它们仅兼容 Vue 2.0,这其中并没有需要处理的相关 API 改变。
vue-loader
v9.0.*
以上版本开始支持 Vue 2.0。(发布文档)
npm install vue-loader@next --save-dev |
vueify
vueify 的情况基本相同 —— v9.0.*
以上版本支持 Vue 2.0。(发布文档)
vue-cli 和模版
vue-cli 是一个命令行工具,它可以帮助你快速搭建一个带有 vue-loader 或 vueify 以及其他像 ESlint 支持等功能的项目。
vue-cli 提供两种模版:「普通模版」拥有包括开发环境、测试及生产构建在内的所有功能,而「简化模版」则可以让你快速开始你的代码。
- 普通模版(
webpack
和browserify
)仍 不 支持 vue 2.0 - 但简化模版已经支持 2.0,包括
webpack-simple-2.0
和browserify-simple-2.0
vue init webpack-simple-2.0 my-project |
记得以上模版都还在更新中,但它们可以帮助你快速开始项目。我们的目标是在正式发布时,普通模版将会支持 2.0。
有一个好消息:如果你打算自己动手升级普通模版来支持 Vue 2.0,这并不是一个大工程!我们会很快在这里添加一些指南,所以经常回来看看。
服务器端渲染
服务器端渲染功能位于 vue-server-renderer
包中。你可以查看它的文档来搞清楚怎样使用。
集成 DEMO
vue-hackernews-2.0 demo 是使用 Vue.js、vue-router 和 vuex 的最新 RC 版本从零开始构建起来的,展示了这些库是如何与服务器端渲染无缝协作的。