概要
タイトルの通り、ASP.net Core を MVC フレームワークとして使い typescript で vue.js を利用した SPA (SinglePageApplication) を構築するプロジェクトの Starter kit を作ってみました。
既にいくつか starter kit はあったのですが、package.json に特に利用していないものが入っていたりする場合があったので、最小構成（たぶん）で作っています。
ソース
https://github.com/nrslib/ASPNet-Vuejs-SPA-Typescript-starter
解説
ASP.net Core で構成されています。.net Core のバージョンは 2.0 です。
front ディレクトリを Client 用のディレクトリにしています。もしもディレクトリ名などを変更したい場合は、webpack.config.json に記述されている front を文字列置換してください。
front/views/sample/components/next/Next.vue で axios を利用した get と post 処理をしています。参考になるかと思います。
ついでに、コンポーネントが作られる前に通信するパターンと、コンポーネントが作られてマウントされた直後に通信するパターンも実装しています。
合わせてご参考ください。
ビルド実行
VueWithTypeScriptのフォルダで以下コマンドで起動できると思います。
npm install npm build dotnet run
もちろん Visual studio 上から実行しても構いません。
package.json
導入しているパッケージは以下の目的に分けられます。
◆vue.js のため
- vue
- css-loader
◆SPA のため
- vue-router
◆typescript のため
- vue-class-component
- vue-property-decorator
- ts-loade
- typescript
◆通信処理のため
- axios
webpack.config.json
bundle された js は wwwroot/dist 直下に配置されるようになっています。
webpack のバージョンは執筆時点での最新で構成しています。
VueLoaderPlugin を require しないと動かなかったりします。
css-loader はまだ登録していないので、必要になったら登録してください。