まずはnpmがインストールされているのかを確認。
npm -v
terminal
npm -v
10.1.0
Vue CLIの公式 に記載されているインストールコマンドを実行
npm install -g @vue/cli
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
which vue
/Users/ユーザ名/.npm-global/bin/vue
pathの設定
terminal
export PATH=$PATH:/Users/ユーザ名/.npm-global/bin
echo 'export PATH=/Users/ユーザ名/.npm-global/bin:$PATH' >> .bash_profile
最後にインストールできているのかを確認
vue --version
terminal
vue --version
@vue/cli 5.0.8
プロジェクト作成
プロジェクトを作成するディレクトリへ移動した後に。。
vue create vue2-chat
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
ls
front-dev-tutorial-master vue-chat vue2-chat vue3
起動
プロジェクトのディレクトリに移動した後、
npm run serve
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/にアクセスして。。。
Vueの画面が表示されればOK!