当前位置：首页 > news >正文

跟着AI学vue第九章

news 来源：原创 2025/6/8 1:18:59

第九章：Vue 生态与跨端开发

1. 深入探索 Vue 生态工具

Vue 生态就像是一个热闹的“软件小镇”，里面有各种各样的工具和资源，能帮助你把 Vue 项目打造得更好。

Vue CLI 高级用法

Vue CLI 就像是小镇里的“建筑规划师”，一开始它能帮你快速搭建项目框架。但它还有很多高级功能，比如插件管理。

想象你要给房子添加一个新的“功能房间”，在项目里就是添加新的功能模块。比如你想给项目加上 ESLint 代码检查功能，让代码更规范。在项目根目录下，你可以用命令告诉 Vue CLI 来添加这个“房间”：

vue add eslint

运行这个命令后，Vue CLI 就会自动下载 ESLint 相关的依赖，并且配置好项目里的 ESLint 规则，就像规划师按照你的要求把新房间设计并建造好。

Vue Test Utils 进行组件测试

开发代码就像制造产品，你得确保每个“零件”（组件）都能正常工作。Vue Test Utils 就是“质量检测员”，专门检查组件的功能。

比如有一个简单的按钮组件 MyButton.vue：

<template>
  <button @click="handleClick">{{ label }}</button>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
  label: {
    type: String,
    default: 'Click me'
  }
});
const handleClick = () => {
  console.log('Button clicked');
};
</script>

现在用 Vue Test Utils 来测试这个按钮点击功能是否正常：

import { mount } from '@vue/test-utils';
import MyButton from './MyButton.vue';

describe('MyButton', () => {
  it('should call handleClick when clicked', () => {
    // 挂载组件
    const wrapper = mount(MyButton);
    // 监视 handleClick 方法
    const spy = jest.spyOn(wrapper.vm, 'handleClick');
    // 触发按钮点击事件
    wrapper.find('button').trigger('click');
    // 检查 handleClick 方法是否被调用
    expect(spy).toHaveBeenCalled();
  });
});

在这个测试里，我们用 mount 把组件“安装”好，用 jest.spyOn 盯着 handleClick 方法，然后模拟点击按钮，最后检查这个方法是不是真的被调用了。

2. 跨端开发实践

跨端开发就像是让一个演员能在不同的舞台（平台）上表演，让你的应用可以在网页、手机 APP 等多个平台运行。

Vue + Taro 开发多端应用

Taro 就像是一个“语言翻译官”，能把你用 Vue 写的代码翻译成不同平台能懂的“语言”。

首先，你得安装 Taro 的“翻译工具”：

npm install -g @tarojs/cli

然后创建一个新的项目：

taro init my-taro-vue-project --template vue3

在项目里创建一个简单的页面组件 index.vue：

<template>
  <view>
    <text>{{ message }}</text>
    <button @click="changeMessage">Change Message</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const message = ref('Hello, Taro!');
const changeMessage = () => {
  message.value = 'Message changed!';
};
</script>

最后，用 Taro 把代码“翻译”成不同平台的代码：

# 编译成 H5 代码
taro build --type h5 --watch
# 编译成微信小程序代码
taro build --type weapp --watch

这样，同样的代码就能在 H5 网页和微信小程序上运行了。

Vue + NativeScript 开发原生 APP

NativeScript 就像是一个神奇的“变身器”，能把 Vue 代码变成原生的手机 APP，让 APP 有和原生应用一样的性能和体验。

先安装 NativeScript 的“变身工具”：

npm install -g nativescript

创建一个新的 NativeScript + Vue 项目：

ns create my-vue-native-app --template @nativescript/template-vue

在 app/components/HelloWorld.vue 组件里写点代码：

<template>
  <Page>
    <StackLayout>
      <Label :text="message" />
      <Button text="Click me" @tap="changeMessage" />
    </StackLayout>
  </Page>
</template>

<script setup>
import { ref } from 'vue';
const message = ref('Hello from NativeScript + Vue!');
const changeMessage = () => {
  message.value = 'Button clicked!';
};
</script>

运行命令在模拟器或真机上运行 APP：

ns run ios # 运行 iOS 模拟器
ns run android # 运行 Android 模拟器

第九阶段：Vue 前沿技术与研究

1. Vue 3 新特性深入研究

Vue 3 就像是一辆新升级的跑车，有很多新的强大功能。

Composition API 高级应用

Composition API 能让你把相关的代码逻辑“打包”在一起，就像把工具分类放在不同的盒子里，方便管理和复用。

比如你有一个计数器和一个定时器的功能，用 Composition API 可以这样写：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Time: {{ time }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 计数器逻辑
const count = ref(0);
const increment = () => {
  count.value++;
};

// 定时器逻辑
const time = ref(new Date().toLocaleTimeString());
let intervalId;
onMounted(() => {
  intervalId = setInterval(() => {
    time.value = new Date().toLocaleTimeString();
  }, 1000);
});
onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

这里把计数器和定时器的逻辑分开写，以后如果要复用其中一个功能，直接拿对应的代码块就行。

Suspense 和 Teleport 的应用

Suspense 就像是餐厅的“餐前小零食”，在异步组件加载时，先给用户显示一个提示，等组件加载好再显示真正的内容。

比如有一个异步组件 AsyncComponent.vue：

<template>
  <div>Async Component</div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
const isLoading = ref(true);
onMounted(() => {
  setTimeout(() => {
    isLoading.value = false;
  }, 2000);
});
</script>

在父组件里用 Suspense 包裹这个异步组件：

<template>
  <div>
    <Suspense>
      <template #fallback>
        <p>Loading...</p>
      </template>
      <AsyncComponent />
    </Suspense>
  </div>
</template>

<script setup>
import AsyncComponent from './AsyncComponent.vue';
</script>

Teleport 就像是一个“传送门”，能把组件里的内容传送到 DOM 树的其他位置。

比如有一个模态框组件 Modal.vue：

<template>
  <teleport to="body">
    <div class="modal" v-if="isOpen">
      <div class="modal-content">
        <h2>Modal Title</h2>
        <p>Modal content...</p>
        <button @click="isOpen = false">Close</button>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import { ref } from 'vue';
const isOpen = ref(false);
const openModal = () => {
  isOpen.value = true;
};
</script>

在父组件里调用这个模态框：

<template>
  <div>
    <button @click="openModal">Open Modal</button>
    <Modal />
  </div>
</template>

<script setup>
import Modal from './Modal.vue';
</script>