1.2 安装Vue.js
在深入探索Vue.js的神奇世界之前，了解如何正确安装Vue.js是踏上这段旅程的第一步。Vue.js，作为当前最流行的前端框架之一，以其轻量级、易上手以及高效的响应式数据绑定特性赢得了广泛好评。无论是构建小型项目还是大型企业级应用，Vue.js都是一个非常不错的选择。本章节将详细介绍Vue.js的几种常见安装方法，帮助你快速开始Vue.js的学习之旅。
1.2.1 引入Vue.js
Vue.js可以通过多种方式引入到项目中，包括但不限于直接在HTML文件中通过<script>标签引入、使用CDN链接、通过npm/yarn安装到项目中（对于使用现代JavaScript构建工具的项目），以及通过Vue CLI（Vue的官方脚手架工具）快速搭建项目。
1.2.1.1 通过<script>标签直接引入
对于简单的实验或学习目的，你可以直接在HTML文件中通过<script>标签引入Vue.js。Vue.js提供了开发和生产两种版本的库，开发版本包含完整的警告和调试信息，而生产版本则移除了这些信息以优化性能。
<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
请注意，上述链接中的版本号（如2.6.14）仅为示例，实际使用时请访问Vue.js官网获取最新版本号。
1.2.1.2 使用CDN
除了直接在HTML文件中引入，你还可以通过CDN（内容分发网络）来加载Vue.js。CDN的优势在于能够更快地加载资源，因为用户的浏览器可以从最近的服务器上获取文件。与直接在HTML中引入类似，只是你需要将Vue.js的URL替换为CDN提供的链接。
<!-- 示例CDN链接，请访问Vue.js官网获取最新CDN地址 --><script src="https://unpkg.com/vue@next"></script>
注意，上面的@next指的是Vue 3的预览版本链接，Vue 3引入了诸多新特性和改进，但如果你正在学习Vue 2，则应使用对应的Vue 2 CDN链接。
1.2.2 使用npm/yarn安装
对于使用现代JavaScript构建工具（如Webpack、Rollup或Vite）的项目，推荐通过npm（Node Package Manager）或yarn来安装Vue.js。这样做可以方便地管理项目的依赖，并享受构建工具提供的模块化、打包优化等特性。
1.2.2.1 使用npm安装
首先，确保你的开发环境中已经安装了Node.js和npm。然后，打开终端或命令提示符，切换到你的项目目录，执行以下命令来安装Vue.js：
npm install vue
这条命令会将Vue.js及其依赖项添加到你的node_modules目录中，并在package.json文件中记录这个依赖。
1.2.2.2 使用yarn安装
如果你更倾向于使用yarn作为包管理工具，那么安装Vue.js的命令会稍有不同：
yarn add vue
同样地，这条命令也会将Vue.js添加到你的项目中，并在yarn.lock文件中记录依赖信息。
1.2.3 使用Vue CLI创建项目
对于需要快速搭建Vue.js项目的开发者来说，Vue CLI（Vue的官方脚手架工具）是一个极好的选择。Vue CLI提供了项目初始化、开发服务器、构建、测试和代码规范校验等功能，极大地简化了Vue.js项目的开发流程。
1.2.3.1 安装Vue CLI
首先，你需要在全局范围内安装Vue CLI。打开终端或命令提示符，执行以下命令：
npm install -g @vue/cli# 或者如果你使用yarnyarn global add @vue/cli
安装完成后，你可以通过运行vue --version来检查Vue CLI是否正确安装。
1.2.3.2 创建一个新的Vue项目
使用Vue CLI创建一个新项目的命令非常简单。在终端或命令提示符中，导航到你希望存放项目的目录，然后执行以下命令：
vue create my-project
这里的my-project是你想要创建的项目名称，你可以根据需要替换成任何你喜欢的名字。执行命令后，Vue CLI会启动一个交互式会话，询问你一些项目配置选项，如选择预设配置（默认预设、手动选择特性等）、是否使用历史模式路由、是否使用ESLint进行代码检查等。根据你的需求进行选择即可。
创建完成后，进入项目目录，启动开发服务器：
cd my-projectnpm run serve# 或者如果你使用yarnyarn serve
此时，Vue CLI会启动一个热重载的开发服务器，并在浏览器中自动打开你的Vue.js应用。
总结
通过本章节的介绍，你应该已经掌握了Vue.js的几种常见安装方法，包括直接在HTML中引入、使用CDN、通过npm/yarn安装到项目中，以及使用Vue CLI快速搭建Vue.js项目。这些方法各有优缺点，你可以根据自己的项目需求和个人喜好选择最适合的一种。无论是初学者还是经验丰富的开发者，Vue.js都提供了灵活且强大的工具集，帮助你高效地构建出优雅的前端应用。在接下来的章节中，我们将进一步深入Vue.js的核心概念，探索其强大的响应式系统、组件化开发模式以及丰富的生态系统。
