Corredor

ウェブ、プログラミングの勉強メモ。

Vue

Vue 3・Vite を触ってみる

Vue 3.0 が RC (Release Candidate) になったらしいので触ってみる。 参考:Vue 3 is now in RC! · Issue #189 · vuejs/rfcs · GitHub … 公式のアナウンス Vue のバージョン紛らわしい Vue CLI ではなく Vite を使う 検証環境 プロジェクト雛形を用意する 雛…

GitHub アカウントの全リポジトリ情報を一覧表示する Vue アプリ「List Repos」を作った

最近 Vue.js をちまちまイジってたので、簡単なアプリを作ってみた。その名も「List Repos」。 GitHub アカウント名を指定すると、そのユーザのリポジトリが一覧表になって表示されるモノで、簡単なテーブルソートもできるようになっている。 デモサイトは以…

Vue CLI で作ったアプリのバンドルサイズを分析する Vue CLI Plugin Webpack Bundle Analyzer

Vue は Webpack でバンドル処理を行うので、Webpack Bundle Analyzer を組み込める。 Vue CLI で作ったプロジェクトの場合、コレを簡単に仕込める Vue CLI Plugin Webpack Bundle Analyzer というプラグインが存在する。 GitHub - mrbbot/vue-cli-plugin-web…

Vuetify を使って困ったところ小ネタ集

Vue CLI + TypeScript + SCSS + Vue-Router + Vuex なプロジェクトに、$ vue add vuetify で Vuetify を追加した。 Vuetify はマテリアルデザインを実現するフレームワークだが、細かなところでデザインを調整したい時に上手いやり方が分からないことがあり…

Vue で Material Design。Vuetify を導入してみた

Vue ベースのアプリに Material Design を導入できる、Vuetify を試してみた。 Vue Material Design Component Framework — Vuetify.js 前提 Vue CLI (@vue/cli 4.4.1) を使い、TypeScript + SCSS なアプリを作った状態を前提とする。 Vue-Router および Vue…

Vue-CLI-Plugin-Express を使って Vue + Express スタックを実現する

Vue.js でアプリを作りつつ、同時にバックエンド API も作りたいな、と思うと、Nuxt.js を使って実装しちゃう方法がすぐ思いつくかもしれない。 Nuxt.js でバックもフロントもこれ一本 - Qiita しかし、 Vue CLI を使いたい API 側はそこまで大仰じゃなくて…

Vue.js で console.log を使うとビルド時にコケるので対処する

Vue CLI 3 で作成したアプリケーション中に console.log() や console.error() などを書いた状態で npm run build (= vue-cli-service build) をすると、エラーが発生してしまい正しくビルドできなかった。 $ npm run build > frontend@0.0.0 build /Users/N…

Zeit Now を使ってみた。GitHub 連携したら Vue のデプロイも now.json 不要だった

Zeit という企業が提供する、NOW というウェブサービスがある。当初はゼロコンフィグで静的サイトをデプロイできる、とかいう話で Netlify みたいな感じのサービスだったと思うのだが、最近見てみたら V2 (第2世代) となっていて、Node.js や Python などの…

BootstrapVue:Vue CLI 3 で Bootstrap 4 を使う

Vue CLI 3 で作った環境に、Bootstrap 4 を入れて使ってみたい。静的なスタイル適用だけであれば、Bootstrap 4 自体を導入して SCSS を読み込めば良いだろうが、jQuery に依存している動的な一部機能が使えない。 Angular だと ngx-bootstrap などの Bootstr…

Vue.js を Vue CLI で始めてみる・React や Angular との比較も少し

create-react-app で少しだけ React を触ったあと、ガッツリ Angular 人間になっていたので、今回は Vue.js にも手を出してみることにした。 Angular・React・Vue の比較色々 Angular 寄りな感想 Next.js とか Nuxt.js とかって何? その他 どうやって Vue …