在项目中直接引入Vue.js，适用于简单项目或快速原型开发，可通过CDN或本地文件引入：在HTML中添加`，或下载本地文件后引用，接着创建Vue实例，通过new Vue({ el: '#app', data: { message: 'Hello Vue!' } })挂载到DOM元素，并使用{{ message }}`等模板语法实现数据绑定，此方式无需构建工具，适合小型项目，但大型项目建议使用Vue CLI以支持更复杂的功能和模块化开发。
Vue.js 项目开发：直接引入方式的实践指南
在 Vue.js 项目开发中，开发者通常会选择 Vue CLI 或 Vite 等构建工具来搭建项目，这些工具提供了模块化、热更新、代码分割等高级功能，适合中大型项目，但对于小型项目、快速原型验证、学习入门，或需要与现有非 Vue 项目整合的场景，直接通过 <script> 标签引入 Vue.js 是一种更轻量、低门槛的方式，本文将详细介绍如何在项目中直接引入 Vue.js，并实践核心功能,帮助开发者快速上手。
什么是"直接引入 Vue.js"？
直接引入 Vue.js 指的是通过 HTML 文件中的 <script> 标签，加载 Vue.js 的 CDN 链接（或本地文件），无需构建工具（如 Webpack、Vite），直接在浏览器中运行 Vue 代码,这种方式的核心特点是：
- 零配置：无需安装 Node.js、npm，无需配置构建工具,开箱即用；
- 轻量级：适合小型项目，减少打包和构建的复杂度,提高开发效率；
- 快速上手：适合初学者理解 Vue 的核心概念（如响应式、模板语法）,避免构建工具的干扰；
- 渐进式集成：可以无缝集成到现有项目中,作为渐进式框架的最佳实践。
直接引入 Vue.js 的适用场景
直接引入并非"万能方案",需根据项目需求合理选择：
✅ 适用场景
- 小型项目/个人博客/展示页面：功能简单,无需复杂路由和状态管理；
- 快速原型开发：验证想法时，快速搭建可交互的 demo,节省配置时间；
- 学习入门：避免构建工具的干扰，专注 Vue 核心语法和概念理解；
- 与非 Vue 项目整合：在现有 HTML/PHP/JSP 项目中局部使用 Vue,实现渐进式改造；
- 演示/教学环境：在需要快速展示 Vue 功能的场合,减少环境配置成本。
❌ 不适用场景
- 中大型项目（需要模块化、代码分割、Tree Shaking 等优化）；
- 单文件组件（SFC）开发（需要
<template>、<script>、<style>组合）； - 复杂路由（Vue Router）和状态管理（Pinia/Vuex）等依赖构建工具的功能；
- 需要 TypeScript 支持的项目（直接引入方式对 TS 支持有限）；
- 团队协作项目（缺乏统一的构建规范和代码分割策略）。
直接引入 Vue.js 的详细步骤
步骤 1：准备 HTML 基础文件
创建一个 index.html 文件，这是项目的入口文件，在 <head> 中可引入 Vue 的样式（如需要），在 <body> 中预留一个 Vue 挂载点（即 Vue 实例管理的 DOM 节点）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Vue.js 直接引入示例</title>
<!-- 可选：引入 Vue 的默认样式（如需要） -->
<style>
/* 示例样式 */
#app {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
}
.todo-item {
padding: 8px;
margin: 5px 0;
background: #f9f9f9;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo-item.completed {
text-decoration: line-through;
color: #999;
}
button {
padding: 4px 8px;
background: #42b983;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 5px;
}
button:hover {
background: #3aa876;
}
input[type="text"] {
padding: 6px;
border: 1px solid #ddd;
border-radius: 4px;
width: 70%;
}
</style>
</head>
<body>
<!-- Vue 挂载点：Vue 实例将管理此 DOM 节点及其子节点 -->
<div id="app">
<h1>待办事项列表</h1>
<div>
<input
type="text"
v-model="newTodo"
placeholder="输入新任务"
@keyup.enter="addTodo"
>
<button @click="addTodo">添加</button>
</div>
<ul>
<li
v-for="todo in todos"
:key="todo.id"
:class="{ completed: todo.completed }"
class="todo-item"
>
<span>{{ todo.text }}</span>
<button @click="toggleTodo(todo.id)">
{{ todo.completed ? '取消完成' : '完成' }}
</button>
<button @click="removeTodo(todo.id)">删除</button>
</li>
</ul>
<p v-if="todos.length === 0">暂无待办事项</p>
</div>
<!-- 引入 Vue.js：通过 CDN 加载 -->
<!-- 开发版本：包含警告提示，适合调试 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 生产版本：体积更小，适合上线（替换为 https://unpkg.com/vue@3/dist/vue.global.prod.js） -->
</body>
</html>
步骤 2：引入 Vue.js 的 CDN 链接
在 <body> 底部（避免阻塞页面渲染），通过 <script> 标签引入 Vue.js 的 CDN 链接，推荐使用 unpkg（一个公共 CDN 服务，可获取 npm 上的所有包）或 jsDelivr 等可靠的 CDN 服务。
CDN 选择建议
-
Vue 3 开发版本：
https://unpkg.com/vue@3/dist/vue.global.js- 包含完整的警告和调试信息，适合开发调试
- 文件较大，但便于排查问题
-
Vue 3 生产版本：
https://unpkg.com/vue@3/dist/vue.global.prod.js- 经过压缩优化，体积更小，适合上线部署
- 移除了开发警告，性能更优
-
其他 CDN 选项：
<!-- jsDelivr CDN --> <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script> <!-- BootCDN（国内访问更快） --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
步骤 3：编写 Vue 实例代码
在引入 Vue.js 后，需要在 <script> 标签中创建 Vue 实例并挂载到 DOM 节点上，补充完整的 JavaScript 代码：
<script>
// 创建 Vue 应用实例
const { createApp } = Vue;
createApp({
data() {
return {
newTodo: '',
todos: [
{ id: 1, text: '学习 Vue.js 基础', completed: false },
{ id: 2, text: '完成待办事项示例', completed: true }
],
nextId: 3
}
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.todos.push({
id: this.nextId++,
text: this.newTodo
