## Guia de uso do Vue Styleguidist

Este é um guia passo a passo para usar o Vue Styleguidist, um softwere de docuemtação propria para vue.js.

1. Verifique se o Node.js está instalado:
Certifique-se de ter o Node.js instalado em seu sistema. Você pode verificar digitando `node -v` no terminal.

2. Instalação do Vue Styleguidist:
Abra o terminal e vá para a pasta raiz do seu projeto. Em seguida, execute o seguinte comando para instalar o Vue Styleguidist localmente como uma dependência de desenvolvimento:

   npm install vue-styleguidist --save-dev

3. No diretório raiz do projeto, crie um arquivo chamado styleguide.config.js e adicione o seguinte teamplate basico:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const vueLoader = require('vue-loader')
const path = require('path')

const { defineConfig } = require('vue-styleguidist')

const transpileDependencies = [
  'regexpu-core',
  'strip-ansi',
  'ansi-regex',
  'ansi-styles',
  'react-dev-utils',
  'chalk',
  'unicode-match-property-ecmascript',
  'unicode-match-property-value-ecmascript',
  'acorn-jsx',
  '@znck[\\\\/]prop-types',
]

const docSiteUrl = process.env.DEPLOY_PRIME_URL || 'https://vue-styleguidist.github.io'

/** @type import("vue-styleguidist").Config */
module.exports = defineConfig({
  title: 'Vue Styleguidist basic',
  components: 'components/sections/layout/**/[A-Z]*.vue',
  defaultExample: true,
  sections: [
    {
      name: '',
      content: '',
    },
  ],

  getComponentPathLine(componentPath) {
    const componentFileName = path.basename(componentPath, '.vue')
    const name =
      componentFileName.toLowerCase() === 'index'
        ? path.basename(path.dirname(componentPath))
        : componentFileName
    return `import ${name} from '${componentPath.replace(/^src\//, 'my-library/dist/')}'`
  },
  version: '1.1.1',
  compilerPackage: 'vue-inbrowser-compiler-sucrase',
  webpackConfig: {
    resolve: {
      alias: {
        '~': path.join(__dirname, './test'),
      },
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
        },
        {
          test: /\.js$/,
          exclude: (modulePath) =>
            (/node_modules/.test(modulePath) ||
              /packages[\\/]vue-styleguidist[\\/]lib/.test(modulePath)) &&
            !transpileDependencies.some((mod) =>
              new RegExp(`node_modules[\\\\/]${mod}[\\\\/]`).test(modulePath)
            ),
          use: {
            loader: 'babel-loader',
            options: {
              sourceType: 'unambiguous',
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: 3,
                    targets: {
                      ie: '11',
                    },
                  },
                ],
              ],
              comments: false,
            },
          },
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },

    plugins: [new vueLoader.VueLoaderPlugin()].concat(
      process.argv.includes('--analyze') ? [new BundleAnalyzerPlugin()] : []
    ),
  },
  usageMode: 'expand',
  exampleMode: 'expand',
  styleguideDir: 'dist',
  displayOrigins: true,
  codeSplit: false,
})

4. Para adicionar um componente para ser documentado na sua pagina, pasta pegar o trecho do codigo:

        module.exports = defineConfig({
      title: 'Vue Styleguidist basic',
      components: 'components/sections/layout/**/[A-Z]*.vue',
      defaultExample: true,
       sections: [
    {
      name: 'Documentation',
      content: 'docs/intro.md',
      sections: [
        {
          name: 'Files',
          content: 'docs/intro.md',
          sections: [
            {
              name: 'First File',
              content: 'docs/intro.md',
              description: 'This is the first section description',
            },
          ],
        },
      ],
    }, 

   ],
            
            
 Ele criara uma documentação parecida com uma estrutua de pastas, onde cada 'section', representa um diretorio, cada 'name' representa o nome de cada diretorio, content seria o contedudo que você deseja documentar em estrutura markdown, que devem ficar em um pasta dentro da raiz do seu projeto chamada 'docs', cada uma com o nome do componente e o '.md' no final.

5. exemplo do .intro.md dentro da pasta docs:
   ![](https://hackmd.io/_uploads/r1-zrqcr3.png)         
            
6. pagina do exemplo acima:
 ![](https://hackmd.io/_uploads/rke6E99S3.png)
   
7. Mas afinal como eu faço para gerar esse localhost? você deve usar o comando:
     

npm run styleguide

   Após o uso do comando, você usará a porta de localhost que ele disponibilizará, que normalmente será: http://localhost:6060/.

8. Você pode estilizar e adicionar codigos, como:


BackToTheTopBtn.md:
![](https://hackmd.io/_uploads/Bk6uv29Bn.png)


localhost:
![](https://hackmd.io/_uploads/HyCuv39Sn.png)