vue2中文教程

vue.js是什么?

vue.js(读音 /vjuː/,类似于 view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,vue采用自底向上增量开发的设计。vue的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件vue生态系统支持的库结合使用时,vue也完全能够为复杂的单页应用程序提供驱动。

注意:本教程为vue2.x系列。文中的vue都以2.0版本为准。本教程最后几章会指导你如何从低版本(vue1.x和vue0.x)迁移到高版本(vue2.x)

兼容性

vue.js不支持IE8及其以下版本,因为vue.js使用了IE8不能模拟的ECMAScript 5特性。vue.js支持所有兼容ECMAScript 5的浏览器

通过<script>引入vue

直接下载最新的vue:

开发版本(右击另存为)   包含完整的警告和调试模式

生产版本(右击另存为)   删除了警告

用<script>标签引入下载好的文件:

<script src="项目路径/vue.min.js"></script>

或者直接使用cdn来加载vue

<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>

至此,vue会被注册为一个全局变量

重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告。

通过npm安装vue

在用vue.js构建大型应用时推荐使用npm安装,npm能很好地和诸如webpack或browserify模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。

#最新稳定版
npm install vue

vue命令行工具

vue.js提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

#全局安装 vue-cli
npm install -g vue-cli
#创建一个基于 webpack 模板的新项目
vue init webpack my-project
#安装依赖,走你
cd my-project
npm install
npm run dev

cli工具假定用户对node.js和相关构建工具有一定程度的了解。

如果你是新手,我们强烈建议先在不用构建工具的情况下通读指南,熟悉vue本身之后再研究cli。

通过bower安装vue

#最新稳定版本
bower install vue

AMD模块加载器

独立下载版本或通过bower安装的版本已用UMD包装,因此它们可以直接用作AMD模块。

vue的官方建议

官方指南假设你已有HTML、CSS和Javascript的中级前端知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来!之前有其他框架的使用经验对于学习vue.js是有帮助的,但这不是必需的。

准备好了吗?

我们即将开启vue的学习之旅,接下来的教程会涵盖vue的核心功能和高级用法,let's go!