입문자에게 권장된다.
다른 프론트 프레임워크중 쉬운 편에 속한다.
Vue.js 3버전 공식 사이트: 시작하기 | Vue.js (vuejs.org)
시작하기 | Vue.js
시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신가요? Migration Guide를 확인하세요! Vue.js가 무엇인가요? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를
v3.ko.vuejs.org
간단하게 문법정도만 확인할 경우 CDN을 이용하여 사용할 수 있고
<script src="https://unpkg.com/vue@next"></script>사용 예제
제대로 Vue.js를 사용하기 위해서는 npm을 사용하는 것이 좋다
# latest stable
$ npm install vue@next.
Vue.js는 CLI를 지원하기 떄문에 빠르게 구축하는 것이 가능하다.
Vue CLI
cli.vuejs.org
명령어: npm install -g @vue/cli
본인이 원하는 위치로 이동
Vue.js 프로젝트 파일 생성
VsCode에서 powershell에서 입력하면 아래와 같은 에러메시지가 발생할 수도 있다.
vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\vue.ps1 파일을 로드할 수 없습니다.나의 경우에는 command에서 계속 진행을 하였다.
프로젝트 생성 명령어: vue create vue3-test
경로를 확인해보면 프로젝트 폴더가 생성된 것을 확인할 수 있다.
package.json 파일 확인
- serve: 개발서버를 오픈할 때 사용 (dev와 동일) -> npm run serve
- build: 제품화할 때 사용 -> npm run build
- lint: vue.js코드가 규칙에 맞게 잘 작성되었는지 확인할 때 사용
지원하고 있는 브라우저 목록
vue 파일의 하이라이팅기능을 사용하기위해서 확장자를 설치해준다.
프로젝트 구조
Webpack을 이용해서 Vue.js 시작
이전에 webpack 설정을 진행했던 저장소 폴더를 이용
프로젝트 구조
src 폴더를 생성하고 그 안에 App.vue, main.js 파일을 생성한다.
그 후 vue.js를 사용하기 위해서 npm 을 설치한다
vue확장자 코드를 해석하기 위한 명령어: npm i vue@next
계속해서 vue 확장자 파일을 프로젝트에서 관리하기 위해 설치 진행
vue파일을 브라우저에서 동작하게 해주는 명령어: npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc
webpack.config.js 파일 수정
vue확장자 파일을 해석해서 vue-loader가 동작하도록 설정
vue-style-loader를 이용하여 스타일 부분이 해석되도록 설정
상단으로 이동하여 플러그인 가져오기
생성자를 이용하여 플러그인 사용
테스트 코드 작성
App.vue
<template>
<h1>{{message}}</h1>
</template>
<script>
export default {
data () {
return {
message: 'Hello Vue!!!'
}
}
}
</script>
main.js
// vue 패키지 가져오기
import {createApp} from 'vue'
// App.vue 파일 가져오기
import App from './App.vue'
// app이라는 jid값의'
createApp(App).mount('#app');
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<!-- <link rel="stylesheet" href="./css/main.css"> -->
<script src="js/main.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- <h1>Hello Webpack!!</h1> -->
<!-- 최종적으로 dist폴더내에 생성되기 때문에 아래와 같은 경로로 지정해주었다. -->
<!-- <img src="./images/image.jpg" alt="image" /> -->
</body>
</html>화면 확인
vue, js 확장자를 가진 파일은 확장자를 명시하지 않아도 정상적으로 동작하도록 설정
webpack.config.js파일
main.js 파일에서 vue확장자를 제거한다.
확인 -> 정상적으로 동작한다.
파일을 읽을 수 있도록 설정하는 방법
파일을 읽어올수 있도록 webpack의 로더 패키지를 설치
명령어: npm i -D file-loader
webpack.config.js 파일 수정
js설정 뒷부분에 추가
경로별칭 사용
아래와 같이 폴더 생성 및 이미지 파일 이동
src 폴더 밑에 assets폴더를 생성하고 이미지파일은 넣어준다.
components폴더를 생성하고 vue파일을 생성한다.
HelloWorld.vue
<template>
<img src="~assets/image.jpg" alt="" srcset="">
</template>App.vue
<template>
<h1>{{message}}</h1>
<HelloWorld/>
</template>
<script>
// vue파일 가져오기
import HelloWorld from '~/components/HelloWorld'
export default {
components: {
HelloWorld
},
data () {
return {
message: 'Hello Vue!!!'
}
}
}
</script>'프론트엔드 > Vue.js' 카테고리의 다른 글
| 템플릿 문법 (0) | 2021.07.20 |
|---|---|
| 인스턴스와 라이플사이클 예제 (0) | 2021.07.19 |
| 조건문과 반복문 (0) | 2021.07.15 |
| 선언적 랜더링과 입력 핸들링 (0) | 2021.07.14 |
| Web Pack Template - ESLint (0) | 2021.07.13 |
