現在 vue-cliにてプロジェクトを作成して、storybookを動かそうとしています。
ディレクトリ構造はcliで作成した時とほぼ変わりありません。
├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ ├── prod.env.js │ └── test.env.js ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── HelloWorld.vue │ │ └── MyButton.vue │ ├── main.js │ ├── router │ │ └── index.js │ └── stories │ └── index.js ├── static └── test ├── e2e │ ├── custom-assertions │ │ └── elementCount.js │ ├── nightwatch.conf.js │ ├── runner.js │ └── specs │ └── test.js └── unit ├── jest.conf.js ├── setup.js └── specs └── HelloWorld.spec.js
ここにstorybookを追加し、設定を記述しました。
.storybook/config.js
import { configure } from '@storybook/vue' import Vue from 'vue' function loadStories () { require('./../src/stories') } configure(loadStories, module)
storybookも記述
src/stories/index.js
import { storiesOf } from '@storybook/vue' import MyButton from './../components/HelloWorld.vue' storiesOf('HelloWorld', module) .add('simple', () => ({ components: { HelloWorld }, template: `<HelloWorld></HelloWorld>` }))
もちろんHelloWorld.vueも存在します。
npm run devを実行すると以下エラーとなります。
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! project@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the project@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2018-12-06T17_23_48_779Z-deb
調べると、vue loaderがないのでは?という記事を見つけたので、
webpackに追加しました。
build/webpack.dev.conf.js(修正箇所のみ追加。あと省略)
const VueLoaderPlugin = require('vue-loader/lib/plugin') rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true, loader: 'vue-loader' }) new VueLoaderPlugin()
これで結果は変わらず。
次にキャッシュを消したり、npm installやらを再度実施しました。
それでも同じでした。
原因わかる方いれば教えてください。
あなたの回答
tips
プレビュー