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

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

ただいまの
回答率

87.94%

Vue.jsでのエラーを解決したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 291

score 59

いつもお世話になっております

下記のリンクを参考に、Vue.jsを使用して、ECサイトのモックアップを練習として作っているのですが、エラーが解決できません
Vue.jsでECサイトのモックアップを作る
私のGithubでの現時点のコード

・開発環境: MacOS Catalina v10.15.3 , npm 6.13.4 , node v12.16.1 , vue@2.6.11

同じようなエラーもしくは、私の理解が足りず、初歩的なミスをしているかもしれませんが、ご教授お願いいたします。

npm run dev後のエラー↓

> e-commerce-app@1.0.0 dev /Users/kazuhisanoguchi/Desktop/ECapp
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
 13% building modules 25/34 modules 9 active ...anoguchi/Desktop/ECapp/src/defalt.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 18% building modules 72/76 modules 4 active .../vue-style-loader/lib/listToStyles.jsError [BrowserslistError]: /Users/kazuhisanoguchi/Desktop/ECapp contains both .browserslistrc and package.json with browsers    at /Users/kazuhisanoguchi/Desktop/ECapp/node_modules/browserslist/node.js:192:15
    at eachParent (/Users/kazuhisanoguchi/Desktop/ECapp/node_modules/browserslist/node.js:43:18)    at Object.findConfig (/Users/kazuhisanoguchi/Desktop/ECapp/node_modules/browserslist/node.js:172:20)    at Object.loadConfig (/Users/kazuhisanoguchi/Desktop/ECapp/node_modules/browserslist/node.js:126:37)    at browserslist (/Users/kazuhisanoguchi/Desktop/ECapp/node_modules/browserslist/index.js:194:22)
    at Browsers.parse (/Users/kazuhisanoguchi/Desktop/ECapp/node_modules/autoprefixer/lib/browsers.js:61:16)
    at new Browsers (/Users/kazuhisanoguchi/Desktop/ECapp/node_modules/autoprefixer/lib/browsers.js:52:30)
    at loadPrefixes (/Users/kazuhisanoguchi/Desktop/ECapp/node_modules/autoprefixer/lib/autoprefixer.js:70:24)
    at plugin (/Users/kazuhisanoguchi/Desktop/ECapp/node_modules/autoprefixer/lib/autoprefixer.js:81:24)
    at LazyResult.run (/Users/kazuhisanoguchi/Desktop/ECapp/node_modules/postcss/lib/lazy-result.js:277:20)
    at LazyResult.asyncTick (/Users/kazuhisanoguchi/Desktop/ECapp/node_modules/postcss/lib/lazy-result.js:192:32)
    at LazyResult.asyncTick (/Users/kazuhisanoguchi/Desktop/ECapp/node_modules/postcss/lib/lazy-result.js:204:22)
    at /Users/kazuhisanoguchi/Desktop/ECapp/node_modules/postcss/lib/lazy-result.js:197:27 {
  name: 'BrowserslistError',
  message: '/Users/kazuhisanoguchi/Desktop/ECapp contains both .browserslistrc and package.json with browsers',
  browserslist: true
}
 94% asset optimization                                                              

 ERROR  Failed to compile with 10 errors                                                         9:43:36

These dependencies were not found:

* !!vue-style-loader!css-loader?{"sourceMap":true}!../node_modules/vue-loader/lib/style-compiler/index?{
"vue":true,"id":"data-v-1a7aa2c6","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}
!../node_modules/vue-loader/lib/selector?type=styles&index=0!./defalt.vue in ./src/defalt.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/i
ndex?{"vue":true,"id":"data-v-c343a562","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap"
:true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Footer.vue in ./src/component
s/footer/Footer.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/i
ndex?{"vue":true,"id":"data-v-ed558de2","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap"
:true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Header.vue in ./src/component
s/header/Header.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-37b94ca2","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Hero.vue in ./src/components/hero/Hero.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-0806dc8f","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Registration.vue in ./src/components/model/Registration.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-4e775983","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Login.vue in ./src/components/model/Login.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7db86109","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./ProductsListContainer.vue in ./src/components/products_list/ProductsListContainer.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3195494a","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Products.vue in ./src/components/products_list/Products.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-70abfc34","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./_id.vue in ./src/views/product_detail/_id.vue
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-55649ea2","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./index.vue in ./src/views/user/wishlist/index.vue

To install them, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1a7aa2c6","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./defalt.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-c343a562","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Footer.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-ed558de2","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Header.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-37b94ca2","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Hero.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-0806dc8f","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Registration.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-4e775983","scoped":false,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Login.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7db86109","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./ProductsListContainer.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-3195494a","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Products.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-70abfc34","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./_id.vue !!vue-style-loader!css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-55649ea2","scoped":true,"hasInlineConfig":false}!sass-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./index.vue
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

ソースコード見てみましたが、
/src/components/CategoriesMenu.vueのページが

<template>
<div>
  <b-button-group vertical>
    <b-button>Cosmetics</b-button>
    <b-button>Toys</b-button>
    <b-button>Tech</b-button>
  </b-button-group>
</div>
</script>


のような感じになっているので、

<template>
<div>
  <b-button-group vertical>
    <b-button>Cosmetics</b-button>
    <b-button>Toys</b-button>
    <b-button>Tech</b-button>
  </b-button-group>
</div>
</template>


のように修正する。

main.jsの部分で

new Vue({
  el: '#default',
  rputer,
  components: { App },
  template: '<Default/>'
})


のような感じでrouterではなく、rputerになってしまっている。

App.vueの

<script>
import CategoriesMenu from './components/CategoriesMenu.vue'
import Header from './components/Header'
import MainPage from './components/MainPage'
export default {
  name: 'App'
}
</script>


の部分で

import Header from './components/Header'
import MainPage from './components/MainPage'


のファイルがない。

の部分で対応すればエラーについてはなくなると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/27 00:59

    初歩的なミスでした。ご指摘ありがとうございます。

    キャンセル

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

  • ただいまの回答率 87.94%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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