vue-component-library

Passos para chegar aqui

Parcialmente inspirado no artigo Creating a Vue.js component library

1. 2021.04.10
2. vue create vue-component-library
   1. Manually select features
   2. Vue 2.x
   3. Unit Testing -> Jest (config in package.json)
3. vue add vuetify
   1. Choose a preset: Configure (advanced)
   2. Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
   3. Use custom theme? No
   4. Use custom properties (CSS variables)? No
   5. Select icon font Material Design Icons
   6. Use fonts as a dependency (for Electron or offline)? Yes
   7. Use a-la-carte components? No
   8. Use babel/polyfill? No
   9. Select locale: English
4. Corrigidos tests jest para funcionar com Vuetify
   1. repondo prop e msg dinâmica no HelloWorld.vue
   2. voltando a passar a msg no componente em app.vue
   3. fazendo setup inicial do vuetify para o jest em setup.js
5. npx sb init
6. separados componentes em directorias específicas
   1. para o storybook tem de se usar o path relativo a ./src para os componentes nas stories para funcionarem
   2. ficheiros de test nas próprias directorias
   3. movidos os exemplos do storybook para esta estrutura
   4. movido o exemplo do vue/vuetify/jest para esta estrutura
7. storybook a usar componentes vuetify (parcialmente inspirado no artigo Configuring Storybook 6 for Vue 2 + Vuetify 2.3)
8. confirgurar build de livraria e mudar app exemplo para usar livraria
9. Resolve problem de flicker com perda momentânea do css quando, deployed, se clica várias vezes no menu da app. Pressupõe customizations.css com .custom-resource .v-application { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s ease; }

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

or, to run continuously,

jest --watch

Run storybook

npm run storybook