为 Quasar v2 配置故事书
Configuring Storybook for Quasar v2
我目前很难为 Quasar v2(使用 Vue 3)配置 Storybook。
这里是我在 package.json
中的依赖项:
"dependencies": {
"@quasar/extras": "^1.0.0",
"core-js": "^3.6.5",
"quasar": "^2.0.0-beta.1",
"vue-i18n": "^9.0.0-beta.0"
},
"devDependencies": {
"@babel/core": "^7.13.14",
"@quasar/app": "^3.0.0-beta.1",
"@storybook/addon-actions": "^6.2.1",
"@storybook/addon-essentials": "^6.2.1",
"@storybook/addon-links": "^6.2.1",
"@storybook/vue3": "^6.2.1", # ✅ storybook for vue3
"@types/node": "^10.17.15",
"@typescript-eslint/eslint-plugin": "^4.16.1",
"@typescript-eslint/parser": "^4.16.1",
"babel-loader": "^8.2.2",
"prettier": "^2.2.1",
"vue-loader": "^16.2.0" # ✅ the specific vue loader needed
"babel-eslint": "^10.0.1",
"eslint": "^7.14.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^7.0.0"
}
.storybook/main.js
:
module.exports = {
// the path may be precised for performance
stories: [
'../packages/**/components/*.stories.@(js|ts)'
],
addons: ['@storybook/addon-essentials'],
}
.storybook/preview.js
:
import { createApp } from 'vue';
import Vuex from 'vuex';
import Quasar from 'quasar'; // Quasar is undefined in a console.log
// helper for quasar start
const qAppEl = document.createElement('div');
qAppEl.setAttribute('id', 'q-app');
document.getElementsByTagName('body')[0].appendChild(qAppEl);
const app = createApp({})
app.use(Vuex);
app.use(Quasar, { config: {}, directives: {} });
app.mount('#q-app')
和测试故事EssentialLink.stories.js
:
import EssentialLink from './EssentialLink.vue'
export default {
title: 'StoryTest'
}
export const essentialLink = () => ({
components: { EssentialLink },
template: `<essential-link
:title="A title"
/>`
})
我得到两个错误:
- SyntaxError: missing } after 属性 list in the
EssentialLink.stories.js
at the line of the prop title
- [Vue 警告]: 插件必须是一个函数或一个具有“安装”功能的对象。 (文件中未定义 Quasar 导入
.storybook/preview.js
)
您可能已经解决了。
Storybook 使用自己的 Vue 实例。所以需要导入 @storybook/vue3
。
./storybook/preview.js
import '@quasar/extras/roboto-font/roboto-font.css'
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'
import 'quasar/dist/quasar.css'
import { app } from '@storybook/vue3'
import { Quasar } from 'quasar'
app.use(Quasar, {})
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
更多示例代码,参考this repo
我目前很难为 Quasar v2(使用 Vue 3)配置 Storybook。
这里是我在 package.json
中的依赖项:
"dependencies": {
"@quasar/extras": "^1.0.0",
"core-js": "^3.6.5",
"quasar": "^2.0.0-beta.1",
"vue-i18n": "^9.0.0-beta.0"
},
"devDependencies": {
"@babel/core": "^7.13.14",
"@quasar/app": "^3.0.0-beta.1",
"@storybook/addon-actions": "^6.2.1",
"@storybook/addon-essentials": "^6.2.1",
"@storybook/addon-links": "^6.2.1",
"@storybook/vue3": "^6.2.1", # ✅ storybook for vue3
"@types/node": "^10.17.15",
"@typescript-eslint/eslint-plugin": "^4.16.1",
"@typescript-eslint/parser": "^4.16.1",
"babel-loader": "^8.2.2",
"prettier": "^2.2.1",
"vue-loader": "^16.2.0" # ✅ the specific vue loader needed
"babel-eslint": "^10.0.1",
"eslint": "^7.14.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^7.0.0"
}
.storybook/main.js
:
module.exports = {
// the path may be precised for performance
stories: [
'../packages/**/components/*.stories.@(js|ts)'
],
addons: ['@storybook/addon-essentials'],
}
.storybook/preview.js
:
import { createApp } from 'vue';
import Vuex from 'vuex';
import Quasar from 'quasar'; // Quasar is undefined in a console.log
// helper for quasar start
const qAppEl = document.createElement('div');
qAppEl.setAttribute('id', 'q-app');
document.getElementsByTagName('body')[0].appendChild(qAppEl);
const app = createApp({})
app.use(Vuex);
app.use(Quasar, { config: {}, directives: {} });
app.mount('#q-app')
和测试故事EssentialLink.stories.js
:
import EssentialLink from './EssentialLink.vue'
export default {
title: 'StoryTest'
}
export const essentialLink = () => ({
components: { EssentialLink },
template: `<essential-link
:title="A title"
/>`
})
我得到两个错误:
- SyntaxError: missing } after 属性 list in the
EssentialLink.stories.js
at the line of the prop title - [Vue 警告]: 插件必须是一个函数或一个具有“安装”功能的对象。 (文件中未定义 Quasar 导入
.storybook/preview.js
)
您可能已经解决了。
Storybook 使用自己的 Vue 实例。所以需要导入 @storybook/vue3
。
./storybook/preview.js
import '@quasar/extras/roboto-font/roboto-font.css'
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'
import 'quasar/dist/quasar.css'
import { app } from '@storybook/vue3'
import { Quasar } from 'quasar'
app.use(Quasar, {})
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
更多示例代码,参考this repo