CLI 설치하기
npm install -g @vue/cli-g 옵션으로 글로벌로 설치한다.
관리자 권한으로 위 명령어를 입력하거나 하면 이후로도 관리자 권한으로만 cli를 사용할 수 있으니, 원하는게 아니라면 일반 cmd나 PowerShell 등에서 입력하자(리눅스 유저라면 sudo 없이).
프로젝트 생성
vue create test프로젝트를 생성한다. test가 프로젝트 명이다.
Default Vue 2를 선택한다.
vuetify는 vue 2에 호환된다.
Vue CLI v4.5.9
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
아래와 같이 출력되면 설치가 프로젝트 생성이 끝났다.
Vue CLI v4.5.9
✨ Creating project in D:\workspace_js\test.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
[ ......] \ finalize:yallist: sill finalize D:\workspace_js\test\node_modules\yallist
...
found 0 vulnerabilities
🚀 Invoking generators...
📦 Installing additional dependencies...
added 53 packages from 36 contributors and audited 1299 packages in 9.591s
62 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project test.
👉 Get started with the following commands:
$ cd test
$ npm run serve
Vuetify 설치
test 프로젝트로 이동해서 vuetify를 설치한다.
cd test
vue add vuetify
아래와 같은 창이 나오면 Default를 선택한다.
PS D:\workspace_js\test> vue add vuetify
📦 Installing vue-cli-plugin-vuetify...
+ vue-cli-plugin-vuetify@2.0.9
added 9 packages from 11 contributors and audited 1308 packages in 7.642s
62 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
✔ Successfully installed plugin: vue-cli-plugin-vuetify
? Choose a preset: (Use arrow keys)
> Default (recommended)
Prototype (rapid development)
Configure (advanced)
아래와 같이 출력되면 설치가 완료된 것이다.
🚀 Invoking generator for vue-cli-plugin-vuetify...
📦 Installing additional dependencies...
added 7 packages from 5 contributors and audited 1315 packages in 7.563s
64 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify
vuetify Discord community: https://community.vuetifyjs.com
vuetify Github: https://github.com/vuetifyjs/vuetify
vuetify Support Vuetify: https://github.com/sponsors/johnleider
PS D:\workspace_js\test>
vue 실행
실행 명령어를 입력한다.
npm run serve
아래와 같이 출력되면 성공한 것이다.
필자의 서버에 8080, 8081 포트는 다른 것으로 사용하고 있어서 자동적으로 8082포트가 잡혔다.
DONE Compiled successfully in 12808ms 22:15:48
App running at:
- Local: http://localhost:8082/
- Network: http://192.168.0.2:8082/
Note that the development build is not optimized.
To create a production build, run npm run build.
브라우저에 http://localhost:8082을 입력해보자.
정상적으로 접속되는 것을 확인할 수 있다.
'Web > Vuejs' 카테고리의 다른 글
| Vue에서 환경 변수 사용하기 (0) | 2020.12.31 |
|---|