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

Question

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

下記のリンクを参考に、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

Answer 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'

のファイルがない。

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

Comments

[Swedon]

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