@desco/vue-example-code Componente VueJS para exemplo de códigos. 🚀 Pronto para uso 🚀

Veja outros projetos NPM aqui.

Veja outros projetos aqui.

---

📋 Tabela de conteúdos

• 🛠️ Tecnologias
• ⚙️ Instalação
• 📦 Importação
• 📚 Como Usar

---

🛠️ Tecnologias

As seguintes tecnologias são utilizadas:

• VueJs
• PUG/JADE
• SCSS/SASS

---

⚙️ Instalação

1npm install --save @desco/vue-example-code

Note que será necessário ter o NPM instalado para o comando funcionar.

---

📦 Importação

1import exampleCode from '@desco/vue-example-code'

---

📚 Como Usar

1<template>
2  <exampleCode :code="code">
3</template>

1export default {
2  components: exampleCode,
3  data () {
4    return {
5      code: {
6        title: 'Título;
7        description: 'Minha Descrição';
8        example: [
9          {
10            lang: 'html',
11            name: 'Exemplo de HTML',
12            icon: 'fab.fa-html5',
13            content: `
14<template lang="pug">
15div(@click="onClick") Meu exemplo em HTML aqui
16</template>
17            `,
18          },
19          {
20            lang: 'javascript',
21            name: 'Exemplo de JS',
22            icon: 'fab.fa-js',
23            content: `
24export default {
25    methods: {
26        onClick () {
27            alert('Exemplo de JS!')
28        }
29    }
30}
31            `,
32          },
33        ]
34      }
35    }
36  }
37}

Parâmetros

Nome	Tipo	Obrigatório	Padrão	Descrição
title	String	Não	-	O título do exemplo
description	String	Não	-	A descrição do exemplo
example	JSON/Array	Sim	-	JSON ou Array de JSONs contendo informações dos códigos que aparecerão em cada aba.
example.lang	String	Não	-	Linguagem do código. Essa informação será usada na sintaxe do código assim como no ícone e título da aba (Caso não informado)
example.name	String	Não	A linguagem do código	Nome a ser exibido na aba do código
example.icon	String	Sim	Ícone da linguagem	Ícone a ser exbido na aba do código
example.content	String	Não	-	Código do exemplo

---

Autor

Rafael A. R. Dias