Windows10にVue CLIで新規プロジェクトを構築する

2022年1月30日

環境
Windows 10 64bit
(1).nodeバージョンを確認します
C:\>node -v
v14.18.3
(2).npmバージョンを確認します
C:\arkgametest>npm -v
6.14.15
(3).yarnバージョンを確認します
C:\arkgametest>yarn –version
1.22.17

Vue CLIで新規プロジェクト構築する方法
1.Vue CLIをインストールします

C:\>npm install -g @vue/cli
略
npm notice
npm notice New minor version of npm available! 8.3.0 -> 8.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.4.0
npm notice Run npm install -g npm@8.4.0 to update!
npm notice

2.vueインストールを確認します

C:\>vue --version
@vue/cli 4.5.15

3.Vue Cliの使い方

C:\>vue --help
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.

4.新規Vueプロジェクトを構築します
vue create project-name の形式で新規プロジェクトを作成できます。
実行例
C:\>vue create arkgametest
default と Manually select features を選択できます。
default を選択します。

Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features
  中略
 $ cd arkgametest
 $ yarn serve

5.開発環境を立ち上げます

C:\arkgametest>cd arkgametest

C:\arkgametest\arkgametest>yarn serve
yarn run v1.22.17
$ vue-cli-service serve
 INFO  Starting development server...
  DONE  Compiled successfully in 20410ms                                                                         12:09:10


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

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

6.動作確認
http://127.0.0.1:8080/
画面に「Welcome to Your Vue.js App」が表示されます。

7.defaultを選択した場合、package.jsonは以下の内容になりました。

{
  "name": "arkgametest",
  "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.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}