petite-vue 技术文档

petite-vue 技术文档

petite-vue 6kb subset of Vue optimized for progressive enhancement 项目地址: https://gitcode.com/gh_mirrors/pe/petite-vue

概览

petite-vue 是 Vue 的一个轻量级变种，专为渐进式增强设计。它保持了与标准 Vue 相同的模板语法和响应式编程模式，但特别适合在服务器渲染的现有 HTML 页面上增加少量交互。以下内容将详细介绍其安装、使用方法、基本API以及部署方式。

---

安装指南

CDN加载（无需构建步骤）

最简单的方式是通过CDN直接引入 petite-vue 到您的项目中：

<script src="https://unpkg.com/petite-vue" defer init></script>

该脚本带有 defer 和 init 属性，保证了在页面解析后执行，并自动初始化所有标记有 v-scope 的元素。

生产环境的CDN路径

为了生产环境的最佳性能，请使用完全解析的URL：

• 全局构建: https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js
• ESM构建: https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.es.js （需要在<script type="module">标签内使用）

---

使用说明

自动初始化

您可以直接在HTML中使用 petite-vue，如下面的例子所示：

<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">增加</button>
</div>

此处，v-scope指令告知 petite-vue 控制此区域的数据绑定。

手动初始化

若需手动控制初始化，移除init属性，并在页面底部放置脚本：

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp().mount();
</script>

或者对于ES模块：

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module';
  
  createApp().mount();
</script>

---

API使用文档

根作用域创建

通过 createApp 函数可以定义根作用域，供全站表达式使用：

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module';

  createApp({
    count: 0,
    plusOne() {
      return this.count + 1;
    },
    increment() {
      this.count++;
    }
  }).mount();
</script>

<div v-scope>
  <p>{{ count }}</p>
  <p>{{ plusOne() }}</p>
  <button @click="increment()">增加</button>
</div>

生命周期事件

可以通过特殊的事件监听器监听挂载和卸载：

<div v-if="显示" @vue:mounted="console.log('已挂载')" @vue:unmounted="console.log('已卸载')"></div>

效果指令（v-effect）

用于执行响应式的内联语句：

<div v-scope="{ count: 0 }">
  <div v-effect="$el.textContent = count"></div>
  <button @click="count++">增1</button>
</div>

组件

petite-vue中的组件更简化，可通过函数定义：

<script type="module">
  function Counter({ initialCount }) {
    return {
      count: initialCount,
      inc() { this.count++; },
      mounted() { console.log('计数器挂载'); },
    };
  }

  createApp({ Counter }).mount();
</script>

<div v-scope="Counter({ initialCount: 1 })">
  <p>{{ count }}</p>
  <button @click="inc">增1</button>
</div>

自定义指令

支持自定义指令，接口不同于标准Vue：

const myDir = (ctx) => {
  ctx.effect(() => {
    console.log(ctx.get());
  });
};

createApp().directive('my-dir', myDir).mount();

---

项目部署

petite-vue可以直接通过上述引入方式部署到网页中，无须额外构建步骤。对于生产环境，推荐使用带版本号的稳定CDN链接以避免潜在的更新问题。

---

通过以上指南，您应该能够顺利地集成并开始使用 petite-vue 来增强您的Web应用，实现渐进式的功能扩展。更多高级特性和详细示例可参考官方仓库的example目录。

petite-vue 6kb subset of Vue optimized for progressive enhancement 项目地址: https://gitcode.com/gh_mirrors/pe/petite-vue