『自由力』を身に付けるサイト「リバトレ」も見てね!!

【Vue.js】Vuetifyのサンプルアプリを作成した!

悩んでいる男の子

Vuetifyのサンプルアプリを作ってみたいんだけど、手順が分からないんだよね。。

こんな悩みを解決します。

  • 本記事の内容
  • Vuetify導入方法
  • 画像&ソースコード付きの具体的な手順
  • 本記事の執筆者
プロフィール
どこの写真だよ
  • 長身ガリガリ自称イケメン(1993/4/1生)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 副業(物販)5か月目で月利30万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、投資を細々とやっています。
  • 物販は彼女と楽しみながらやってます!

今回は、Vue.jsにVuetifyを導入してみます

目次

前提

  • Vue CLIのアプリが存在すること

Vuetify導入

vue add vuetify

上記コマンドを実行します。

Vuetify

導入は終わりです。

エラーが色々と出るので、この後解消していきます。

エラー解消方法

構文エラー解消

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App), // ←カンマがないので追加。
}).$mount('#app');

src/main.ts」にカンマがないので追加します。

「src/plugins/vuetify.ts」で良く分からないエラー発生

ERROR in C:/Users/泉 浩兵/Desktop/tmp/vue-dashboard/src/plugins/vuetify.ts(2,21):2:21 Could not find a declaration file for module 'vuetify/lib'. 'C:/Users/泉 浩兵/Desktop/tmp/vue-dashboard/node_modules/vuetify/lib/index.js' implicitly has an 'any' type.Try npm install @types/vuetify if it exists or add a new declaration (.d.ts) file containing declare module 'vuetify/lib';

@type/vuetify」をインストールしてと言われるのでインストールします。

C:\Users\泉 浩兵\Desktop\tmp\vue-dashboard>npm install @types/vuetify
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvuetify - Not found
npm ERR! 404
npm ERR! 404  '@types/vuetify@latest' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because
npm ERR! 404  1. name can only contain URL-friendly characters
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\泉 浩兵\AppData\Roaming\npm-cache\_logs\2020-01-20T16_16_14_786Z-debug.log

404エラーが出るので、どうやらこの方法ではないみたいですね。。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "vuetify"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

結論、「tsconfig.jsonのcompilerOptions.typesに”vuetify”を追加する」と解決します。

Vuetify導入後の画面

Vuetify画面

問題なく表示されていますね。

まとめ

今回は、Vue.jsにVuetifyを導入してみました

導入した後にエラーが出るの辛いですね。。

ではまた!

  • おススメ本はこちら!
いずみん

僕は↓の本でVue.jsの勉強をしました!
非常に分かりやすいので是非!

Vuetify画面

この記事が気に入ったら
フォローしてね!

シェアするんやで!

~ リバトレ ~

お金や副業に関する情報を発信しているよ!

この記事を書いた人

いずみんのアバター いずみん 自由力発信おじ

【自由力発信】うさんくさ笑 | 副業物販で5ヶ月目に月利30万円達成⇨脱サラ予定 | 物販(アパレルせどり)・アフィリエイト・投資で自由になるための情報を発信中?笑 | 元エンジニア | 保有資格約20個

関連記事

コメント

コメントする

目次
閉じる