常連

### 実現したいこと
VSCode上でVue CLIを動かし、プロジェクトを作成したいです。

### 発生している問題・分からないこと
vueをインストール後、`vue create hello-vue `でそのままテストプロジェクトを作成しようとしたところエラーが吐かれました。
hello-vueのフォルダ以下様々なファイルは作成されているようですが、createが完了できていないのでしょうか。ビルドももちろん通りませんでした。


### エラーメッセージ
```error

  0:0  error  Parsing error: [BABEL] /home/~~~/hello-vue/babel.config.js: Unexpected token '.' (While processing: "/home/~~~/hello-vue/node_modules/@vue/cli-plugin-babel/preset.js")


  0:0  error  Parsing error: [BABEL] /home/~~~/hello-vue/src/App.vue: Unexpected token '.' (While processing: "/home/~~~/hello-vue/node_modules/@vue/cli-plugin-babel/preset.js")


  0:0  error  Parsing error: [BABEL] /home/~~~/hello-vue/src/components/HelloWorld.vue: Unexpected token '.' (While processing: "/home/~~~/hello-vue/node_modules/@vue/cli-plugin-babel/preset.js")


  0:0  error  Parsing error: [BABEL] /home/~~~/hello-vue/src/main.js: Unexpected token '.' (While processing: "/home/~~~/hello-vue/node_modules/@vue/cli-plugin-babel/preset.js")

  0:0  error  Parsing error: [BABEL] /home/~~~/hello-vue/vue.config.js: Unexpected token '.' (While processing: "/home/~~~/hello-vue/node_modules/@vue/cli-plugin-babel/preset.js")
```

### 該当のソースコード

```package.json
{
  "name": "hello-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
AIに聞いてみたところ、babelのバージョンが合っていない旨を聞きましたが、提案されたコマンド
`rm -rf node_modules`
`rm package-lock.json`
`npm cache clean --force`
`npm install`
を試しても変化ありませんでした。

`npm update -g @vue/cli`も試しましたが変化ありませんでした。

一度アンインストールして再インストールも試しましたが同じ上記のエラーが再発しています。

### 補足
createの途中でエラーになる質問が見当たらなかったため、こちらにて質問させていただきました。
vueほかweb関連は初心者なため、知識をご教授いただけますと幸いです。
不足情報がありましたらコメント等お願いいたします。

環境
OS:Ubuntu 22.04.5 LTS
VSCode
@vue/cli 5.0.8

`npm outdated`を実行しても、以下の内容しか出てこないのですが、関係ありますでしょうか？
Package            Current  Wanted  Latest  Location                        Depended by
eslint              7.32.0  7.32.0  9.12.0  node_modules/eslint             hello-vue
eslint-plugin-vue    8.7.1   8.7.1  9.29.0  node_modules/eslint-plugin-vue  hello-vue

Vue.jsをインストール後createしただけでエラーが出ました

### 実現したいこと
タブを切り替えた際にデータとして保持している項目も切り替えたいです。

### 発生している問題・分からないこと
標準項目とその他項目のそれぞれタブがあり、それぞれデータが割り当てられています。

ただ、タブを切り替えた際にデータの内容を切り替える方法がわからず、有識者の方にお伺いできればと思います。



### 該当のソースコード

```Vue.js
            <el-tabs v-model="itemActiveTab" type="card">
              <el-tab-pane label="項目1" name="項目1" key="項目1">
                <template #label>
                  <div style="width: 200px; text-align: center">
                    {{ $t("mm.operational_status.select_params.items") }}
                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane label="項目2" name="項目2" key="項目2">
                <template #label>
                  <div style="width: 200px; text-align: center">
                    {{ $t("mm.operational_status.select_params.other_items") }}
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>
・・・・・・
import CustomDialog from "@/components/CustomDialog";
import {
  // getAssetGraphItemData,
  // addTrendGraphData,
  getGraphMasterData,
  updateGraphMasterData,
} from "@/resources/services/support";
import _ from "lodash";
import { ElMessage } from "@/resources/utils/message";
import { mapGetters } from "vuex";

