Winx Base

Camada base dos projetos winx. Aqui são criados os componentes, configurações, composables, layouts... básicos dos nossos projetos. Para mais informações sobre a construção de layers acesse.

Setup

Certifique-se de instalar as dependências::

yarn install

Dependencies

Lista de dependências instaladas no winx-base que não precisam ser instalados novamente nos projetos extendidos.

{
  "dependencies": {
    "@nuxtjs/google-fonts": "^3.0.0",
    "@vueuse/core": "^9.13.0",
    "@vueuse/nuxt": "^9.13.0",
    "bootstrap": "^5.2.3",
    "sass": "^1.57.1",
    "maska": "^2.1.7",
    "nuxt-bugsnag": "^5.9.1",
    "vee-validate": "^4.8.4",
    "winx-auth": "^0.1.0",
    "yup": "^1.0.2"
  }
}

Trabalhando com o Winx Base

O winx-base está na raiz deste repositório, é exatamente como um projeto regular do Nuxt, exceto que você pode publicá-lo no NPM.

O diretório .playground deve ajudá-lo a experimentar o winx-base durante o desenvolvimento.

A execução do yarn dev irá preparar e inicializar o diretório .playground, que importa o winx-base.

Publicação

O winx-base tem exatamente o mesmo formato de qualquer outro projeto Nuxt, exceto que você pode publicá-la no NPM.

Para isso, basta verificar se os files em package.json são válidos, então execute:

npm publish --access public

Once done, your users will only have to run:

yarn add --save winx-base

Em seguida, adicione a dependência ao seu extends em nuxt.config:

defineNuxtConfig({
  extends: 'winx-base'
})

Development Server

Inicie o servidor de desenvolvimento em http://localhost:3000

yarn dev

Production

Crie o aplicativo para produção:

yarn build

Ou gere-o estaticamente com:

yarn generate

Visualize localmente a compilação de produção:

yarn preview

Trabalhando Localmente

Se você deseja fazer o teste de modificações em algum projeto fora do .playground, poderá utilizar o yarn link.

No winx-base:

yarn link

No outro-projeto:

yarn link winx-base

Obs: Se você estiver somente linkando o projeto terá que instalar todas as dependências que o winx-base precisa.

Obs: Alguns pacotes vinculados ao winx-base podem gerar erros no vite, se isso acontecer adicione essas linhas de código ao winx.config do projeto.

export default defineNuxtConfig({
  extends: [winx-base],
  vite: {
    server: {
      fs: {
        allow: ['Caminho do pacote ex: ../winx-base'],
      },
    }
  },
})

Storybook

Temos no winx-base um grande número de componentes base que são utilizados em vários projetos e esse número só cresce. Então utilizamos o Storybook para gerenciar, documentar, testar e facilitar a criação desses componentes.

Inicie o storybook http://localhost:6006

yarn storybook

Build storybook

yarn build:storybook

Test storybook

yarn test:sb