1.2 Vue的安装与使用
本节我们来学习一下如何安装及使用Vue框架。
1.2.1 直接使用<script>引入
直接使用Vue有两种方式，一种是使用独立的版本；另一种是使用CDN的方式。本书在第1~3章使用Vue的独立版本进行讲解，对于Vue的初学者也推荐使用这种方式入门。从第4章开始，使用Vue的脚手架创建项目。
1．使用独立的版本
在Vue官网http：//cn.vuejs.org下载最新稳定版本，然后使用<script>标签引入HTML页面中，Vue会被注册为一个全局变量。
在官网上提供了两个版本：开发版本和生产版本，如图1.3所示。
图1.3 Vue的下载版本
注意 在开发环境下不要使用生产版本，不然就将失去所有常见错误相关的警告！
下载完成后，直接使用<script>标签引入，代码如下：
2．使用CDN的方式
对于制作原型或学习，可以这样使用最新版本，代码如下：
对于生产环境，推荐使用一个稳定的版本号和构建文件，以避免新版本造成的不可预期的破坏，代码如下：
1.2.2 使用NPM方式
在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如Webpack或Browserify模块打包器等工具配合使用。同时Vue也提供配套工具来开发单文件组件，安装代码如下：
由于NPM安装速度较慢，推荐使用淘宝镜像CNPM，代码如下：
1.2.3 使用命令行工具
Vue提供了一个官方的CLI，为单页面应用（SPA）快速搭建繁杂的脚手架。它为现代前端工作流提供了batteries-included的构建设置。只需几分钟就可以运行起来并带有热重载、保存时lint校验，以及生产环境可用的构建版本。
CLI工具假定用户对Node.js和相关构建工具有一定程度的了解。如果你是新手，建议先熟悉Vue本身之后再使用CLI。本书在第4章将详细介绍脚手架的安装及如何创建Vue项目。
1.2.4 创建一个Vue实例
在本节使用Vue独立版本，首先将Vue.js文件下载到本地项目目录中，在HTML网页文件中引入Vue框架，并在<body>底部使用new Vue（）的方式创建一个Vue实例对象。
index.html文件代码如下：
在浏览器中打开网页，推荐使用Google Chrome浏览器，运行效果如图1.4所示。
图1.4 在浏览器中运行的效果