前提・実現したいこと
nuxt.jsでアンケートアプリを作っています。Vuetifyでデザインをあてようとしています。
発生している問題・エラーメッセージ
公式サイトのコードをコピーしても同じようなデザインにならずに困っています。
Vuetifyパッケージのインストールの段階でなにか間違ってるような気がしますが、Node.jsの基礎的な部分の知識が不足してるため対処法がわかりません。
インストールは公式リファレンスを参考に
npm install @nuxtjs/vuetify -D
- nuxt.config.jsに
'@nuxtjs/vuetify',
を追加 - package/にvuetify.jsを新規作成
該当のソースコード
packagejson
1 "dependencies": { 2 "@fortawesome/fontawesome-free": "^5.12.0", 3 "@nuxtjs/dotenv": "^1.4.1", 4 "element-ui": "^2.12.0", 5 "firebase": "^7.6.1", 6 "lodash": "^4.17.15", 7 "nuxt": "^2.0.0", 8 "stylus": "^0.54.7", 9 "stylus-loader": "^3.0.2", 10 "underscore": "^1.9.1", 11 "vue": "^2.6.11", 12 "vue-template-compiler": "^2.6.11", 13 "vuexfire": "^3.2.0" 14 }, 15 "devDependencies": { 16 "@nuxtjs/vuetify": "^1.9.1", 17 "normalize.css": "^8.0.1" 18 } 19
vuetifyjs
1import '@fortawesome/fontawesome-free/css/all.css' 2import "vuetify/dist/vuetify.min.css"; 3import Vue from 'vue' 4import Vuetify from 'vuetify/lib' 5 6Vue.use(Vuetify) 7 8export default ctx => { 9 const vuetify = new Vuetify({ 10 theme: { 11 dark: false 12 }, 13 icons: { 14 iconfont: "fa" 15 } 16 }) 17 ctx.app.vuetify = vuetify 18 ctx.$vuetify = vuetify.framework 19}
nuxtconfigjs
1 2export default { 3 mode: "spa", 4 /* 5 ** Headers of the page 6 */ 7 head: { 8 title: process.env.npm_package_name || "eyetest", 9 meta: [ 10 { charset: "utf-8" }, 11 { name: "viewport", content: "width=device-width, initial-scale=1" }, 12 { 13 hid: "description", 14 name: "description", 15 content: process.env.npm_package_description || "" 16 } 17 ], 18 link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }] 19 }, 20 /* 21 ** Customize the progress-bar color 22 */ 23 loading: { color: "#fff" }, 24 /* 25 ** Global CSS 26 */ 27 css: ["normalize.css"], 28 /* 29 ** Plugins to load before mounting the App 30 */ 31 plugins: ["@/plugins/firebase", '@/plugins/vuetify'], 32 /* 33 ** Nuxt.js dev-modules 34 */ 35 buildModules: ["@nuxtjs/vuetify"], 36 /* 37 ** Nuxt.js modules 38 */ 39 modules: ["@nuxtjs/dotenv"], 40 /* 41 ** Build configuration 42 */ 43 build: { 44 vender: ['vuetify'], 45 /* 46 ** You can extend webpack config here 47 */ 48 extend(config, ctx) {} 49 } 50}; 51
自分で調べたことや試したこと
公式リファレンスを読み直して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)
と返されました。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/20 01:00