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.
Certifique-se de instalar as dependências::
yarn install
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"
}
}
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.
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'
})
Inicie o servidor de desenvolvimento em http://localhost:3000
yarn dev
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
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'],
},
}
},
})
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