Vue.js でウィジェットっぽいもの (TypeScript)

以前、Vue.js の学習を兼ねてウィジェットっぽいもの作りました。

Vue.js でウィジェットっぽいものを作ってみる (仮) - kntmr-blog

Vue.js でウィジェットっぽいもの (仮) その2 - kntmr-blog

続編として今回はこれを TypeScript に移植しました。とは言ってもそんなに大したことはやってなくて TypeScript のお作法的にも怪しいかも...。

github.com


以下、備忘録。

前回は学習を兼ねてたので 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 の学習を兼ねるようなサンプルにしたい。