Vue.jsでマテリアルデザインを使うとなると「Vuetify」一択かね？
ってことで、Vue.jsにVuetifyを導入してみました。
僕のプロフィールはこちら
目次
前提
・Vue CLIのアプリが存在すること
Vuetify導入
|
1 |
vue add vuetify |
Vueアプリのルートで上記コマンドを実行します。
↓実際はこんな感じになる。
導入は終わり。
だが、基本的にエラーが出るので解消していきます。
エラー解消方法
構文エラー解消
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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」でわけわからんエラー出てる
|
1 |
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」ってのを入れろって言ってそうなので入れてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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なので見つからないと言われている。
どうやらこの方法ではないらしい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
{ "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導入後の画面はこれや！
いい感じ。
おすすめ本
僕がVue.jsの勉強をする際に購入した本になります。
この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ！
まとめ
VueとかVuetifyってなんでデフォルトでエラー出るの？
意味わからん。
ではまた。