how-to-use-vue.md

如何使用 Vue？
How to use Vue?

准备依赖
Prepare dependencies

在本仓库中使用 Vue，有以下两种方式：
To use Vue in this repository, there are two ways:

• 使用 MediaWiki 内置的vue、pinia和@wikimedia/codex等 Vue 相关的包
  Use Vue-related packages such as vue, pinia and @wikimedia/codex built into MediaWiki
  • 确保目标 MediaWiki 的版本至少为 1.41
    Ensure that the target MediaWiki version is at least 1.41
  • 在小工具对应的definition.json中，将 MediaWiki 已经内置的包按需添加为依赖项（dependencies）
    In the corresponding definition.json of the gadget, add the built-in packages of MediaWiki as dependencies as needed

{
	"dependencies": ["vue", "@wikimedia/codex"],
	// Other properties...
}

• 使用 npm 包
  Use packages from npm
  • 目标 MediaWiki 版本过低，尚未包含 Vue 相关的包，但依然需要使用 Vue
    The target MediaWiki version is too low and does not yet built-in the Vue-related packages, but still needs to use Vue
  • 安装所需的包，直接使用即可
    Install the required packages directly

示例
Example

<!-- App.vue -->
<template lang="pug">
div
	p Hello {{msg}}!
</template>

<script setup lang="ts">
defineProps<{
	msg: string;
}>();
</script>

<style scoped lang="less">
div {
	background-color: #fff;
	p {
		color: #000;
	}
}
</style>

import App from './App.vue';
import {createApp} from 'vue';

const root: HTMLElement = document.createElement('div');
document.body.append(root);
createMwApp(App).mount(root);

特别说明
Notes

• Vue 组件中需要临时将 TypeScript 的版本从“使用工作区版本”切换至“使用 VS Code 的版本”
  In the Vue component, you need to temporarily switch the TypeScript version from "Use Workspace Version" to "Use VSCode's Version"
  • https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions
• vue和pinia已经内置在仓库中，无需额外安装
  vue and pinia are already built into the repository, no need to install
• @wikimedia/codex等其他 Vue 相关的组件包需要额外按需安装
  Other Vue-related components need to be installed separately
• Vue 组件中可以使用 Less 样式语法和 Pug 模板语法
  Vue components can use Less style syntax and Pug template syntax