1.2 Vue的安装与使用_Vue.js企业开发实战-QQ阅读女生中文仙侠网

本节我们来学习一下如何安装及使用Vue框架。

直接使用Vue有两种方式，一种是使用独立的版本；另一种是使用CDN的方式。本书在第1~3章使用Vue的独立版本进行讲解，对于Vue的初学者也推荐使用这种方式入门。从第4章开始，使用Vue的脚手架创建项目。

在Vue官网http：//cn.vuejs.org下载最新稳定版本，然后使用<script>标签引入HTML页面中，Vue会被注册为一个全局变量。

在官网上提供了两个版本：开发版本和生产版本，如图1.3所示。

图1.3　Vue的下载版本

注意　在开发环境下不要使用生产版本，不然就将失去所有常见错误相关的警告！

下载完成后，直接使用<script>标签引入，代码如下：

对于制作原型或学习，可以这样使用最新版本，代码如下：

对于生产环境，推荐使用一个稳定的版本号和构建文件，以避免新版本造成的不可预期的破坏，代码如下：

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

由于NPM安装速度较慢，推荐使用淘宝镜像CNPM，代码如下：

Vue提供了一个官方的CLI，为单页面应用（SPA）快速搭建繁杂的脚手架。它为现代前端工作流提供了batteries-included的构建设置。只需几分钟就可以运行起来并带有热重载、保存时lint校验，以及生产环境可用的构建版本。

CLI工具假定用户对Node.js和相关构建工具有一定程度的了解。如果你是新手，建议先熟悉Vue本身之后再使用CLI。本书在第4章将详细介绍脚手架的安装及如何创建Vue项目。

在本节使用Vue独立版本，首先将Vue.js文件下载到本地项目目录中，在HTML网页文件中引入Vue框架，并在<body>底部使用new Vue（）的方式创建一个Vue实例对象。

index.html文件代码如下：

在浏览器中打开网页，推荐使用Google Chrome浏览器，运行效果如图1.4所示。

图1.4　在浏览器中运行的效果