Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

本記事の立ち位置

ここの拡張版。

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')

以上!

hiyoko3
A Software developer in Tokyo.
https://hiyoko3.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away