투케이2K

51. (VueJs) [Vue 3] [CDN] - 일반 HTML 파일에서 Vue3 CDN 의존성 설정 방법 본문

VueJs

51. (VueJs) [Vue 3] [CDN] - 일반 HTML 파일에서 Vue3 CDN 의존성 설정 방법

투케이2K 2023. 7. 11. 21:43
반응형

[개발 환경 설정]

​

개발 툴 : VS CODE

개발 언어 : Vue Js

 

[소스 코드]

​

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;    
        }


        #app {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;  
            text-align: center;
        }

    </style>


</head>


<body>


    <!-- [CDN 설정 실시] -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>





    <!-- [app 컴포넌트 생성 수행 : vue 에서 index.html 에 포함된 컴포넌트] -->
    <div id="app">
        <h1>
            {{ message }}
        </h1>
    </div>





    <!-- [vue 코드 지정] -->
    <script>
        

        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. CDN 설치 방법 : 해당 방법으로 CDN 설정 시 vue3 를 사용할 수 있습니다
        -----------------------------------------
        2. vue 기반 설명 : index.html 파일은 브라우저에 표시되는 메인 html 파일입니다
        -----------------------------------------
        3. app 컴포넌트는 vue 에서 최상위 컴포넌트를 로드 합니다 (최상위에 포함되는 자식들도 포함해서 로드)
        -----------------------------------------
        4. 참고 사이트 : https://vuejs.org/guide/quick-start.html#using-vue-from-cdn
        -----------------------------------------
        */


        // [Vue 렌더링 수행 실시] 
        var app = Vue.createApp({
            data() {
                return {
                    message: 'Hello Twok World'
                }
            }
        }).mount('#app')

        
    </script>



</body>

</html>
 

[결과 출력]

​

 

 

반응형
저작자표시

'VueJs' 카테고리의 다른 글

50. (VueJs) [Vue 3] - v-model.trim 사용해 input text 입력 값 공백 제거 실시 및 length 입력 값 길이 확인  (0) 2022.08.06
49. (VueJs) [Vue 3] - v-model.lazy 사용해 input text 입력 완료 후 변경 된 사항 표시 수행 - 데이터 바인딩, 늦은 초기화  (0) 2022.08.06
48. (VueJs) [Vue 3] - table (테이블) 에 배열 (array) 목록 순차적 표시 수행 - v for  (0) 2022.08.03
47. (VueJs) [Vue 3] - filter , computed 사용해 배열 목록 필터링 수행 로직 구현 및 목록 표시 수행  (0) 2022.08.01
46. (VueJs) [Vue 3] - for 태그 사용해 ul , li 태그에 목록 순차적 표시 실시  (0) 2022.08.01
'VueJs' Related Articles more
Comments