Windows10でVue3環境をインストールする
環境情報
Windows10 64 bit
node –version v17.1.0
npm –version 8.1.2
操作方法
1. @vue/cliインストール
>npm install -g @vue/cli
2. vueバージョン確認
>vue –version
@vue/cli 4.5.15
3.package.jsonを作成します
C:\>cd vue
C:\vue>npm init
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (vue) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to C:\vue\package.json: { "name": "vue", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes)
4.アップグレードを行う
C:\vue>vue upgrade --next ✔ Gathering package information... DONE Seems all plugins are up to date. Good work!
5.プロジェクトを作成します
C:\vue>vue create vuearkgame 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 「Default (Vue 3)」を選択し、enterキーを押下します。 Vue CLI v4.5.15 ? Please pick a preset: Default ([Vue 2] babel, eslint) > Default (Vue 3) ([Vue 3] babel, eslint) Manually select features 「Use Yarn」を選択し、enterキーを押下します。 略 $ cd vuearkgame $ yarn serve
6.Vue3を起動します
> cd vuearkgame > yarn serve
エラーメッセージ
Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10)
解決方法
C:\vue\vuearkgame>set NODE_OPTIONS=–openssl-legacy-provider
再度Vue3を起動します
> yarn serve DONE Compiled successfully in 7694ms 9:53:21 App running at: - Local: http://localhost:8080/ - Network: http://172.17.100.15:8080/ Note that the development build is not optimized. To create a production build, run yarn build.
7.画面確認
http://localhost:8080/
http://172.17.100.15:8080/