※ 블로그에 쓰였으나 qiita로 옮겨졌습니다.
https://www.moyashidaisuke.com/entry/vue-styleguidist-install

개요

저는 Laravel + vue 환경에서 vue의 styleguild "Vue Styleguidist"를 사용하기 시작했습니다.
생각보다 시간이 걸리기 때문에 설정 파일과 내 환경에서 발생한 오류에 대한 대응 등을 남겨야 한다.

↑ 의 카멜레온은 Vue Styleguidist의 상징이다.마음이 후련하다.
※ Laravel 환경이 아니더라도 참고할 수 있습니다.

Vue Styleguidist

동작 샘플을 먼저 보면 이해하기 쉬워서 갑자기 링크를 주셨어요.
이러한 구성 요소의 규격과 예시 문서를 만드는 도구입니다.그렇습니다.

GitHub의 Star 수는 이 글을 쓸 때 1419였기 때문에 아직 사실이 된 느낌은 아니지만 경쟁하는 vuese보다 Star 수가 많아서 채택했습니다.
https://github.com/vue-contrib/vuese

구현 단계(이상적)

특별히 좋아하지 않는 순조로운 진행 패턴.

전제 조건

Laravel+vue 환경 배포

npm이 아니라 yarn

Vue CLI 사용 안 함

공식 프로그램은 npm이지만 제 환경에서 yarn을 사용했기 때문에 yarn의 프로그램을 소개하겠습니다.

설치

$ yarn add -D vue-styleguidist

〜色々インストールされる。省略〜

Done in 296.61s.

스타일 구성

공식 프로그램에는 두 개의 링크가 붙어 있다.
https://vue-styleguidist.github.io/docs/Components.html#finding-components
https://vue-styleguidist.github.io/docs/Webpack.html
갑자기 버려져서 모르겠지만 프로젝트 노선에서styleguide.config.js의 파일입니다.
안에

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  webpackConfig: {
    module: {
      rules: [
        // Vue loader
        {
          test: /\.vue$/,
          exclude: /node_modules/,
          loader: 'vue-loader'
        },
      ]
    },
    plugins: [
      new VueLoaderPlugin()
    ]
  },
  // vueファイルへのpathを指定
  components: 'resources/js/components/**/[A-Z]*.vue',

}

그러니까 내 환경이야.
요점으로 webpackConfig 유용laravel mix 설정도 전혀 움직이지 않는다.(그것은 믹스 동적으로 config를 생성하기 때문이다)
또 vue-loader 설정을 제대로 쓰지 않으면 움직이지 않는다.묵인하지 않을 것 같습니다.
또한 vue의 파일은 Laravel의 경우 일반resources/js 이하로 제작되는 경우가 많으니 제때에 조정하십시오.

package.json에 명령 추가

이건 공식 상태를 유지하면 돼.

{
  "scripts": {
+    "styleguide": "vue-styleguidist server",
+    "styleguide:build": "vue-styleguidist build"
  }
}

실행

hot reload 버전

yarn run styleguide

서버가 시작되고localhost: 6060에 연결됩니다.vagrant와 Docker 등 가상 환경을 사용하는 사람은 포트를 설정하십시오.
왜냐하면 저는 Docker-compose를 쓰거든요.

      ports:
        - 6060:6060 # styleguide

에서 설명한 대로 해당 매개변수의 값을 수정합니다.

토한 버전

yarn run styleguide:build

styleguide 이 디렉터리는 html와 js를 토하고 html를 열면 됩니다.

여러 가지 오류

styleguide.config.js의 설정과

components의 path가 이상해요.

화면을 켜면 이 모드가 표시됩니다.

Welcome to Vue Styleguidist!
We couldn’t find any components using these patterns:

src/{components,Components}/**/*.vue
Create styleguide.config.js file in your project root directory like this:

module.exports = {
  components: 'src/components/**/*.vue'
};
Read more in the locating components guide.

components의 설정을 자신의 환경과 일치시키면 OK.

Failed to compile

Failed to compile
./resources/js/components/XXXXX.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

설정 vue-loader 하면 됩니다.

vue와 vue-template-compiler의 버전 차이

Failed to compile
./resources/js/components/XXXXXX.vue (./node_modules/vue-styleguidist/loaders/vuedoc-loader.js!./resources/js/components/XXXXXX.vue)
Error: 

Vue packages version mismatch:

- [email protected] (/var/www/node_modules/vue/dist/vue.runtime.common.js)
- [email protected] (/var/www/node_modules/vue-docgen-api/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

버전에 맞지 않으면 안 될 것 같습니다.
yarn.록을 확인하면...

vue-template-compiler@^2.0.0:
  version "2.6.10"
  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"
  integrity sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==
  dependencies:
    de-indent "^1.0.2"
    he "^1.1.0"

^2.0.0 2 이상 사용, 지정2.6.10 install.
그래서 억지로 넣는다2.6.8.

$ yarn add [email protected]
yarn add v1.13.0

info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
Done in 223.61s.

이렇게 2.6.8 들어갔을 줄 알았는데 2.6.10 들어가서 안 돼.
yarn.lock은 이런 상태입니다.

[email protected]:
  version "2.6.8"
  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.8.tgz#750802604595134775b9c53141b9850b35255e1c"
  integrity sha512-SwWKANE5ee+oJg+dEJmsdxsxWYICPsNwk68+1AFjOS8l0O/Yz2845afuJtFqf3UjS/vXG7ECsPeHHEAD65Cjng==
  dependencies:
    de-indent "^1.0.2"
    he "^1.1.0"

vue-template-compiler@^2.0.0:
  version "2.6.10"
  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"
  integrity sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==
  dependencies:
    de-indent "^1.0.2"
    he "^1.1.0"

install이나remove는 안 되기 때문에 최종 수단으로 yarn을 사용합니다.lock을 직접 다시 씁니다.

[email protected]:
  version "2.6.8"
  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.8.tgz#750802604595134775b9c53141b9850b35255e1c"
  integrity sha512-SwWKANE5ee+oJg+dEJmsdxsxWYICPsNwk68+1AFjOS8l0O/Yz2845afuJtFqf3UjS/vXG7ECsPeHHEAD65Cjng==
  dependencies:
    de-indent "^1.0.2"
    he "^1.1.0"

vue-template-compiler@^2.0.0:
  version "2.6.8"
  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.8.tgz#750802604595134775b9c53141b9850b35255e1c"
  integrity sha512-SwWKANE5ee+oJg+dEJmsdxsxWYICPsNwk68+1AFjOS8l0O/Yz2845afuJtFqf3UjS/vXG7ECsPeHHEAD65Cjng==
  dependencies:
    de-indent "^1.0.2"
    he "^1.1.0"

$ yarn install

이렇게 움직였어.
issue는 자주 볼 수 있지만 잘 대응하는 방법은 불분명하다.누군지 알면 알려주세요.

다음

실제 문서 또는 해석 매개변수를 생성할 계획입니다.
제2단