export default {
  name: "asset-status-line-select-params",
  components: {
    CustomDialog,
  },
  props: { dialog: Object, majorItemMap: Object },
  data() {
    return {
      subActiveTab: "",
      activeTab: 10,
      itemActiveTab: "項目1",
      tabs: [
        {
          name: "mm.operational_status.select_params.default",
          type: 10,
          data: [],
        },
        {
          name: "mm.operational_status.select_params.self",
          type: 20,
          data: [],
        },
        {
          name: "mm.operational_status.select_params.share",
          type: 30,
          data: [],
        },
      ],
      list: {
        loading: false,
        data: [],
        spanNumber: [], // span table column
      },
      deleteDialog: {
        visible: false,
        title: "mm.operational_status.select_params.delete_dialog.title",
      },
      basicGraphList: [],
      changedKeys: [],
      disableAdd: false,
      isAdd: false,
      isInit: false,
    };
  },
  computed: {
    showFooter() {
      return (
        [...this.tabs[0].data, ...this.tabs[1].data, ...this.tabs[2].data]
          .length > 0
      );
    },
    ...mapGetters("user", ["userInfo"]),
    currentData() {
      return this.tabs
        .find((item) => item.type === this.activeTab)
        ?.data?.find(
          (item) => item.trendGraphTemplateMasterUniqueKey === this.subActiveTab
        );
    },
    dialogInner: {
      get() {
        return this.dialog;
      },
      set(val) {
        this.$emit("update:dialog", val);
      },
    },
    checkedList() {
      const data = this.currentData.listData.data;
      return data?.filter((v) => v.isCheck) || [];
    },
    majorItemGroup() {
      return _.groupBy(this.checkedList, (v) => v.majorItem);
    },
    majorItemLength() {
      return Object.keys(this.majorItemGroup).length;
    },
    minorItemLength() {
      const group = _.groupBy(this.checkedList, (v) => v.minorItem);
      return Object.keys(group).length;
    },
  },
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
ChatGPTなどに聞いて試してみましたがJavaで保有している内容は実現できなかったです。

### 補足
特になし

Vue.jsでイベントごとにデータを切り替える方法を知りたい

Vue.js初心者です。

axiosを使用して通信するところでエラーが出てしまいます。
```ここに言語を入力
Access to XMLHttpRequest at 'http://test.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
```

調べると結構出てきたので、試してみましたが上手くいきませんでした。
自分の理解が低く、理解できないところもありました。
https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf
https://qiita.com/att55/items/2154a8aad8bf1409db2b#simple-request-%E3%81%A8-preflight-request-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
https://b1tblog.com/2019/11/03/vue-axios/
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
https://teratail.com/questions/140784

```vue
<script>
import axios from 'axios';

export default {
  data() {
    return {
      term: '',

    }
  },
  methods: {
    async exe() {
      this.$emit('loadStart')
      const headers = {'Access-Control-Allow-Origin': '*'}
      const { data } = await axios.get('//test.com/', {headers});
      this.$emit('loadComplete', { results: data.results})
    }
  }
}
</script>
```

試した事
```ここに言語を入力
import axios from 'axios';
axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*'
```
vue.config.jsを作成して
https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf
```ここに言語を入力
module.exports = {
  devServer: {
    proxy: {
      "/api/": {
        target: "http://localhost:8080",
      }
    }
  }
};

vueのファイル
/api/を追加
const headers = {'Access-Control-Allow-Origin': '*'}
const { data } = await axios.get('/api/test.com/', {headers});

↓
404 (Not Found)
設定がうまう行ってないのか
```
dataに設定してthis.で呼び出し
https://teratail.com/questions/140784
```ここに言語を入力
export default {
  data() {
    return {
      term: '',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': '*',
      }
    }
  },
  methods: {
    async exe() {
      this.$emit('loadStart')
      const { data } = await axios.get('//test.com/', {headers: this.headers});
      this.$emit('loadComplete', { results: data.results})
    }
  }
}

↓

Access to XMLHttpRequest at test.com from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
```

```ここに言語を入力
web上のrequest headers
Access-Control-Allow-Origin: *の設定はされていました。
```

自分の力では解決する事ができませんでした。
どなたか知恵を貸していただきたいです。

よろしくお願いします。

vue/cli 4.3.1

Vue.jsでaxiosを使った通信でCORS policyで止められる

Vue CLIを使った環境構築をしようと思い、「npm run serve」で立ち上げるところまではできたのですが、その後終了する方法がわかりません。

[Cmd + C]などは試したのですが、終了してくれない状況です。

どなたかご存知の方、ご教示いただけましたら幸いです。m(_ _)m

Vue CLIを「npm run serve」で立ち上げた後、Macのターミナルでの終了方法がわかりません。

### 前提・実現したいこと

vue.jsでwebシステムの開発を行っています。
昨日からnpm run serveを実行すると下記のエラーが表示されます。
何かわかることがあればご指摘お願い致します。

### 発生している問題・エラーメッセージ

```
'vue-cli-service' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reportsystem@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reportsystem@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Demo\AppData\Roaming\npm-cache\_logs\2019-10-25T08_39_37_0
12Z-debug.log
```

### 該当のソースコード

```
ソースコード
```

### 試したこと

思い当たることとして直前に copy-webpack-plugin のインストールを行っていたため当該プラグインの削除を行いました。
またnode.jsとnpmのバージョンアップを行ってみました。
node.js : 10.16.0 → 12.13.0
npm : 4.0.5 → 6.12.0

### 補足情報（FW/ツールのバージョンなど）
package.jsonは以下の通りです。

{
  "name": "reportsystem",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-ui": "^2.4.5",
    "firebase": "^6.2.0",
    "firebase-admin": "^8.3.0",
    "moment": "^2.24.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

npm run serveでエラーになる

vue.jsでvueCLIで新しくファイルを作り、viewsという階層にNew.vueというコンポーネントファイルを作ったらエラーになりました。

views
→AboutView.vue
→HomeView.vue
→**New.vue**

エラー内容は
Component name "New" should always be multi-word  vue/multi-word-component-names
という内容です。

以下がindex.jsファイルです。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {  
    path: '/new',
    name: 'new',
    component: () => import(/* webpackChunkName: "new" */'../views/New.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

わかる方ご教授お願いします。

vueCLIで作ったファイルで、viewsという階層に新しくNew.vueというコンポーネントを作ったらエラーがでました。

Vue-cliで開発する学習をしているのですが、ローカルサーバーが起動しなくなりました。
以下に試したことを記載します。
解決策をご存知の方、アドバイスいただけると幸いです。

## 試したこと
```bash
yarn serve
yarn run v1.15.2
$ vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin 
```
上記のyarnコマンドでyarnを起動しようとすると以下のエラーが表示されます。

### エラー表示
```bash
 ERROR  Failed to compile with 1 errors                                                                       23:05:27

This dependency was not found:

* core-js/modules/es6.function.name in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/
lib!./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-l
oader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save core-js/modules/es6.function.name
^C
MacBook-Pro:practice_vue_firebase user$ npm install --save core-js/modules/es6.function.name
npm ERR! code ENOLOCAL
npm ERR! Could not install from "core-js/modules/es6.function.name" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2019-04-17T14_05_46_073Z-debug.log

```

npmをインストールしてくださいと表示されているので記載の「npm install --save」コマンドを実行すると、そんなファイルはないよ、みたいなエラーが表示されます。

### そのほか
・nodemoduleとpackage.jsonを一度消してみて再実行もやってみましたが事象は解決されずでした。

Vue,jsのローカルサーバーがThis dependency was not found表示で起動できない

# 1.実現したいこと・つまづいた点
【最終目的】vue3にtailwind cssを導入するために、まずはVue CLIを使ってVueのプロジェクトを立ち上げたい
⇒【つまづき】`npm run serve`でエラーが発生したので、原因を明らかにしたい

# 2.手順・エラーメッセージ

1.コマンドプロンプトを開き、プロジェクトを作成【成功】
```
$ vue create vue-test
```
2.設定は`Default`3系を選択【成功】
```
Vue CLI v5.0.3
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
```
3.プロジェクトを作成、`cd vue-test`でディレクトリを移動し、`npm run serve`でローカルサーバーを起動する【失敗】

**エラー画面**
![コマンドプロンプトのエラー表記](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-21/fd81d272-02c5-4fa0-b6df-c6e184cb7b3e.jpeg)

**エラーメッセージ**
```
 ERROR  Failed to compile with 1 error
 error  in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css
Syntax Error: TypeError: Cannot read properties of undefined (reading 'config')
```
**エラーメッセージ全体**
```
C:\Users\name\vue-test>npm run serve

> vue-test@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 ERROR  Failed to compile with 1 error                                                                          

 error  in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css

Syntax Error: TypeError: Cannot read properties of undefined (reading 'config')


ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (C:\Users\name\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:81:62)
    at C:\Users\name\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:124:92
    at C:\Users\name\node_modules\tailwindcss\lib\processTailwindFeatures.js:43:11
    at plugins (C:\Users\name\node_modules\tailwindcss\lib\index.js:20:104)
    at LazyResult.runOnRoot (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:339:16)
    at LazyResult.runAsync (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:393:26)
    at LazyResult.async (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:221:30)
    at LazyResult.then (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:206:17)
 @ ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css 4:14-323 15:3-20:5 16:22-331
 @ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css 1:0-381 1:0-381
 @ ./src/App.vue 5:0-62
 @ ./src/main.js 2:0-28 3:10-13

ERROR in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (C:\Users\name\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:81:62)
    at C:\Users\name\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:124:92
    at C:\Users\name\node_modules\tailwindcss\lib\processTailwindFeatures.js:43:11
    at plugins (C:\Users\name\node_modules\tailwindcss\lib\index.js:20:104)
    at LazyResult.runOnRoot (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:339:16)
    at LazyResult.runAsync (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:393:26)
    at LazyResult.async (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:221:30)
    at LazyResult.then (C:\Users\name\vue-test\node_modules\postcss\lib\lazy-result.js:206:17)
 @ ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css 4:14-354 15:3-20:5 16:22-362
 @ ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css 1:0-415 1:0-415
 @ ./src/components/HelloWorld.vue 5:0-81
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js 1:0-53 5:4-14
 @ ./src/App.vue?vue&type=script&lang=js 1:0-189 1:0-189 1:190-368 1:190-368
 @ ./src/App.vue 2:0-54 3:0-49 3:0-49 8:49-55
 @ ./src/main.js 2:0-28 3:10-13

webpack compiled with 2 errors

```

# 4.自分で調べたことや試したこと
初めてVue.jsで開発を始めようと思い、[こちらのQilta](https://qiita.com/inouuuuuuu/items/c6e509be909fa2940fdd)を参考に作業環境を整えようとしていました。
関連ツールのバージョンを最新にしたり、エラーメッセージのファイルを確認したり、類似の質問を確認しましたが、解決に至ることができませんでした。
根本的なものを誤っている可能性もあるのですが、自分では気付けそうにないので、お力添えいただけると幸いです。

# 5.使っているツールのバージョンなど補足情報

- デバイス：Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz   4.00 GHz
- OS：Windows 10 Pro / バージョン21H2
- Vue：@vue/cli 5.0.3
- npm：@8.5.0
- node：@v16.14.2

$npm list vue
vue@3.2.31
@vue/server-renderer@3.2.31
 vue@3.2.31 deduped



