Vue CLIでVueプロジェクトを作成

まずはnpmがインストールされているのかを確認。
`npm -v`
```terminal:terminal
npm -v

10.1.0
```

[Vue CLIの公式](https://cli.vuejs.org/guide/installation.html) に記載されているインストールコマンドを実行
`npm install -g @vue/cli`

```terminal:terminal
npm install -g @vue/cli

npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated apollo-datasource@3.3.2: The `apollo-datasource` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated apollo-server-plugin-base@3.7.2: The `apollo-server-plugin-base` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated apollo-server-errors@3.3.1: The `apollo-server-errors` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-types@3.8.0: The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated apollo-server-env@4.2.1: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-reporting-protobuf@3.4.0: The `apollo-reporting-protobuf` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/usage-reporting-protobuf` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md

added 855 packages in 39s

71 packages are looking for funding
  run `npm fund` for details
```

めちゃめちゃ『deprecated』って出ているけど、WARNなので無視でOK。



# パスを通す

`which vue`コマンドでそのコマンドがどこにあるかを確認できる。
```terminal:terminal
which vue
/Users/ユーザ名/.npm-global/bin/vue
```


pathの設定
```terminal:terminal
export PATH=$PATH:/Users/ユーザ名/.npm-global/bin
echo 'export PATH=/Users/ユーザ名/.npm-global/bin:$PATH' >> .bash_profile
```


最後にインストールできているのかを確認
`vue --version`
```terminal:terminal
vue --version

@vue/cli 5.0.8
```

# プロジェクト作成
プロジェクトを作成するディレクトリへ移動した後に。。
`vue create vue2-chat`
```terminal:terminal
vue create vue2-chat

〜省略〜

🎉  Successfully created project vue2-chat.
👉  Get started with the following commands:

 $ cd vue2-chat
 $ npm run serve
```

lsコマンドでディレクトリが作成されていたらOK
```terminal:terminal
ls

front-dev-tutorial-master	vue-chat			vue2-chat			vue3
```

# 起動
プロジェクトのディレクトリに移動した後、
`npm run serve`
```terminal:terminal
npm run serve

> vue2-chat@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 1339ms                                                                                                 7:07:46


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.218:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

```

ブラウザで[ http://localhost:8080/]( http://localhost:8080/)にアクセスして。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3113801/61a4911f-8027-69f8-7fdc-4d01d1874f57.png)
Vueの画面が表示されればOK!