Edited at

Vuetify のアップデート(v1.5.x => v2.x) with TypeScript and Webpack


本記事の立ち位置

ここの拡張版。

VuetifyとはVue.js用のUIフレームワークです。


相違点



  • vue-cli を利用しない


  • packagewebpackを更新してアップデート

  • サンプルプログラムを抜粋して記載


How to


1. packageのアップデート



  • npm updateを利用してもvuetifyなどの一部パッケージが最新版にならない場合があります。これは既存のアプリを破壊(動かなく)してしまう可能性があると判断されているからです。

  • それを抑えてなお破壊的な更新を行いたい場合はncuを利用しましょう!

$ npm update # まずは普通にアップデート

$ ncu # アップデートできるパッケージの確認
$ ncu -u # 破壊的アップデート


2. webpackの更新



  • vuetifyをコンパイルするためにvuetify-loaderをインストールします。

  • webpack-cli

# 以下はやってない人

$ npm i -g webpack webpack-cli
$ exec $SHELL -l # コマンドプロンプトの再起動(linux, mac)
$ npm i -D vuetify-loader


webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

let baseWebpack = {
/* 略 */
plugins: [
new VuetifyLoaderPlugin()
],
/* 略 */
};

module.exports = baseWebpack



3. Vuetify の読み込み

src/pluginsは作成する必要はありませんが、ライブラリは別ファイルで管理しておくと可読性が良くなります。

tsconfig.jsonへの設定も忘れずに


tsconfig.json

{

***
"types": [
"vuetify"
],
***
}


src/plugins/vuetify.ts

import Vue from 'vue'

import 'vuetify/dist/vuetify.min.css'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify);

/*
// directiveも利用する場合
import { Touch } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
directives: {
Touch
}
});
*/

export default new Vuetify({
icons: {
iconfont: 'fa'
}
});



src/main.ts

import Vuetify from './plugins/vuetify';

import App from './components/App'

new Vue({
vuetify: Vuetify,
template: '<App/>',
components: {
App
}
}).$mount('#app')


以上!