Vue3 및 Storybook과 함께 Quasar 사용
This is a draft article and may be polished later
새로운 퀘이사 프로젝트를 만듭니다. 아직 설치하지 않은 경우 quasar cli를 설치합니다. 이 예에서는 Vite 옵션을 사용합니다.
이 예제를 따라하려면 Webpack 대신 Vue 3 및 Vite를 선택하십시오.
$ yarn global add @quasar/cli
$ yarn create quasar
# or:
$ npm i -g @quasar/cli
$ npm init quasar
스토리북 초기화
npx sb init
를 실행하여 프로젝트에서 스토리북을 초기화합니다.패키지.json 업데이트
Storybook이 작동하려면
package.json
에 있는 autoprefixer 버전을 교체하십시오. Storybook에서 사용하는 PostCSS 버전은 이후 버전의 autoprefixer에서 작동하지 않습니다. 그 이유에 대한 자세한 내용can be found here.이것을 사용하십시오:
"autoprefixer": "^9.0.0",
스토리북 설정 업데이트
스토리북이 퀘이사 구성 요소를 올바르게 로드하고 표시하려면
.storybook/preview.js
파일을 다음과 같이 업데이트해야 합니다.import '@quasar/extras/roboto-font/roboto-font.css';
// These are optional
import '@quasar/extras/material-icons/material-icons.css';
import '@quasar/extras/animate/fadeInUp.css';
import '@quasar/extras/animate/fadeOutDown.css';
import '@quasar/extras/animate/fadeInRight.css';
import '@quasar/extras/animate/fadeOutRight.css';
// Loads the quasar styles and registers quasar functionality with storybook
import 'quasar/dist/quasar.css';
import { app } from '@storybook/vue3';
import { Quasar } from 'quasar';
// This is also where you would setup things such as pinia for storybook
app.use(Quasar, {});
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
스토리북 실행
yarn storybook
를 사용하여 스토리북을 실행합니다. 기본적으로 localhost:6006/
에서 브라우저가 열립니다.퀘이사 구성 요소 테스트
src/stories/Button.vue
의 코드를 다음으로 바꿉니다.<template>
<q-btn color="primary">Something</q-btn>
</template>
이제 스토리북에 퀘이사 버튼이 보일 것입니다.
결론
그게 다야! 이제 Vue3 + Vite + Quasar로 스토리북을 사용할 수 있습니다.
Reference
이 문제에 관하여(Vue3 및 Storybook과 함께 Quasar 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/allanjeremy/using-quasar-with-vue3-storybook-4dl8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)