Vue.js企业开发实战
上QQ阅读APP看书,第一时间看更新

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 在浏览器中运行的效果