vue.js + typescriptのページネーション
ココが分かりやすい。けれど、typescriptでない。
あと、ココがbootstrap vue。
ここがtypescrptでvueでpagination
vue.js + typescriptの書き方
ここで良くまとまっていた。vue-class-componentより、vue-property-decoratorの方が良いよ！って話かな？実際ASP.NET Core with Vue.jsのテンプレートはvue-property-decoratorを使っている。この2つの使い分けとか良く分かってないのは確か。
んで、vue2.5以降ならさらにその書き方も古いってことになるんだと思った。
あとココも結構良い。
dataの中で型が宣言出来ないと思った。解決はココ。
最新なのがココ。
ASP.NET Core にSwaggerの設定
ASP.NET Core with Vue.jsでbootstrapを4にしたい。
package.jsonにバージョンが書かれているのでこれを4に上げれば終わりかと思ったら、凄く苦労した。
まずはpackage.jsonを変更。バージョンを勝手に教えてくれる。これ凄い！
"bootstrap": "^4.1.2",
キャレット(＾)ってなんだ？と思ったのでpackage.jsonのルールを確認。
これでVSビルドしてもまだ上がらない。色々見ていたら依存関係のNPMの中のbootstrapのバージョンが上がっていない。
上げ方を調べたら以下に書いてあった。
npmの再更新は以下。ところが失敗する。npmのバージョンが6より古いみたい。
pacakge.jsonを右クリックし「パッケージの復元」を選択すると、再インストールできます。
バージョン上げるのは嫌なので、昨日入れたnode.jsにつなげば良いかなーと思って設定を調べる。以下に足せばOK。ところがnode.js変えてもうまく動かない。
結局、stackoverflowをみて「C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Web\External」に入っていることは分かったので、こっちを上げる。正しい上げ方も結局分からず、コマンドでアップデートも上手く上がらなかったので、node.jsのnpmを上書き。なんか嫌なやり方だなと思いつつ一応上手くいった。
でも、まだbootstrapの依存関係でエラー。package.jsonにpopperがない。bootstrapにそんなの必要だっけ？と思いつつ、popper書いてもまたエラー。依存関係のNPMの中で直接「パッケージの更新」してやったら上手くいった。bootstrapもはれて4.1.2。ところが実行してやると、まだ使っているのはbootstrap3。なんでやねん！
色々見ていると実行した場合bootstrap.cssを直で使っているわけではなく、vendor.cssにまとめられている。じゃあvender.cssをアップデートするのは？ほんとに分からないことだらけだ。
これはwebpackが関係しているようで、webpack.config.jsでBundler & MinifierのRe-bundle Fileしてもやっぱり作れない。
結局webpackを更新するためにbundleconfig.jsonやらgulpfile.jsやらその都度設定を調べて、バージョンアップして、タスクランナーエクスプローラーも使ってみて、色々試したけれど、結局更新できず。
その後アドバイスをもらってwebpackを直接叩けば良いのではと言われて、以下をやったらやっとvendor.cssが更新された。
node_modules\.bin\webpack --config webpack.config.vendor.js
で、無事bootstrap4になった。ふー。
Visual StudioのVue.jsのテンプレート「ASP.NET Core with Vue.js」
↑ここを参考にしたのですが、2.0系でもASP.NET Core with Vue.js がなかった。
で、探したら、コマンドライン叩いたら出てくるってさ。以下です。
Install the SPA (Single Page Application) templates provided by Microsoft:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
でも、コマンドラインからしか作れない？VS上にはでなかった。。
コマンドラインで以下で作れます。名前指定したかったら[-n]で。
dotnet new vue
その後コンパイルが通らないと思ったらnode.jsが入っていないせいだった。入ってなかったのか。。。
で、やっと出来たテンプレート起動して、cshtmlに日本語打ったら化けた。理由はcshtmlがSJIS。マジか。そして馬鹿か。保存しなおす方法が分からなかった
あと、またデバッグ起動したら、10秒ぐらいで落ちるようになった。なんだこれ。マジで。「デバッグなしで開始」するで落ちなくなる。
Vue.jsはじめました
最初に公式サイトを見る。とても分かりやすい。
ただ、操作環境として以下を進めているけれど、
Vue.js を試すには、JSFiddle Hello World example が最も簡単です
以下の所でつまづいた。
ブラウザの JavaScript コンソールを開いて、
app.messageの値を変えてみましょう。
結局自分のローカルに環境作ってF12でやったら出来た。こんなことが出来ることも知らなかったぐらいJSは分かってない。
次にとほほのページ。公式サイトの次に読むと良いと思う。とても情報の密度が高い。
特に以下のようなシンタックシュガーが書いてあったのが良かった。{{}}はあまり書きたい書き方じゃないなーと思っていたよ。
<div v-text="message"></div> <!-- この行と --> <div>{{ message }}></div> <!-- この行は、同じ意味を持ちます -->
で、今はここを読んでいる。
ドットインストールはVue.jsが有料なのがとても残念。。。
