Vue轻松快速地构建自己的代码教程 - vue-tut

Vue轻松快速地构建自己的代码教程 - vue-tut
插件名称 vue-tut
发布时间 2020年9月2日
插件作者 evwt

一个vue.js组件,可以轻松快速地构建自己的代码教程。

安装和下载:

# NPM
$ npm i vue-tut --save

基本用法:

1.导入组件。

import VueTut from 'vue-tut';
import 'vue-tut/dist/vue-tut.min.css';

2.将您选择的主题导入项目。

import 'vue-tut/dist/themes/vue.css';
import 'vue-tut/dist/code-themes/vue.css';

3.注册组件。

Vue.use(VueTut);

4.创建教程,如下所示:

<template>
  <tutorial>
    <div slot="eyebrow">
      VueTut示例
    </div>
    <div slot="title">
      示例–所有插槽
    </div>
    <div slot="intro">
      与第一个最小的示例不同,这个示例已经填充了所有的插槽。
    </div>
    <tutorial-section>
      <div slot="name">
        第一节
      </div>
      <div slot="title">
        第一节
      </div>
      <div slot="intro">
        这一部分已经填好了所有的空位。
      </div>
      <tutorial-step slot="step">
        <p>
          将HelloWorld组件添加到 <tt>App.vue</tt>.
        </p>
        <aside slot="aside">
          <tutorial-highlighter :text="hello1" :highlight-lines="[4, 14]" title="App.vue" />
        </aside>
      </tutorial-step>
      <tutorial-step slot="step">
        <p>
          添加字体样式。
        </p>
        <aside slot="aside">
          <tutorial-highlighter :text="hello2" :highlight-lines="[/font/]" title="App.vue" />
        </aside>
      </tutorial-step>
    </tutorial-section>
    <tutorial-section>
      <div slot="name">
        第二节
      </div>
      <div slot="title">
        第二节
      </div>
      <div slot="intro">
        此部分<strong>也</strong>已填写所有插槽。
      </div>
      <tutorial-step slot="step">
        <p>
          如果他在痛苦中,他会被认为是有帮助的。
        </p>
        <aside slot="aside">
          <img src="./assets/logo.png" width="200" height="auto">
        </aside>
      </tutorial-step>
      <tutorial-step slot="step">
        <p>
         如果他在痛苦中,他会被认为是有帮助的。
        </p>
        <aside slot="aside">
          <img src="./assets/logo.png" width="200" height="auto" style="filter: hue-rotate(45deg);">
        </aside>
      </tutorial-step>
      <tutorial-step slot="step">
        <p>
          把你想要的东西放在一边:图像,电影,嵌入。
        </p>
        <aside slot="aside">
          <iframe
            src="https://player.vimeo.com/video/247494684?dnt=1"
            style="width: 100%; height: 100%; min-height: 320px;"
            frameborder="0"
            webkitallowfullscreen
            mozallowfullscreen allowfullscreen />
        </aside>
      </tutorial-step>
    </tutorial-section>
  </tutorial>
</template>