TLDR: nuxt + storybook + vuetify 构建的问题
我使用 Nuxt.js、Vuetify 和 Storybook 创建了一个新项目。
Storybook 开发服务器运行良好,我只需要在 nuxt 配置中添加一个装饰器:
$(window).on('beforeunload', function(){
return "";
});
似乎唯一的问题是,在运行构建时,它没有加载装饰器,因此 Storybook 不能正确表示视觉方面。
// nuxt.config.js
storybook: {
decorators: [
// VApp decorator for Vuetify
'<v-app><div><story/></div></v-app>',
],
},
注意: 我确实使用了官方的 nuxt storybook
开发示例:
构建示例:
答案 0 :(得分:0)
好的,所以我花了一些试验和错误,但我已经成功了。
我们要做的第一件事是在插件目录中创建一个 vuetify.js
文件
.
├── plugins
│ └── vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify';
import colors from 'vuetify/es5/util/colors';
import { themes } from '~/config/themes';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
export default (ctx) => {
const vuetify = new Vuetify({
customVariables: ['~/assets/variables.scss'],
treeShake: true,
options: {
customProperties: true,
},
theme: {
themes: {
light: {
...themes.light,
},
},
},
});
ctx.app.vuetify = vuetify;
ctx.$vuetify = vuetify.framework;
};
在您的 nuxt.config.js
中,确保删除 Vuetify 配置并将 vuetify 添加为插件,如下所示:
// nuxt.config.js
plugins: ['@/plugins/vuetify.js'],
添加 Vuetify 装饰器以在所有 Storybook 故事中支持 Vuetify。
在您的 nuxt.config.js
中添加以下装饰器
// nuxt.config.js
storybook: {
// Options
decorators: [
// VApp decorator for Vuetify
`<v-app id='vuetify-storybook-decorator'><div><story/></div></v-app>`,
],
},
为了防止eatch story占据过大的屏幕高度并允许在一个视图中呈现多个故事,我们将仅在storybook中覆盖默认的vuetify min-height;
在您的 nuxt.config.js
文件中加载一个 storybook.scss
像这样
// nuxt.config.js
// Global CSS (https://go.nuxtjs.dev/config-css)
css: ['@/assets/storybook.scss'],
并在您的资产文件夹中添加 storybook.scss
文件:
.
├── assets
│ └── storybook.scss
/* storybook.scss */
#vuetify-storybook-decorator {
// Remove the storybook full height of all components
.v-application--wrap {
min-height: unset;
}
}
将构建命令添加到您的 package.json
// package.json
{
"storybook": "nuxt storybook",
"storybook:build": "nuxt storybook build"
}
然后在命令行中运行yarn storybook:build
构建将放置在/storybook-static
中;
您可以通过在该文件夹上运行任何服务器来查看构建,例如:
$ npx http-server ./storybook-static
就是这样,我希望它会有所帮助:)