一旦、reduxまではなくてちっちゃな部品の場合に使ってみる。。
ライブラリとか環境
doc
vue-cli
便利。大規模になるともっと違うのかも？？とりま。
実行時にseleniumが起動していると失敗するので注意。
npm run e2e # error
brew info selenium-server-standalone
brew services stop selenium-server-standalone
npm run e2e # ok
port
デフォルトは、
webserverは8080
seleniumは4444
vi config/index.js
vi test/e2e/nightwatch.conf.js
そこにvue-routerを追加してみる
それだけで動いた。
でも、ESLINTにたくさん引っかかるようになった。。
Appにextendするとデフォルトのルーティングになるのね。
unit
karmaをつかってunitテストするらしい
e2e
E2E (End-to-End) テスト
多分、nightwatchjsでテストケースを処理しつつ、selenium上で実行していく。
ESLINT
日本語ドキュメントが。。
でも便利かも。
phpstromにも「.editorconfig」ファイルがあるけど同じ設定で行けるのかどうなのか。
うーん、いけなさそう。
http://editorconfig.org/
http://qiita.com/muraken720/items/468b9f420ab4c900e241
「.eslintrc」もあるらしい。
各ファイル上でコメントとしてルールを記載してエラーを回避したりもできる。
軽く何度か実行してみたが、なおしてるのに引っかかったりする気がする。強制にせずに警告で使って慣れていくかな。。
rules/no-undef globals - Google 検索
https://goo.gl/h8NvcD
ESLintでno-undefのルールに引っかかった変数だけを抜き出す - なっく日報
http://goo.gl/DzAc0J
ESLintのエラールール。日本語ざっくり解説[スタイル編] - Qiita
http://goo.gl/T5tC01
僕が JavaScript 開発をするときの ESLint の設定ファイルの基本形 - BattleProgrammerShibata
http://goo.gl/M6uCAg
コーディング規約的なもの
「;」をつけないとか？
ES6のコーディングのスタンダードがまだよくわからない。。
vueコーディングとか
root コンポーネント
var App = Vue.extend(...);
直接記載することもできるし、空にしておくこともできるし、コンポーネントを読み込むこともできる。
routerを使っている場合には、中身にrouter-viewを含ませる。
var App = Vue.extend({})
var app = Vue.extend({
template: '<router-view></router-view>'
})
const App = Vue.extend(require('./App.vue'))
っと思ったけど、基本はルートにマッピングするのが正しそう？？
router.map({
'/': {
component: dashboard
}
})
いろいろできる
router-viewのネストもできるらしい。
ナビゲーションにはネームドルート
コンポーネントを遅延して読み込んでから実行
webpackとかのバンドラがハンドリングしてくれる。。
最初はリソースを読み込まずに必要時にajax asyncで読み込む。
staticディレクトリをちゃんと設定しておけばnginxでも動いた。
ファイル自体はbuildで生成しておくってことか。なるほど。
async awaitってなんだっけ
http://qiita.com/gaogao_9/items/5417d01b4641357900c7#%E6%9C%80%E7%B5%82%E7%AB%A0%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E6%AD%A9%E3%82%80esnext%E3%81%A8asyncawait
http://d.hatena.ne.jp/seraphy/20120901
非同期処理を同期的に記述できる仕組み
- EAP
- promiseとかを使うパターン（イベントベース）
- TAP
- async-awaitを使うようなパターン（タスクベース）
asyncが非同期の意味の概念とかパターンで、実装としてはawaitが主なロジックという感じかしら。
ついでにES6とかES7とかあって混乱したのでググった。何度もググってる気がする。。
ES2015,ES2016がただしい。
脇道に逸れて行く。
async と await の基本的な使い方 - C# 入門
http://goo.gl/dVlwia
ES.next async/await + Promise で解決できる事、とES6 generators (yield) + Promise + npm aa (async-await) で解決できる事 - Qiita
http://goo.gl/VG3wl2
ES7 async/await でのエラーハンドリング - おなか周りの脂肪がやばい
http://goo.gl/2f07VT
ES6 だとか ES7 だとか ES2015 だとか ES2016 ってつまり何という自分用記事まとめ - BattleProgrammerShibata
http://goo.gl/2d3AQd
タスクベース・非同期パターン: async と await による非同期プログラミングとは - C# 入門
http://goo.gl/ch2P87
非同期メソッド - C# によるプログラミング入門 | ++C++; // 未確認飛行 C
http://goo.gl/3Vwbo