이번 글에서는 이클립스에서 Vue.js를 사용할 때 npm에 올라가 있는 최신 버전을 반영하기 위해 CDN을 설정하는 방법에 대해 글을 기록한다. 이전 글에서는 Vue.js를 위한 개발 환경 세팅에 대한 글을 작성했는데, 설치를 완료하고 개발 환경 세팅부터 해야 한다면 아래의 링크에 접속하여 진행하면 된다.
2023.04.18 - [IT/Vue.js] - [Vue.js] 이클립스에서 Vue.js 개발 환경 세팅하는 방법
[Vue.js] 이클립스에서 Vue.js 개발 환경 세팅하는 방법
이번 글에서는 이클립스에서 Vue.js 개발 환경 세팅하는 방법에 대해 글을 기록한다. 이전 글에서는 Vue.js를 위한 개발 환경 설치에 대한 글을 작성했는데, 설치부터 해야 한다면 아래의 링크에 접
yongku.tistory.com
목차
1. 이클립스에서 프로젝트 생성
2. Web Browser 설정
3. Apache Tomcat 설정
1. 이클립스에서 프로젝트 생성
이클립스에서 Dynamic Web Project를 생성하여 CDN을 import 할 것이다.
1) [File] - [New] - [Dynamic Web Project]를 눌러 프로젝트를 생성한다.
2) 프로젝트 이름을 설정하고 Finish를 누른다.
- 프로젝트 이름 : HelloVue
3) Webcontent에 해당하는 webapp에서 오른쪽 클릭 후, [New] - [HTML File]을 눌러 새로운 파일을 생성한다.
4) HTML 파일 이름을 설정하고 Finish를 누른다.
- HTML 파일 이름 : index
5) 파일을 생성하면 아래와 같이 index.html이 나온다.
6) 이제, 이 index.html에 CDN을 설정을 하면 되는데, 아래의 링크를 복사한다.
- URL : https://unpkg.com/vue
7) 복사 후, index.html에서 <head> 태그 안에 <script></script> 태그를 생성하여 src 속성 안에 위의 URL을 넣는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
</body>
</html>
8) 테스트를 한다.
- 아래와 같이, <body> 태그 안에 test01이라는 ID를 가진 div를 생성하고, 그 안에 {{msg}}를 생성한다.
- 그리고, script를 만드는데, window.onload 함수를 생성해서, test01View라는 Vue 객체를 생성하여 el을 test01 div를 가져오고, 그 안에 데이터 msg를 넣어준다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<script>
window.onload = function(){
var test01View = new Vue({
el : '#test01',
data : {
msg : '어? 금지'
}
})
}
</script>
</head>
<body>
<div id="test01">
<h1>{{msg}}</h1>
</div>
</body>
</html>
9) 실행한다.
- 실행을 했는데 다음과 같은 에러가 발생했다.
caught TypeError: Vue is not a constructor
위의 문제는 아래의 링크에서 해결 할 수 있다.
일단 이 문제는 Vue2와 Vue3에 대한 문법 차이 때문에 발생한 에러다.
우리가 지금 작성한 코드는 Vue2에 해당하는 문법이라 Vue2를 사용하기 위한 CDN 버전 명시를 해줘야 한다.
2023.04.25 - [IT/Vue.js] - [Vue.js] Vue.js에서 CDN caught TypeError: Vue is not a constructor 에러 해결 방법
[Vue.js] Vue.js에서 CDN caught TypeError: Vue is not a constructor 에러 해결 방법
이번 글에서는 이클립스에서 Vue.js를 사용할 때 npm에 올라가 있는 최신 버전을 반영하기 위해 CDN을 설정하다가 발생한 caught TypeError: Vue is not a constructor 에러 해결 방법에 대해 글을 기록한다. 목
yongku.tistory.com
10) 위의 문제를 해결한 후 실행하면 아래와 같이 나온다.
11) 위의 문제를 Vue2가 아닌 Vue3로 해결하고 싶으면 아래와 같이 변경하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="test01">{{msg}}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
msg : '어? 금지'
}
}
}).mount('#test01')
</script>
</body>
</html>
'IT > Vue.js' 카테고리의 다른 글
| [Vue.js] 'vue-cli-service'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 문제 해결 방법 (0) | 2023.10.19 |
|---|---|
| [Vue.js] Vue.js 동작 순서 정리 (0) | 2023.10.18 |
| [Vue.js] 윈도우 10(Window 10) Vue.js 설치하기 (1) | 2023.10.16 |
| [Vue.js] 이클립스에서 Vue.js template 설정하는 방법 (0) | 2023.05.09 |
| [Vue.js] Vue.js에서 CDN caught TypeError: Vue is not a constructor 에러 해결 방법 (1) | 2023.04.25 |
| [Vue.js] 이클립스에서 Vue.js 개발 환경 세팅하는 방법 (0) | 2023.04.18 |
| [Vue.js] 윈도우 10(Windows 10)에서 Vue.js 설치하는 방법 (0) | 2023.04.18 |
| [Vue.js] Vue.js란? (0) | 2023.04.18 |
최근댓글