[Vue.js] Vue.js Upgrade ( 2.9.x -> 3.x ) 후 개발환경 구축

-g 옵션 : global 옵션이라고 합니다.
관리자 권한으로 설치해야 합니다.
관리자 권한임에도 불구하고, 아래와 같은 오류가 발생합니다.

C:\project\workspace\vuesample>vue --version
2.9.6

C:\project\workspace\vuesample>npm install -g @vue/cli
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
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
npm ERR! code EEXIST
npm ERR! path C:\Program Files\nodejs\vue
npm ERR! EEXIST: file already exists
npm ERR! File exists: C:\Program Files\nodejs\vue
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[사용자계정]\AppData\Local\npm-cache\_logs\2022-07-18T15_46_35_910Z-debug-0.log

 

그냥 삭제하고, 3.x버전을 설치하는게 좋을 것 같습니다.

당연히 관리자 권한으로 설치해야 합니다.

C:\project\workspace\vuesample>npm uninstall -g vue-cli
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

removed 245 packages, and audited 1 package in 686ms

found 0 vulnerabilities

C:\project\workspace\vuesample>npm install @vue/cli -global
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
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 848 packages, and audited 849 packages in 47s

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

4 vulnerabilities (2 moderate, 2 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

C:\project\workspace\vuesample>vue --version
@vue/cli 5.0.8

최신버전이 5.0.8 이네요.

> vue create vue-todo

Default ([Vue 3] babel, eslint) 선택합니다.

C:\project\workspace\vuesample>vue create vue-todo
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features 
  
Vue CLI v5.0.8
✨  Creating project in C:\project\workspace\vuesample\vue-todo.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
[#######...........] - idealTree:vue-style-loader: sill fetch manifest universalify@^2.0.0

🚀  Invoking generators...
📦  Installing additional dependencies...

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

added 95 packages in 9s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-todo.
👉  Get started with the following commands:

 $ cd vue-todo
 $ npm run serve

정상 처리되면, 아래와 같이 생성됩니다.

---

또 다른 방법은..

C:\project\workspace\vuesample>vue init webpack-simple vue-todo

? Project name vue-todo
? Project description A Vue.js project
? Author jongyoung.park <hermeswing@naver.com>
? License MIT
? Use sass? No

   vue-cli · Generated "vue-todo".

   To get started:

     cd vue-todo
     npm install
     npm run dev


C:\project\workspace\vuesample>cd vue-todo

C:\project\workspace\vuesample\vue-todo>npm i
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
[#######...........] \ idealTree:cliui: sill fetch manifest read-pkg@^2.0.0

added 872 packages, and audited 873 packages in 27s

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

59 vulnerabilities (46 moderate, 10 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

C:\project\workspace\vuesample>npm run dev

http://localhost:8080/ 아래와 같이 보여집니다.

 

---

https://hermeslog.tistory.com/586?category=1083598 

[Vue.js] Spring Boot + Vue.js 개발환경 셋팅

---

출처 : 캡틴판교 중급강좌