Vue CLI 를 사용하기 위해서 https://cli.vuejs.org/guide/installation.html 에 접속해서 명령어를 확인하고,
비주얼 스튜디오 코드에서 터미널을 열어 해당 명령어들을 실행해준다.
npm install -g @vue/cli
# OR
yarn global add @vue/cli
뷰 버전이 4가 넘어가면 defaule( ver2) 로 설정해주어야 한다.
🎉 Successfully created project vue-cli.
👉 Get started with the following commands:
$ cd vue-cli
$ npm run serve
gayoung@yungayeong-ui-MacBookAir learn-vue-js-master % cd vue-cli
gayoung@yungayeong-ui-MacBookAir vue-cli % npm run serve
> vue-cli@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 1131ms 오후 3:00:06
App running at:
- Local: http://localhost:8080/
- Network: http://172.20.10.2:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
이런 문구가 뜨면 설치 성공!
설치가 완료되면 디렉토리에 이러한 파일들이 생성된다.
npm(node project manager) run serve로 로컬 서버를 실행했을 때, 이 npm이 바라보는 설정파일이 바로 저 package.json이다.
public 폴더 내에 index.html을 열어보면,
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>app 태그가 구현되어 있고, 나머지 파일들은 주입될 것이라는 주석이 있다. 저 file들은 웹팩에 의해 관리된다.
기존에 화면을 구성할 때
1. 뷰 인스턴스를 생성하고
2. app div에 인스턴스를 주입해주고
3. app div 내 components를 생성했었는데
이 작업이 Vue CLI에서는
1. 뷰 인스턴스를 생성하고 > main.js
2. app div에 인스턴스를 주입해주고 > index.html
3. app div 내 components를 생성했었는데 > App.vue
에서 작업되는 것 같다.
.vue 파일은 싱글 파일컴포넌트로
<template>
<!--HTMLq-->
</template>
<script>
export default {
// JAVASCRIPT
}
</script>
<style>
//CSS
</style>
이러한 구조를 가지고 있다.
해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.
'Study > Vue' 카테고리의 다른 글
| Vue.js 시작하기 12. 사용자 입력 폼 만들기 (0) | 2022.01.23 |
|---|---|
| Vue.js 시작하기 11. 싱글컴포넌트 사용하여 개발 시작하기 (0) | 2022.01.22 |
| Vue.js 시작하기 09. Watch (0) | 2022.01.22 |
| Vue.js 시작하기 08. 템플릿 (0) | 2022.01.22 |
| Vue.js 시작하기 07. HTTP 통신 라이브러리 - axios (0) | 2022.01.22 |