以前、Vue.js の学習を兼ねてウィジェットっぽいものを作りました。
Vue.js でウィジェットっぽいものを作ってみる (仮) - kntmr-blog
Vue.js でウィジェットっぽいもの (仮) その2 - kntmr-blog
続編として今回はこれを TypeScript に移植しました。とは言ってもそんなに大したことはやってなくて TypeScript のお作法的にもかなり怪しいと思います...。
以下、備忘録。
前回は学習を兼ねてたので Vuex とか Vue Router を使ってましたが、今回はもっとシンプルに。あと、Vue.js はとりあえず 2.x 系にしています。後々、3.x に移行したい。
> vue create vue-widget-sample-ts Vue CLI v4.5.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS ? Choose a version of Vue.js that you want to start the project with 2.x ? Use class-style component syntax? No ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No
axios だけインストール。
> yarn add axios
vue.config.js
Configuration Reference - Vue CLI
Webpack の設定などはここに書く。
コンポーネント
基本的に Vue.js + JS 版を Vue.extend
でラップしてるだけであまり変わってないです。
これからやりたいこと
もう少し TypeScript や Vue 3.x の学習を兼ねるようなサンプルにしたい。