Vue.js教程—1.介绍和安装

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

参考资料

Webpack 入门教程：http://www.runoob.com/w3cnote/webpack-tutorial.html

官方文档：http://vuejs.org/v2/guide/syntax.html

中文文档: https://cn.vuejs.org/v2/guide/syntax.html

Vue.JS实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>

Vue.js安装

#Vue Devtools

在使用 Vue 时，推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

1.直接用`<script>`引入

官网直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。目前版本Vue2.5.13
开发环境下用未压缩的代码，

开发版本

生产环境下使用压缩后的代码。

压缩版本

注意：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

2.使用 CDN 方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

3.NPM安装

在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版

 $ npm install vue

由于 npm 安装速度慢，可以使用淘宝镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像
首先使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install vue

4.命令行工具创建大型单页应用

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli

 $ cnpm install --global vue-cli

 # 创建一个基于 webpack 模板的新项目

 $ vue init webpack my-project

 # 这里需要进行一些配置，默认回车即可

 This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project

 ? Project description A Vue.js project

 ? Author runoob <test@runoob.com>

 ? Vue build standalone

 ? Use ESLint to lint your code? Yes

 ? Pick an ESLint preset Standard

 ? Setup unit tests with Karma + Mocha? Yes

 ? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "my-project".

To get started:

cd my-project

 npm install

 npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：

$ cd my-project

$ cnpm install

$ cnpm run dev

 DONE Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：