前言
Vue 一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
更多学习Vue，可以去看。
兼容性
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
更新日志：
最新稳定版本：2.6.14。每个版本的更新日志见 GitHub。
这里做简要了解，具体的话去看我另一篇文章npm是什么？如何安装Node.js和npm？
一：Vue安装
在vue官方网站有两个版本：开发版本和生产版本。顾名思义，开发用开发版本，包含完整的警告和调试模式，生产用生产版本，删除了警告，33.46KB min+gzip。
总共可分为如下几个方法
1、下载
vue，拖进项目里面，并用<script>标签引入
2、直接使用<script src="链接"></script>标签引入
①使用Staticfile CDN方法
②unpkg (初学者推荐)方法
③cdnjs方法
3、NPM方法
4、命令行工具
1、下载vue，并用 <script>标签引入
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
生产版本下载vue
下载完成 Vue.js ,复制粘贴到我们的里面。
新建一个index.html文件，用于在项目里面引用Vue.js
image.png
2、使用<script src="链接"></script>标签引入
下面使用这个方式，有三种方法。
①使用 Staticfile CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN（国内） :
对于制作原型或学习，你可以这样使用最新版本：https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： https://cdn.jsdelivr.net/npm/vue@2.6.14
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件： https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>
②unpkg (推荐)方法
unpkg (推荐)：https://unpkg.com/vue/dist/vue.js会保持和 npm 发布的最新的版本一致。
③cdnjs方法
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<!-- Staticfile CDN（国内）-->
<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
<!-- unpkg（推荐 -->
<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
<!-- cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/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>
结果：
Hello Vue.js!
3、NPM 方法
npm : npm 是 Node.js 官方提供的包管理工具，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制。npm提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。
npm 不需要单独安装。在安装 Node 的时候，会连带一起安装 npm 。但是，Node 附带的 npm 可能不是最新版本，最后用下面的命令，更新到最新版本。
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 npm 镜像。
淘宝 npm 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了
# 查看版本
$ npm -v
# 2.3.0
# npm 版本需要大于 3.0，如果低于此版本需要升级它
#升级 npm
npm install -g npm
# 升级或安装 cnpm
# 若npm install 报错 permission denied，使用sudo npm install -g npm
npm install cnpm -g
在用Vue.js构建大型应用时推荐使用 cnpm 安装：
最新稳定版
// 安装vue-cli脚手架构建工具
npm install --global vue-cli
安装完成，输入vue -V，如果出现相应的版本号，则说明安装成功
image.png
注：Mac 使用安装vue-cli脚手架的时候报错，解决方法:
1.切换到/usr/local/lib/node_modules/目录
cd /usr/local/lib/node_modules/
2.删除vue-cli文件夹
open /usr/local/lib/node_modules/
3.重新安装vue-cli
npm install --global vue-cli
4，命令行工具方法(CLI)
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目 。
目前 Vue CLI同时支持 Vue 2 和Vue 3 项目的创建（默认配置）。
使用Vue-cli有以下几大优势:
1、
Vue-cli是一套成熟的vue项目架构设计，会跟着Vue版本的更迭而更新
2、Vue-cli提供了一套本地的热加载的测试服务器
3、Vue-cli集成了一套打包上线的方案，可使用webpack或Browserify等构建工具
下面来安装vue-cli
#注意：一定要在全局模式下安装vue-cli，否则无法使用vue命令
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
# install dependencies
$ npm install
# serve with hot reload at localhost:8080
$ npm run dev
# build for production with minification
$ npm run build
进入项目，安装并运行：
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
image.png
四：Vue.js 简单使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>标题 : {{site}}</h1>
<h1>路径 : {{url}}</h1>
<h1>说明 : {{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！";
}
}
})
</script>
</body>
</html>
结果如下：
image.png
上面的代码作简要说明：
data：用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods： 用于定义的函数，可以通过return来返回函数值。
{{ }}：用于输出对象属性和函数返回值。
网友评论