Windows10にVue CLIで新規プロジェクトを構築する
環境
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" ] }