将故事书添加到新的vuejs项目中后启动故事书时出现问题。
显然，当包含.vue文件时，它的解释不正确...
这是我设置vue.js项目并添加故事书的所有步骤（我在Windows 10上）：
1）命令行：vue init webpack app-test
? Project name app-test
? Project description A Vue.js project
? Author email@email.email
? Standalone build view
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No.
? Should we run `npm install` for you after the project has been created? (recommended) npm
view-cli · Generated "app-test".
Installing project dependencies ...
[...]
2）然后，我按照本教程将故事书添加到我的项目中（手动设置）：https://storybook.js.org/docs/guides/guide-vue/
但是当我尝试启动故事书时，我遇到了几个错误：
> start-storybook
info @storybook/vue v5.2.8
info
info => Loading presets
WARN Failed to load preset: "C:\\Users\\Firstname Lastname\\Desktop\\workspace\\website\\components\\front-end\\app\\node_modules\\@storybook\\vue\\dist\\server\\framework-preset-vue.js"
ERR! Error: Cannot find module 'vue-loader/lib/plugin'
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:580:25)
ERR! at Module.require (internal/modules/cjs/loader.js:711:19)
ERR! at require (internal/modules/cjs/helpers.js:14:16)
ERR! at Object.<anonymous> (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\vue\dist\server\framework-preset-vue.js:11:38)
ERR! at Module._compile (internal/modules/cjs/loader.js:805:30)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
ERR! at Module.load (internal/modules/cjs/loader.js:672:32)
ERR! at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:604:3)
ERR! at Module.require (internal/modules/cjs/loader.js:711:19)
ERR! at require (internal/modules/cjs/helpers.js:14:16)
ERR! at interopRequireDefault (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:20:18)
ERR! at loadPreset (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:30:17)
ERR! at Array.map (<anonymous>)
ERR! at loadPresets (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:59:26)
ERR! { Error: Cannot find module 'vue-loader/lib/plugin'
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:580:25)
ERR! at Module.require (internal/modules/cjs/loader.js:711:19)
ERR! at require (internal/modules/cjs/helpers.js:14:16)
ERR! at Object.<anonymous> (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\vue\dist\server\framework-preset-vue.js:11:38)
ERR! at Module._compile (internal/modules/cjs/loader.js:805:30)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
ERR! at Module.load (internal/modules/cjs/loader.js:672:32)
ERR! at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:604:3)
ERR! at Module.require (internal/modules/cjs/loader.js:711:19)
ERR! at require (internal/modules/cjs/helpers.js:14:16)
ERR! at interopRequireDefault (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:20:18)
ERR! at loadPreset (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:30:17)
ERR! at Array.map (<anonymous>)
ERR! at loadPresets (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:59:26)
ERR! stack:
ERR! "Error: Cannot find module 'vue-loader/lib/plugin'\n at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)\n at Function.Module._load (internal/modules/cjs/loader.js:580:25)\n at Module.require (internal/modules/cjs/loader.js:711:19)\n at require (internal/modules/cjs/helpers.js:14:16)\n at Object.<anonymous> (C:\\Users\\Firstname Lastname\\Desktop\\workspace\\website\\components\\front-end\\app\\node_modules\\@storybook\\vue\\dist\\server\\framework-preset-vue.js:11:38)\n at Module._compile (internal/modules/cjs/loader.js:805:30)\n at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)\n at Module.load (internal/modules/cjs/loader.js:672:32)\n at tryModuleLoad (internal/modules/cjs/loader.js:612:12)\n at Function.Module._load (internal/modules/cjs/loader.js:604:3)\n at Module.require (internal/modules/cjs/loader.js:711:19)\n at require (internal/modules/cjs/helpers.js:14:16)\n at interopRequireDefault (C:\\Users\\Firstname Lastname\\Desktop\\workspace\\website\\components\\front-end\\app\\node_modules\\@storybook\\core\\dist\\server\\presets.js:20:18)\n at loadPreset (C:\\Users\\Firstname Lastname\\Desktop\\workspace\\website\\components\\front-end\\app\\node_modules\\@storybook\\core\\dist\\server\\presets.js:30:17)\n at Array.map (<anonymous>)\n at loadPresets (C:\\Users\\Firstname Lastname\\Desktop\\workspace\\website\\components\\front-end\\app\\node_modules\\@storybook\\core\\dist\\server\\presets.js:59:26)",
ERR! code: 'MODULE_NOT_FOUND' }
info => Loading presets
WARN Failed to load preset: "C:\\Users\\Firstname Lastname\\Desktop\\workspace\\website\\components\\front-end\\app\\node_modules\\@storybook\\vue\\dist\\server\\framework-preset-vue.js"
ERR! Error: Cannot find module 'vue-loader/lib/plugin'
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:580:25)
ERR! at Module.require (internal/modules/cjs/loader.js:711:19)
ERR! at require (internal/modules/cjs/helpers.js:14:16)
ERR! at Object.<anonymous> (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\vue\dist\server\framework-preset-vue.js:11:38)
ERR! at Module._compile (internal/modules/cjs/loader.js:805:30)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
ERR! at Module.load (internal/modules/cjs/loader.js:672:32)
ERR! at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:604:3)
ERR! at Module.require (internal/modules/cjs/loader.js:711:19)
ERR! at require (internal/modules/cjs/helpers.js:14:16)
ERR! at interopRequireDefault (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:20:18)
ERR! at loadPreset (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:30:17)
ERR! at Array.map (<anonymous>)
ERR! at loadPresets (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:59:26)
ERR! { Error: Cannot find module 'vue-loader/lib/plugin'
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:580:25)
ERR! at Module.require (internal/modules/cjs/loader.js:711:19)
ERR! at require (internal/modules/cjs/helpers.js:14:16)
ERR! at Object.<anonymous> (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\vue\dist\server\framework-preset-vue.js:11:38)
ERR! at Module._compile (internal/modules/cjs/loader.js:805:30)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
ERR! at Module.load (internal/modules/cjs/loader.js:672:32)
ERR! at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:604:3)
ERR! at Module.require (internal/modules/cjs/loader.js:711:19)
ERR! at require (internal/modules/cjs/helpers.js:14:16)
ERR! at interopRequireDefault (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:20:18)
ERR! at loadPreset (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:30:17)
ERR! at Array.map (<anonymous>)
ERR! at loadPresets (C:\Users\Firstname Lastname\Desktop\workspace\website\components\front-end\app\node_modules\@storybook\core\dist\server\presets.js:59:26)
ERR! stack:
ERR! "Error: Cannot find module 'vue-loader/lib/plugin'\n at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)\n at Function.Module._load (internal/modules/cjs/loader.js:580:25)\n at Module.require (internal/modules/cjs/loader.js:711:19)\n at require (internal/modules/cjs/helpers.js:14:16)\n at Object.<anonymous> (C:\\Users\\Firstname Lastname\\Desktop\\workspace\\website\\components\\front-end\\app\\node_modules\\@storybook\\vue\\dist\\server\\framework-preset-vue.js:11:38)\n at Module._compile (internal/modules/cjs/loader.js:805:30)\n at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)\n at Module.load (internal/modules/cjs/loader.js:672:32)\n at tryModuleLoad (internal/modules/cjs/loader.js:612:12)\n at Function.Module._load (internal/modules/cjs/loader.js:604:3)\n at Module.require (internal/modules/cjs/loader.js:711:19)\n at require (internal/modules/cjs/helpers.js:14:16)\n at interopRequireDefault (C:\\Users\\Firstname Lastname\\Desktop\\workspace\\website\\components\\front-end\\app\\node_modules\\@storybook\\core\\dist\\server\\presets.js:20:18)\n at loadPreset (C:\\Users\\Firstname Lastname\\Desktop\\workspace\\website\\components\\front-end\\app\\node_modules\\@storybook\\core\\dist\\server\\presets.js:30:17)\n at Array.map (<anonymous>)\n at loadPresets (C:\\Users\\Firstname Lastname\\Desktop\\workspace\\website\\components\\front-end\\app\\node_modules\\@storybook\\core\\dist\\server\\presets.js:59:26)",
ERR! code: 'MODULE_NOT_FOUND' }
info => Using default Webpack setup.
10% building 1/1 modules 0 active(node:20820) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
webpack built 67e016cd23aad0230032 in 12596ms
× ｢wdm｣: Hash: 67e016cd23aad0230032
Version: webpack 4.41.4
Time: 12596ms
Built at: 2019-12-25 22:39:17
Asset Size Chunks
Chunk Names
iframe.html 3.05 KiB [emitted]
main.67e016cd23aad0230032.bundle.js 6.15 KiB main [emitted] [immutable]
main
main.67e016cd23aad0230032.bundle.js.map 1.84 KiB main [emitted] [dev]
main
runtime~main.67e016cd23aad0230032.bundle.js 31.2 KiB runtime~main [emitted] [immutable]
runtime~main
runtime~main.67e016cd23aad0230032.bundle.js.map 32.3 KiB runtime~main [emitted] [dev]
runtime~main
vendors~main.67e016cd23aad0230032.bundle.js 2.91 MiB vendors~main [emitted] [immutable] [big] vendors~main
vendors~main.67e016cd23aad0230032.bundle.js.map 2.9 MiB vendors~main [emitted] [dev]
vendors~main
Entrypoint main [big] = runtime~main.67e016cd23aad0230032.bundle.js runtime~main.67e016cd23aad0230032.bundle.js.map vendors~main.67e016cd23aad0230032.bundle.js vendors~main.67e016cd23aad0230032.bundle.js.map main.67e016cd23aad0230032.bundle.js main.67e016cd23aad0230032.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true 64 bytes {main} [built]
[./.storybook/config.js] 118 bytes {main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/core-js/features/symbol/index.js] 359 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js] 23 KiB {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[./node_modules/@storybook/vue/dist/client/index.js] 1.21 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] 2.17 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] 7.68 KiB {vendors~main} [built]
+ 758 hidden modules
ERROR in ./src/components/atoms/Button.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div>{{ label }}</div>
| </template>
@ ./stories/mybutton/index.stories.js 2:0-61 16:28-36
@ ./stories sync \.stories\.js$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.53 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.18 KiB {HtmlWebpackPlugin_0} [built]
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
package.json
{
"name": "app-test",
"version": "1.0.0",
"description": "Description",
"author": "Email <email@email.email>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node build/build.js",
"storybook": "start-storybook"
},
"dependencies": {
"vue": "^2.6.11",
"vue-router": "^3.0.1"
},
"devDependencies": {
"@babel/core": "^7.7.7",
"@storybook/vue": "^5.2.8",
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.5",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"babel-preset-vue": "^2.0.2",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"storybook": "^5.1.11",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.7.3",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.6.11",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
index.stories.js
import MyButton from '../../src/components/atoms/Button.vue'
export default { title: 'Button' }
export const withText = () => '<my-button>with text</my-button>'
export const withEmoji = () => '<my-button>? ? ? ?</my-button>'
export const asAComponent = () => ({
components: { MyButton },
template: '<my-button :rounded="true">rounded</my-button>'
})
Button.vue
<template>
<div>{{ label }}</div>
</template>
<script>
export default {
name: 'my-button',
data () {
return {
label: 'Mon bouton'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div {
background-color:black;
color:white;
}
</style>
亚当。