Vue的三种使用方式对比

Vue

- 一、Vue的三种使用方式对比
- - 方式1：CDN引入（最简单）
  - 方式2：ES模块导入（现代方式）
  - [方式3：完整构建 vs 运行时构建](#方式3：完整构建 vs 运行时构建)
- 二、与jQuery/Bootstrap的CDN对比
- - 基本CDN引入对比
  - 版本选择CDN地址
- 三、实际项目中的组合使用
- - [示例1：Vue + Bootstrap CDN（传统方式）](#示例1：Vue + Bootstrap CDN（传统方式）)
  - [示例2：Vue + jQuery + Bootstrap（迁移场景）](#示例2：Vue + jQuery + Bootstrap（迁移场景）)
- 四、CDN地址大全
- 五、对比总结：三种技术的CDN使用
- 六、实际开发建议
- 七、完整示例：通过CDN创建Vue组件
- 总结
- - *关键点：
  - 演进路径：

一、Vue的三种使用方式对比

方式1：CDN引入（最简单）

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <!-- 引入Vue.js -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="count++">点击 {{ count }} 次</button>
  </div>

  <script>
    // 创建Vue应用
    const { createApp } = Vue;
    
    createApp({
      data() {
        return {
          message: 'Hello Vue!',
          count: 0
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

方式2：ES模块导入（现代方式）

html 复制代码

<script type="module">
  // 通过CDN的ES模块版本
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
  createApp({
    data() {
      return { message: 'Hello Vue 3!' }
    }
  }).mount('#app')
</script>

方式3：完整构建 vs 运行时构建

html 复制代码

<!-- 完整构建（包含编译器） - 可以在HTML中写模板 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- 运行时构建（更小） - 需要预编译模板（配合构建工具） -->
<script src="https://unpkg.com/vue@3/dist/vue.runtime.global.js"></script>

二、与jQuery/Bootstrap的CDN对比

基本CDN引入对比

html 复制代码

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

版本选择CDN地址

html 复制代码

<!-- 指定确切版本（推荐生产环境） -->
<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"></script>

<!-- 最新版本（可能变化） -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- 不同构建版本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>  <!-- 生产版本（压缩） -->

三、实际项目中的组合使用

示例1：Vue + Bootstrap CDN（传统方式）

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app" class="container mt-4">
    <!-- 使用Bootstrap样式 -->
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">{{ title }}</h5>
        <p class="card-text">{{ description }}</p>
        
        <!-- Vue控制逻辑 -->
        <button class="btn btn-primary" @click="increment">
          点击 {{ count }} 次
        </button>
        
        <div v-if="showExtra" class="mt-3 alert alert-info">
          额外内容
        </div>
      </div>
    </div>
  </div>

  <script>
    const { createApp } = Vue;
    
    createApp({
      data() {
        return {
          title: 'Vue + Bootstrap',
          description: '通过CDN引入的示例',
          count: 0,
          showExtra: false
        }
      },
      methods: {
        increment() {
          this.count++;
          this.showExtra = this.count > 3;
        }
      }
    }).mount('#app');
  </script>
  
  <!-- Bootstrap JS（依赖Popper.js） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

示例2：Vue + jQuery + Bootstrap（迁移场景）

html 复制代码

<!-- 注意：不推荐新项目这样用，但老项目迁移可能遇到 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
  // Vue应用
  const app = Vue.createApp({
    data() {
      return { vueData: '来自Vue的数据' }
    }
  }).mount('#app');
  
  // jQuery代码（尽量少用，避免冲突）
  $(document).ready(function() {
    // 可能需要与Vue组件通信
  });
</script>

四、CDN地址大全

Vue官方CDN

html 复制代码

<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- Vue 2（维护模式） -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

国内CDN（访问更快）

html 复制代码

<!-- BootCDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>

<!-- 字节跳动CDN -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"></script>

<!-- 七牛云 -->
<script src="https://staticfile.org/vue/3.4.21/vue.global.min.js"></script>

生产环境最佳实践

html 复制代码

<!-- 1. 使用特定版本 -->
<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.prod.js"></script>

<!-- 2. 添加SRI完整性校验 -->
<script 
  src="https://unpkg.com/vue@3.4.21/dist/vue.global.prod.js"
  integrity="sha384-xxxx"
  crossorigin="anonymous">
</script>

<!-- 3. 添加备用CDN -->
<script>
  function loadVue() {
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/vue@3/dist/vue.global.js';
    script.onerror = function() {
      // 主CDN失败，加载备用
      const backup = document.createElement('script');
      backup.src = 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js';
      document.head.appendChild(backup);
    };
    document.head.appendChild(script);
  }
  loadVue();
</script>

五、对比总结：三种技术的CDN使用

特性	jQuery	Bootstrap	Vue
CDN引入	单JS文件	CSS + JS文件	单JS文件
全局变量	`$` 或 `jQuery`	`bootstrap`	`Vue` (Vue 2) / 模块导出 (Vue 3)
体积	~30KB	~200KB	~60KB
依赖	无	Popper.js（Bootstrap 5内嵌）	无
生产版本	`.min.js`	`.min.css` + `.min.js`	`.prod.js`
SRI支持	有	有	有

六、实际开发建议

何时使用CDN方式？

html 复制代码

✅ 适合场景：
1. 快速原型/演示
2. 小型项目
3. 学习/实验
4. 静态页面简单增强
5. 不构建工具的环境

❌ 不适合：
1. 大型SPA应用
2. 需要组件化的项目
3. 需要构建优化的生产环境
4. 团队协作项目

现代开发推荐方式

javascript 复制代码

// 对于正式项目，推荐使用构建工具
// 1. 使用Vite创建项目
npm create vue@latest

// 2. 在组件中按需引入
import { createApp } from 'vue'
import App from './App.vue'

// 3. 使用npm包管理依赖

CDN到构建工具的迁移

html 复制代码

<!-- CDN阶段（开始） -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- 过渡阶段 -->
<script type="module">
  import { createApp } from './node_modules/vue/dist/vue.esm-browser.js'
</script>

<!-- 完整构建工具阶段 -->
// main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

七、完整示例：通过CDN创建Vue组件

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .todo-item { margin: 5px 0; }
    .done { text-decoration: line-through; color: #999; }
  </style>
</head>
<body>
  <div id="app">
    <h1>待办事项 (CDN版本)</h1>
    
    <div>
      <input 
        v-model="newTodo" 
        @keyup.enter="addTodo"
        placeholder="输入待办事项"
      >
      <button @click="addTodo">添加</button>
    </div>
    
    <ul>
      <li v-for="(todo, index) in todos" :key="index" class="todo-item">
        <input type="checkbox" v-model="todo.done">
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
    
    <p v-if="todos.length === 0">暂无待办事项</p>
    <p v-else>
      完成: {{ doneCount }} / 总计: {{ todos.length }}
    </p>
  </div>

  <script>
    const { createApp } = Vue;
    
    const app = createApp({
      data() {
        return {
          newTodo: '',
          todos: [
            { text: '学习Vue', done: true },
            { text: '学习CDN引入', done: false }
          ]
        }
      },
      computed: {
        doneCount() {
          return this.todos.filter(todo => todo.done).length;
        }
      },
      methods: {
        addTodo() {
          if (this.newTodo.trim()) {
            this.todos.push({
              text: this.newTodo.trim(),
              done: false
            });
            this.newTodo = '';
          }
        },
        removeTodo(index) {
          this.todos.splice(index, 1);
        }
      }
    });
    
    app.mount('#app');
  </script>
</body>
</html>

总结

*关键点：

CDN适用：学习、演示、简单页面
构建工具适用：正式项目、生产环境
组合使用：Vue + Bootstrap CDN很常见
版本选择：生产环境要指定具体版本号

演进路径：

复制代码

初学者：CDN引入 → 学习Vue基础
进阶者：Vite/Vue CLI → 构建工具开发
项目实战：组件化 + 状态管理 + 路由

Vue的设计很灵活，既支持CDN快速上手，也支持完整的构建工具链，适合不同阶段和不同规模的项目需求。