■■▶뷰_Vue.js◀(
2024. 6. 8. 17:28
케밥 num-data HTML
카멜 numData Jas
파스칼 NumData 뷰 컴포넌트
+++++++
환경설정
1. Chrome Browser, Vue.js devtools
기본적으로 Chrome browser를 사용합니다.
간단한 Vue.js application인 경우 굳이 debugger를 사용할 일은 없겠지만 대규모 application인 경우 사실 debugger기능은 필수입니다.
이런 디버깅을 돕기 위해 Vue.js devtools라는 확장툴을 설치하도록 하죠. 크롬 웹 스토어에 접속한 후 Vue.js devtools로 검색한 다음 설치합니다.
Vue.js devtools는 application을 웹 서버에 hosting하여 실행하면 곧바로 사용이 가능하지만 웹서버 없이 html파일을 직접 열어서 실행하는 경우에는 활성화 되지 않습니다. 이를 활성화시키기 위해서는 약간의 설정이 필요합니다.
크롬 브라우져에서 다음의 url로 이동합니다.
chrome://extensions/
Vue.js devtools를 찾은 다음 세부 정보 화면으로 이동한 후 파일 URL에 대한 엑세스 허용 기능을 활성화하면 됩니다.
이제 Vue로 작성된 application을 실행하고 개발자 도구를 실행하면 Vue라는 탭을 사용할 수 있습니다.
2. Code Editor (Visual Studio Code)
코드에디터는 Visual Studio Code를 이용합니다.
참고로 VS Code에서 코드 자동 정렬은 Windows기준으로 Shift + Alt + F 입니다.
Visual Studio Code로 Vue.js 개발 시에 유용한 Plugin들이 있는데 다음과 같습니다. 찾아서 설치까지 진행합니다.
Vue - Official: Vue.js 코드 문법강조, 자동완성기능등 Vue의 기본 지원을 위한 plugin
view-in-browser : 웹서버없이 HTML 페이지를 바로 browser로 보여줄 수 있는 도구입니다. 코드 에디터 화면에서 마우스 오른쪽 클릭하여 View In Browser를 실행하면 됩니다.
Vue VSCode Snippets : Vue 언어용 코드 조각 모음을 제공합니다.
ESLint: Javascript 코드 스타일, 문법 체크 기능을 제공합니다.
VSCode는 프로젝트를 생성해야만이 작업이 가능합니다. 그리고 프로젝트를 관리하는 워크스페이스(Workspace)라는 개념이 존재합니다. VSCode를 실행시 기본 워크스페이스가 존재하지만 직접 워크스페이스를 만들고 프로젝트를 관리하는 것이 더 좋습니다.
보통 프로젝트는 하나일 수 있겠지만 여러 개의 관련 프로젝트를 하나로 묶어 관리할 필요가 있습니다. 이때 워크스페이스는 매우 유용하게 사용할 수 있습니다.
먼저 작업 컴퓨터의 드라이브에서 적당한 위치에 여러 개의 프로젝트를 저장할 워크스페이스(Workspace)로 사용할 디렉터리를 생성합니다.
우리는 C:/vue_workspace로 설정하기로 하죠.
이제 VSCode의 File > Save Workspace As.. 메뉴를 이용하여 해당 폴더를 선택하면 됩니다.
이제 project 폴더를 생성한 후 File > Add Folder to Workspace... 메뉴를 이용하여 workspace에 추가한 후 작업을 진행하시면 됩니다.
3. Vue Hello World!
먼저 application instance의 형태를 살펴보고 코드를 이어서 작성해보아요!
application instance를 그림으로 보면 다음과 같습니다 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
// 자바스크립트 객체를 하나 만들어요!
var model = {
message : '안녕하세요. Vue!!'
}
// Vue instance를 하나 만들어보아요!
// 일반적으로 application instance라고 해요!
var vm = Vue.createApp({
name: 'App',
data() {
return model
}
}).mount("#app")
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
// 자바스크립트 객체를 하나 만들어요!
var model = {
message : '안녕하세요. Vue!!'
}
// Vue instance를 하나 만들어보아요!
// 일반적으로 application instance라고 해요!
var vm = Vue.createApp({
name: 'App',
data() {
return model
}
}).mount("#app")
</script>
</body>
</html>
ALT
JavaScript
복사
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h2>{{ message }}</h2> </div> <script src="https://unpkg.com/vue"></script> <script> // 자바스크립트 객체를 하나 만들어요! var model = { message : '안녕하세요. Vue!!' } // Vue instance를 하나 만들어보아요! // 일반적으로 application instance라고 해요! var vm = Vue.createApp({ name: 'App', data() { return model } }).mount("#app") </script> </body> </html>
'■■▶뷰_Vue.js◀(' 카테고리의 다른 글
| 06-Vue.js / Directive (0) | 2024.06.09 |
|---|---|
| 05-Vue.js / Component Communication (0) | 2024.06.08 |
| 04-Vue.js / Component (0) | 2024.06.08 |
| 03-Vue.js / Instance (0) | 2024.06.08 |
| 01-Vue.js / Introduction (0) | 2024.06.08 |
