GCH空城

Vue.js 前端框架入门全攻略

⏱️ 阅读时间 3 分钟
Vue前端框架JavaScript教程

认识 Vue.js：渐进式 JavaScript 框架

如果你正准备从传统的 HTML/JS 网页开发过渡到现代前端工程化，Vue.js 是一个极佳的起点。它被设计为可以自底向上逐层应用，既能作为轻量级库使用，也能支撑大型单页面应用。

1. 核心思想

Vue 的两大核心功能是：

  • 声明式渲染： 允许我们基于标准 HTML 拓展一套模板语法，声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  • 响应性： Vue 会自动跟踪 JavaScript 状态变化，并在改变发生时响应式地高效更新 DOM，无需手动操作 DOM 节点。

方案一：传统 CDN 引入

如果你只是想在现有的普通 HTML 页面中快速添加一些 Vue 的交互功能，不想配置复杂的构建工具，这是最快的方法。

1. 全局构建版本引入

通过 <script> 标签直接在 HTML 中引入 Vue 的 CDN 链接，即可直接在浏览器中使用。

  • 使用方法： 在页面的 <head> 或 <body> 底部添加对应的 script 标签。
  • 示例：
<script src="[https://unpkg.com/vue@3/dist/vue.global.js](https://unpkg.com/vue@3/dist/vue.global.js)"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        message: "Hello Vue!",
      };
    },
  }).mount("#app");
</script>

方案二：使用构建工具创建应用

对于实际的生产级项目，推荐使用基于 Vite 的官方构建工具 create-vue 来搭建。这能让你使用单文件组件 (SFC, 即 .vue 文件) 等现代化高级特性。

1. 环境准备与初始化

你需要访问 Node.js 官网，下载并安装最新稳定版的 Node 环境。

  • 依赖工具： Node.js 和 npm
  • 操作步骤：
  1. 打开电脑的命令行终端。
  2. 运行初始化命令：
    npm create vue@latest
  3. 按照终端的提示，输入项目名称并选择你需要的可选功能（如 TypeScript 语法支持、Vue Router 路由等）。
  4. 进入生成的项目目录并安装依赖库：
    cd <your-project-name>
npm install
  5. 启动本地开发服务器进行预览：
    npm run dev

核心生态：全家桶利器

Vue 不仅仅是一个核心库，它还拥有一套成熟的官方配套工具，以应对复杂的业务场景。

1. Vue Router

官方提供的路由管理器。它负责将不同的网页 URL 映射到对应的 Vue 组件上，从而实现页面的无刷新切换。

2. Pinia

  • 简介： Vue 的专属状态管理库（Vuex 的现代替代方案）。当你的应用变得复杂，多个组件需要共享同一份数据（例如用户登录状态、购物车商品）时，Pinia 可以帮你集中化管理这些全局状态，并提供完整的 TypeScript 类型推断。

⚠️ 注意： Vue 目前主要分为 Vue 2 和 Vue 3 两个大版本。Vue 2 已于 2023 年底停止官方维护，建议新项目直接采用 Vue 3 进行开发。在查阅网上资料或排查报错时，请务必留意文章对应的版本号，避免因语法不兼容（如 Options API 与 Composition API 的差异）导致运行失败。

← 返回首页