mio3io / cr-vue Goto Github PK

View Code? Open in Web Editor NEW

231.0 231.0 220.0 1.2 MB

基礎から学ぶ Vue.js サポートページ（※このリポジトリはサポートページ用のもので学習に使用するものではありません。このリポジトリを Fork しても何も使えません）

Home Page: https://cr-vue.mio3io.com/

CSS 30.96% HTML 28.32% JavaScript 40.72%

cr-vue's People

Contributors

Stargazers

Watchers

Forkers

khatamoto-cq parkercatz dragonta2 fagai kazumihirata agt7 sagirikiri taroooooot phieulinh tohokuaiki tomofu74 roygriffith luk-it keikomuto0620 pra-kimura koji-kimura morihaya billiesbounce avocadowasabi tomayuri ryo86nfd yusuke1992 genkirabbit nishinoshuji tyahha tadashisomeya kmiura-1002 kazukitokunaga heppokokun tokyotower maxonce iwbjp onsd dorara-m tomcana mikakane novbing emoritani hasegawa0613 baotinghuang aysu5329 yusuke1011 cchhiikkiittaa andotrue nakazawak272 miyashita337 homma509 yohhatu raxs5830 kakisoft koseikaneko smatsuda0620 sano-suguru suzukiyoshi row-syntax sabuji kyokokato2323 masashi49 takashideguchi yuyu0127 syncmjava xleap kyosuke-oki-adglobe-co-jp itohiro-j kiryu-h rintiantta tetsuco 9kai27 yuuichi-masuda ippei-murofushi fs-19-atsushi-okada urc-pen aoi1106 ntoake kanasano kentaasamura doiburotr eniwder mutoooooo shaoqianheng kinoshitayoichi gsr4624 take1126 takatsukitoshiki akirataketomi m3138144402 dongbunny naokinakai takemori1990 nakayoshika dobeco ozkn666 duyuxuan dancingchildren takayama1358 new1990 hashimoto-fiw hidetoshi-nagayasu u191418 akimago

cr-vue's Issues

教えてください

68ページ目の
◆v-if条件による描画
で、最後２行の意味が理解できませんでした。
補足していただけるとうれしいです。

CHAPTER3-section14のセレクトボックス複数選択の場合

P111ページの複数選択のセレクトボックスですが、複数選択できないです。サポートページのDEMO画面と同じように表示されてはおるのですが、DEMO画面でも私の実行環境でも複数選択まではできません。
書籍上だと複数選択できるような記載(AとCを選択している)があるので、どこかおかしいのではと思っています。
サポートページ: https://cr-vue.mio3io.com/guide/chapter3.html#%E3%82%BB%E3%83%AC%E3%82%AF%E3%83%88%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9
お手数お掛け致しますが、よろしくお願いいたします。

ToDo

Lodash を使っている所がわかりにくい Lodash・axios について簡単に説明
チュートリアル Twitter Developer の手順を最新版にする

基礎から学ぶVue.js Page.174のサンプルについて

サンプルを参考に実装してみたのですが、思ったように動かなかったので質問させてください。
slotを使い、子コンポーネントでv-forを実行し、その内容を親コンポーネントに持ってきて
最後に子コンポーネントに渡す処理ですが、どう書いても動きません。

<!-- HTML -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js</title>
    </head>
    <body>
        <div id="app">
            <comp-child-3>
                <li slot-scope="child3">{{ child3.item }}</li>
            </comp-child-3>
        </div>
        <script src="vue.js"></script>
        <script src="main.js"></script>
    </body>
</html>

/* JavaScript */
Vue.component('comp-child-3', {
    template: '<ul class="comp-child-3"><slot v-for="item in list" v-bind:item="item"></slot></ul>'
})
var app = new Vue({
    el: '#app',
    data: {
        list: [
            { item: '1', name: 'name1' },
            { item: '2', name: 'name2' },
            { item: '3', name: 'name3' }
        ]
    }
})

84ページのlistj.sonを読み込もうとしたんですがエラーが出てます.

from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
のようなエラーが出てますが解決できてません。。。
これに関する回答を見ても出ませんかaxiosに関する例題ってないでしょうか？

ch8 storeのアクセス方法を書籍と統一させる

書籍とサポートページでstoreへのアクセス方法が異なり混乱を招くため
ソースコード読み込み→ベタ書きに変更する
#6

