[vue] Vue Styleguidist의 사용법을 설명합니다 ① ~ Laravel+vue 환경에서 Vue Styleguidist를 이동합니다~
10717 단어 LaravelJavaScriptVue.js
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
구현 단계(이상적)
특별히 좋아하지 않는 순조로운 진행 패턴.
전제 조건
설치
$ 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:
- vue@2.6.8 (/var/www/node_modules/vue/dist/vue.runtime.common.js)
- vue-template-compiler@2.6.10 (/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 vue-template-compiler@2.6.8
yarn add v1.13.0
info Direct dependencies
└─ vue-template-compiler@2.6.8
info All dependencies
└─ vue-template-compiler@2.6.8
Done in 223.61s.
이렇게 2.6.8
들어갔을 줄 알았는데 2.6.10
들어가서 안 돼.yarn.lock은 이런 상태입니다.
vue-template-compiler@2.6.8:
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을 직접 다시 씁니다.vue-template-compiler@2.6.8:
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단
Reference
이 문제에 관하여([vue] Vue Styleguidist의 사용법을 설명합니다 ① ~ Laravel+vue 환경에서 Vue Styleguidist를 이동합니다~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/moya_dev/items/6035db4ddd7687eec2e8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)