Skip to content

Latest commit

 

History

History
60 lines (47 loc) · 2.05 KB

how-to-use-vue.md

File metadata and controls

60 lines (47 loc) · 2.05 KB

如何使用 Vue?
How to use Vue?

准备依赖
Prepare dependencies

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

  • 使用 MediaWiki 内置的vuepinia@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

  • vuepinia已经内置在仓库中,无需额外安装
    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