当前位置: 首页 > 工具软件 > vue-chess > 使用案例 >

组件用.vue还是.js_一个Vue.js组件,用于浏览PGN格式的国际象棋游戏

宁侯林
2023-12-01

组件用.vue还是.js

vue-pgn (vue-pgn)

A Vue.js component for browsing chess games in pgn format. Uses chess.js under the hood.

一个Vue.js组件,用于浏览pgn格式的国际象棋游戏。 在后台使用chess.js。

安装 (Installation)

npm install --save vue-pgn

进口 (Import)

import {vuepgn} from 'vue-pgn'
import 'vue-pgn/dist/vue-pgn.css'

export default {
  components: {vuepgn},
  data() {
    return {
      pgn: '1. g4 e5 2. f4 Qh4',
      height: 300,
    };
  },
};
</script>

<template>
  <div>    
    <vuepgn v-bind="{pgn,height}"/>
  </div>
</template>

浏览器 (Browser)

<div id="app">
  <vuepgn v-bind="{pgn,height}"></vuepgn>
</div>

<link rel="stylesheet" href="vue-pgn/dist/vue-pgn.css"/>

<script src="vue.js"></script>
<script src="vue-pgn/dist/vue-pgn.browser.js"></script>

<script>
new Vue({
  el: '#app',
  components: {
    VuePgn
  },
  data() {
    return {
      pgn: '1. g4 e5 2. f4 Qh4',
      height: 300,
    };
  }
});
</script>

翻译自: https://vuejsexamples.com/a-vue-js-component-for-browsing-chess-games-in-pgn-format/

组件用.vue还是.js

 类似资料: