0
0
0

技术文章

CodeAI
2026-06-25 06:18
阅读 610

零基础入门Vue.js的架构思考与AI实战

大家好，我是一名文科生转码的前端讲师。当初学的时候，面对满屏的英文和复杂的逻辑，我真的头大，甚至怀疑自己是不是这块料。后来我摸索出一套方法：不要死记硬背API，而是要建立“架构设计思考”。今天写这篇教程，就是想帮零基础小白避开我踩过的坑，用最通俗的语言带你入门。

很多教程只教怎么把页面画出来，却不管代码怎么组织。这篇教程不仅教你Vue.js基础，还会融入架构思考，并结合当下最火的AI大模型，带你做一个实战项目。在这个过程中，你会自然地接触到 Embedding、GLM、智谱清言、Hugging Face 这些前沿概念。别听到AI就害怕，我会把它们和前端开发巧妙结合起来，让你不仅学会Vue，还能拓宽技术视野。

环境准备与架构选型

工欲善其事，必先利其器。我们不需要配置复杂的底层环境，现代前端工具已经帮我们做好了。

1. 安装 Node.js 去官网下载 LTS（长期支持）版本。Node.js 是运行 JavaScript 的环境，没有它，我们的构建工具跑不起来。

2. 使用 Vite 创建项目 我当初学的时候还在用 Vue CLI，现在强烈推荐 Vite。从架构设计的角度来看，Vite 利用了浏览器原生的 ES 模块支持，冷启动速度极快，这是构建工具架构上的一次巨大飞跃。

打开终端，输入以下命令：

npm create vite@latest my-vue-ai-app -- --template vue
cd my-vue-ai-app
npm install
npm run dev

3. 核心目录结构

  • src/components：存放可复用的组件。
  • src/App.vue：根组件，整个应用的骨架。
  • src/main.js：入口文件，负责挂载 Vue 实例。

核心概念与架构思考

学Vue不能只学语法，要理解它背后的设计哲学。

1. 响应式系统：数据驱动视图 传统的开发是“命令式”的，你需要手动告诉浏览器“去修改这个DOM”。而Vue是“声明式”的，你只需要修改数据，Vue的响应式系统会自动帮你更新视图。 架构思考：这就像是你不需要亲自去指挥每一个工人搬砖，你只需要画好图纸（数据），系统会自动把楼盖起来（视图）。

2. 组件化设计：前端界的 Hugging Face 组件化是Vue的灵魂。把页面拆分成独立的、可复用的积木。 架构思考：大家可能听过 Hugging Face，它是一个开源的AI模型社区，里面有各种预训练模型，开发者直接调用即可，不用从零训练。我们的Vue组件库就像是前端界的 Hugging Face。你写的一个“用户卡片”组件，就是一个“预训练模型”，可以在项目的任何地方直接引入使用，极大地提高了代码的复用性和可维护性。

3. 状态管理：数据流的 Embedding 化 当项目变大，组件之间需要共享数据。 架构思考：在AI领域，Embedding（词嵌入）是将文本转化为高维向量，保留语义信息，让模型能理解上下文。在Vue的状态管理（如Pinia）中，我们其实也是在做大局数据的“Embedding”。我们将零散的组件状态抽离出来，集中存储在一个全局的“向量空间”（Store）里。任何组件都可以通过“语义”（状态名称）精准获取自己需要的上下文，避免了组件之间像无头苍蝇一样乱传参数。

实战项目：基于Vue的AI对话助手

光说不练假把式。我们来写一个聊天界面，接入 智谱清言 的 GLM 大模型API。

背景知识：

  • GLM：智谱AI推出的通用语言大模型。
  • 智谱清言：基于GLM模型开发的C端对话产品。 今天我们要做的，就是自己用Vue写一个类似“智谱清言”的前端界面。

步骤1：定义组件架构 我们将页面拆分为三个组件：

  1. ChatHeader.vue：顶部标题栏。
  2. MessageList.vue：消息列表展示区。
  3. ChatInput.vue：底部输入框。

步骤2：编写核心组件代码

先写输入框组件 ChatInput.vue：

<template>
  <div class="chat-input">
    <input 
      v-model="userInput" 
      @keyup.enter="sendMessage" 
      placeholder="向 GLM 模型提问..." 
    />
    <button @click="sendMessage">发送</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 定义响应式数据
const userInput = ref('')
// 定义自定义事件，用于向父组件传递数据
const emit = defineEmits(['send'])

const sendMessage = () => {
  if (userInput.value.trim()) {
    emit('send', userInput.value)
    userInput.value = '' // 清空输入框
  }
}
</script>

<style scoped>
.chat-input { display: flex; padding: 10px; }
.chat-input input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.chat-input button { margin-left: 10px; padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
</style>

接着写消息列表组件 MessageList.vue：

<template>
  <div class="message-list">
    <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]">
      <strong>{{ msg.role === 'user' ? '我' : '智谱清言GLM' }}:</strong>
      <span>{{ msg.content }}</span>
    </div>
  </div>
