質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

解決済

Vuetifyが正常に機能しない

htkhtk
htkhtk

総合スコア8

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

2回答

0評価

0クリップ

750閲覧

投稿2020/01/08 01:12

編集2020/01/08 01:31

前提・実現したいこと

nuxt.jsでアンケートアプリを作っています。Vuetifyでデザインをあてようとしています。

発生している問題・エラーメッセージ

公式サイトのコードをコピーしても同じようなデザインにならずに困っています。
Vuetifyパッケージのインストールの段階でなにか間違ってるような気がしますが、Node.jsの基礎的な部分の知識が不足してるため対処法がわかりません。
インストールは公式リファレンスを参考に

  1. npm install @nuxtjs/vuetify -D
  2. nuxt.config.jsに'@nuxtjs/vuetify',を追加
  3. package/にvuetify.jsを新規作成

該当のソースコード

packagejson

"dependencies": { "@fortawesome/fontawesome-free": "^5.12.0", "@nuxtjs/dotenv": "^1.4.1", "element-ui": "^2.12.0", "firebase": "^7.6.1", "lodash": "^4.17.15", "nuxt": "^2.0.0", "stylus": "^0.54.7", "stylus-loader": "^3.0.2", "underscore": "^1.9.1", "vue": "^2.6.11", "vue-template-compiler": "^2.6.11", "vuexfire": "^3.2.0" }, "devDependencies": { "@nuxtjs/vuetify": "^1.9.1", "normalize.css": "^8.0.1" }

vuetifyjs

import '@fortawesome/fontawesome-free/css/all.css' import "vuetify/dist/vuetify.min.css"; import Vue from 'vue' import Vuetify from 'vuetify/lib' Vue.use(Vuetify) export default ctx => { const vuetify = new Vuetify({ theme: { dark: false }, icons: { iconfont: "fa" } }) ctx.app.vuetify = vuetify ctx.$vuetify = vuetify.framework }

nuxtconfigjs

export default { mode: "spa", /* ** Headers of the page */ head: { title: process.env.npm_package_name || "eyetest", meta: [ { charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { hid: "description", name: "description", content: process.env.npm_package_description || "" } ], link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }] }, /* ** Customize the progress-bar color */ loading: { color: "#fff" }, /* ** Global CSS */ css: ["normalize.css"], /* ** Plugins to load before mounting the App */ plugins: ["@/plugins/firebase", '@/plugins/vuetify'], /* ** Nuxt.js dev-modules */ buildModules: ["@nuxtjs/vuetify"], /* ** Nuxt.js modules */ modules: ["@nuxtjs/dotenv"], /* ** Build configuration */ build: { vender: ['vuetify'], /* ** You can extend webpack config here */ extend(config, ctx) {} } };

自分で調べたことや試したこと

公式リファレンスを読み直してvue add vuetifyする必要があると思って実行するも

Vue packages version mismatch: - vue@2.6.11 (C:\Users*****\AppData\Roaming\npm\node_modules\vue\dist\vue.runtime.common.js) - vue-template-compiler@2.6.10 (C:\Users*****\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\vue-template-compiler\package.json)

と怒られました。
npm update -g vue-template-compilerをしても上記のエラーが返されてしまいます。
よろしくお願いします。


こちらの記事を参考にC:\Users*****\AppData\Roaming\npm\node_modules\を削除してみましたが、

internal/modules/cjs/loader.js:638 throw err; ^ Error: Cannot find module 'C:\Users\h-kubota\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at Function.Module._load (internal/modules/cjs/loader.js:562:25) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) at startup (internal/bootstrap/node.js:283:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

と返されました。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。