ReferenceError: _ is not defined

P.127の通りVueを編集しました。
P.126で「Loadashなどのライブラリを使用」することが触れられていますが読み込み方法が書いていなかったため表題のエラーが発生しました。

対策としてindex.htmlに以下のJSファイルを読み込むことで解決しました。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

取り急ぎ報告まで

P41 の中頃の v-model.number="count" に関して

v-model の説明の流れで読んで行きますと
修飾子 .number の付加して、値が　count に変わってしまっていて、main.js に書いてある message と整合性が取れてないのでエラーになります。

Layout on iPad

The sidebar seems too width on iPad.
Anyway this website is so cute with VuePress 👍

Vue CLI3インストール時のエラー

Vue CLI3のインストールについて質問です。
231ページとおまけ-vue-cli-バージョン3を見ています。

npm install -g @vue/cliでインストール時に以下のエラーとワーニングが出てしまいました。
試しにsudoでも実行してみたのですが、別のエラーがでてしまいました。

PCはMacで、npmのバージョンは6.5.0です。

解決方法を教えていただけないでしょうか。

$ npm install -g @vue/cli
npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mira/.npm/_logs/2019-02-11T06_24_15_731Z-debug.log

$ sudo npm install -g @vue/cli
npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead
/usr/local/bin/vue -> /usr/local/lib/node_modules/@vue/cli/bin/vue.js

> [email protected] install /usr/local/lib/node_modules/@vue/cli/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download 
node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v67 ABI, unknown) (falling back to source compile with node-gyp) 
node-pre-gyp WARN Hit error EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/lib' 
gyp WARN EACCES user "root" does not have permission to access the dev dir "/Users/mira/.node-gyp/11.9.0"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/.node-gyp"
gyp WARN install got an error, rolling back install
gyp WARN install got an error, rolling back install
gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/.node-gyp'
gyp ERR! System Darwin 18.2.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node" "--module_name=fse" "--module_path=/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64" "--napi_version=4" "--node_abi_napi=napi"
gyp ERR! cwd /usr/local/lib/node_modules/@vue/cli/node_modules/fsevents
gyp ERR! node -v v11.9.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node --module_name=fse --module_path=/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64 --napi_version=4 --node_abi_napi=napi' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:197:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:978:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
node-pre-gyp ERR! System Darwin 18.2.0
node-pre-gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /usr/local/lib/node_modules/@vue/cli/node_modules/fsevents
node-pre-gyp ERR! node -v v11.9.0
node-pre-gyp ERR! node-pre-gyp -v v0.10.3
node-pre-gyp ERR! not ok 
Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node --module_name=fse --module_path=/usr/local/lib/node_modules/@vue/cli/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64 --napi_version=4 --node_abi_napi=napi' (1)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/@vue/cli/node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node install`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

+ @vue/[email protected]
updated 1 package in 12.676s

どうぞよろしくお願いいたします。

p.267 CH8 SEC44 メッセージを更新する src/components/EditForm.vue のソースコードに誤植部分？

https://gyazo.com/1c1c7dfcc6e9e352d3313852f67360b5

doUpdate(event) メソッド内の
store.dispatch('doUpdate', event.target.value) がそのまま写経したところ動作しなかったため、
this.$store.dispatch('doUpdate', event.target.value) が正しいのかなと思います。

お手数ですがご確認お願い致します。

「 el: '#app',」忘れ？

「 el: '#app',」を付加しないと想定した表示になりませんでした。

new Vue({
  el: '#app',
  data: {
    valueA: 'これは子A',
    valueB: 'これは子B'
  }

})

https://cr-vue.mio3io.com/guide/chapter5.html#s23-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E9%96%93%E3%81%AE%E9%80%9A%E4%BF%A1-%E8%A6%AA%E3%81%8B%E3%82%89%E5%AD%90

正誤表について

スロットが適している場面

何度もすみません、スロットについて教えてください。
スロットでできることは、普通のコンポーネントのpropsを使ってもできると思うのですが、どのような場合にスロットを使うのが良いのでしょうか。
P169の最初のパラグラフの説明が答えなのかのしれませんが、いまいち理解できず...。
よろしくお願いします。

mio3io / cr-vue Goto Github PK

cr-vue's People

Contributors

Stargazers

Watchers

Forkers

cr-vue's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs