웹페이지 만들기 - Vue.js를 설치하자!
1. Vue 설치
- 프로젝트 생성하고 싶은 곳에 들어가서 명령프롬프트(cmd)창을 킨다.
- npm install vue 입력
C:\Users\Desktop\Project>npm install vue
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Desktop\Project\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Desktop\Project\package.json'
npm WARN Auth_HomePage No description
npm WARN Auth_HomePage No repository field.
npm WARN Auth_HomePage No README data
npm WARN Auth_HomePage No license field.
+ vue@2.6.12
added 1 package from 1 contributor and audited 1 package in 1.923s
found 0 vulnerabilities
2. vue-cli 설치
- npm install -g @vue/cli
C:\Users\Desktop\Project>npm install -g @vue/cli
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
C:\Users\82105\AppData\Roaming\npm\vue -> C:\Users\82105\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\@vue\cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @vue/compiler-sfc@3.0.4 requires a peer of vue@3.0.4 but none is installed. You must install peer dependencies yourself.
+ @vue/cli@4.5.9
added 4 packages from 1 contributor and updated 41 packages in 83.243s
vue설치는 끝이 났다!
3. 프로젝트 생성
- vue init webpack 프로젝트_이름
C:\Users\Desktop\Project>vue init webpack auth_project
- Enter를 치면 여러가지 질문들이 나오는데 저와 같은 경우는 이렇게 작성했고!
- ESLint가 필요하면 yes를 입력해주면 됩니다.
- 모든 것들을 다 입력하면 설치를 시작합니다!
? Project name auth_project
? Project description A Vue.js project
? Author 이름
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
4. 설치완료
- 설치가 완료되었으면 프로젝트가 만들어진 곳으로 이동해서 잘 깔렸는지 확인합시다!
C:\Users\Desktop\Project>cd auth_project
- 프로젝트가 존재하는 곳으로 이동한 후, 프로젝트를 돌려봅시다.
- npm run dev
- 성공적으로 빌드가 되면 http://localhost:8080에서 run하고 있다고 표시가 되죠!
- 웹페이지에서 주소를 치고 들어가면 웹페이지가 나옵니다!
LIST