</template>

<script setup>
// 接收父组件传递的消息数组
defineProps({
  messages: {
    type: Array,
    required: true
  }
})
</script>

<style scoped>
.message-list { flex: 1; overflow-y: auto; padding: 10px; }
.message { margin-bottom: 10px; padding: 10px; border-radius: 8px; max-width: 80%; }
.message.user { background: #e3f2fd; margin-left: auto; text-align: right; }
.message.assistant { background: #f1f1f1; }
</style>

步骤3：在根组件中组装与调用API

在 App.vue 中，我们把组件拼装起来，并编写调用 GLM API 的逻辑。 (注：实际项目中，调用大模型API应放在后端，这里为了演示前端逻辑，简化为前端直接请求，实际开发请注意保护API Key)

<template>
  <div id="app">
    <header class="header">
      <h2>我的专属 AI 助手 (Powered by GLM)</h2>
    </header>
    <MessageList :messages="chatHistory" />
    <ChatInput @send="handleSend" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MessageList from './components/MessageList.vue'
import ChatInput from './components/ChatInput.vue'

// 状态管理：维护聊天历史（这就是我们前面提到的数据 Embedding 化）
const chatHistory = ref([
  { role: 'assistant', content: '你好！我是基于 GLM 模型的 AI 助手，有什么可以帮您？' }
])

const handleSend = async (userText) => {
  // 1. 将用户输入加入历史
  chatHistory.value.push({ role: 'user', content: userText })
  
  // 2. 添加一个 loading 状态的 AI 回复占位
  chatHistory.value.push({ role: 'assistant', content: '思考中...' })
  const aiIndex = chatHistory.value.length - 1

  try {
    // 3. 调用智谱清言 GLM 的 API (此处为伪代码示例，需替换为真实API和Key)
    const response = await fetch('https://open.bigmodel.cn/api/paas/v4/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_API_KEY' // 替换为你的真实 Key
      },
      body: JSON.stringify({
        model: 'glm-4', // 指定使用 GLM 模型
        messages: chatHistory.value.slice(0, -1) // 传入历史上下文
      })
    })
    
    const data = await response.json()
    // 更新 AI 的回复内容
    chatHistory.value[aiIndex].content = data.choices[0].message.content
  } catch (error) {
    chatHistory.value[aiIndex].content = '抱歉，网络开小差了，请稍后再试。'
  }
}
</script>

<style>
#app { display: flex; flex-direction: column; height: 100vh; font-family: sans-serif; }
.header { background: #007bff; color: white; padding: 15px; text-align: center; }
</style>

新手常见问题与避坑指南

我当初学的时候，在这几个地方卡了很久，大家一定要避开：

1. 跨域问题 (CORS) 现象：在调用智谱清言 API 时，浏览器报错 Access-Control-Allow-Origin。 原理：浏览器的同源策略禁止前端直接请求不同域名的接口。 解决：在 Vite 的 vite.config.js 中配置 server.proxy，或者老老实实写一个 Node.js 后端做接口转发。前端架构设计时，永远不要把核心 API 调用直接暴露在前端。

2. 响应式数据丢失 现象：修改了对象里的某个属性，页面没更新。 原理：Vue3 的 ref 和 reactive 对深层对象的监听有时会因为解构而丢失响应式。 解决：尽量使用 ref 包裹复杂对象，或者在解构时使用 toRefs。

3. 组件通信混乱 现象：父子组件传值用到崩溃，兄弟组件传值到处找。 解决：回到我们的架构思考。小范围用 props 和 emit；大范围、跨层级的状态，果断引入 Pinia 进行全局状态管理，把数据“Embedding”化。

学习建议与下一步路径

恭喜你完成了第一个 Vue 项目！作为过来人，我给你几点建议：

  1. 不要停留在“能跑就行”：写代码时多问自己“如果项目扩大十倍，这段代码还能维护吗？”这就是架构设计思考的意义。
  2. 拥抱 AI 工具：就像我们在项目里接入 GLM 一样，平时写代码也可以多问问 AI。但记住，AI 是助手，你才是架构师。
  3. 下一步学什么：
    • 深入学习 Vue Router（路由管理）和 Pinia（状态管理）。
    • 学习 TypeScript，给 Vue 项目加上类型约束，这会让你的代码架构更健壮。
    • 了解前端工程化，学习如何配置 ESLint、Prettier 以及编写单元测试。

前端开发是一场马拉松，文科生转码的我能做到，你也一定可以。保持好奇心，多动手实践，我们在更高的技术山峰见！

标签:EmbeddingGLM智谱清言Hugging Face

评论 0

最热最新
暂无评论

为你推荐

暂无相关推荐
匿名用户Lv.1
0
影响力
0
文章
0
粉丝

相关推荐

暂无相关推荐

精选内容

暂无精选内容