跳到主要内容

第2章：Vue.js的安装与配置

第2章：Vue.js 的安装与配置​

2.1 学习目标​

  • 掌握如何通过 CDN 引入 Vue.js
  • 学会使用 Vue CLI 创建一个基本的 Vue 项目
  • 熟悉开发环境的配置，包括 Node.js、npm 和 Vue Devtools 的安装与使用

2.2 使用 CDN 引入 Vue.js​

这是最简单的引入 Vue.js 的方式，适用于快速开发或测试。

2.2.1 基本步骤​

  1. 在 HTML 文件中引入 Vue.js 的 CDN 地址：

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

  2. 或者使用 CDN 提供的开发版本（带调试信息，适合开发时使用）：

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
2.2.2 示例​

创建一个简单的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <title>Vue CDN 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

运行结果：浏览器中会显示 "Hello Vue!"

2.3 使用 Vue CLI 创建项目​

Vue CLI 是 Vue 官方提供的脚手架工具，能够快速生成一个 Vue 项目，适合长期开发。

2.3.1 安装 Vue CLI​

在终端中执行以下命令：

npm install -g @vue/cli
2.3.2 创建项目​

执行以下命令，选择默认配置创建一个新项目：

vue create my-vue-project
  • 选择默认配置（Recommended）即可。
  • 项目名称会自动设置为 my-vue-project。
2.3.3 启动项目​

进入项目目录并启动开发服务器：

cd my-vue-project
npm run serve

打开浏览器，访问 http://localhost:8080，看到默认页面表示项目成功运行。

2.3.4 项目结构说明​

常见文件和文件夹说明：

  • src/：源代码目录
    • main.js：项目入口文件
    • App.vue：根组件
    • components/：组件目录
  • public/：静态资源目录
  • package.json：项目依赖和脚本配置

2.4 开发环境配置​

一个完整的 Vue 开发环境需要以下工具：

2.4.1 安装 Node.js 和 npm​
  1. 下载并安装 Node.js（包含 npm）：
    • 访问 Node.js 官网，下载 LTS 版本。
    • 安装完成后，在终端中验证版本： 
      node -v
      npm -v
2.4.2 安装 Vue Devtools​

Vue Devtools 是一个浏览器扩展，用于调试 Vue 应用。

  1. 在浏览器商店中搜索 "Vue Devtools"，安装插件：

  2. 安装完成后，打开浏览器的开发者工具（F12），切换到 Vue 标签，即可查看应用的状态。

2.4.3 配置 npm 包管理工具​

在终端中设置 npm 的镜像加速（可选，但推荐）：

npm config set registry https://registry.npm.taobao.org

2.5 本章总结​

通过本章的学习，你已经掌握了以下技能：

  • 如何通过 CDN 引入 Vue.js
  • 如何使用 Vue CLI 创建一个新项目
  • 如何配置 Vue 开发环境

这些技能是后续学习 Vue 组件、路由、状态管理等知识的基础。接下来，我们将进入第 3 章，学习 Vue.js 的核心概念与语法。

最后于 更新