티스토리 뷰

Web/Vue

[Vue3] 변경사항

해구름 2024. 1. 26. 11:11
반응형

최신  Vue3 프로젝트생성

Vue3 Quick Start 참고

  1. Vue 프로젝트 생성: 다음과 같은 npm 명령어 입력
    npm create vue@latest
  2. Vue 3.9 기준으로 TypeScript, JSX, Vue Router, Pinia, Vitest 등을 기본적으로 적용하여 생성할 수 있어, 프로젝트 생성이 상당히 편리해짐
    ✔ Project name: … <your-project-name>
    ✔ Add TypeScript? … No / Yes
    ✔ Add JSX Support? … No / Yes
    ✔ Add Vue Router for Single Page Application development? … No / Yes
    ✔ Add Pinia for state management? … No / Yes
    ✔ Add Vitest for Unit testing? … No / Yes
    ✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
    ✔ Add ESLint for code quality? … No / Yes
    ✔ Add Prettier for code formatting? … No / Yes

    Scaffolding project in ./<your-project-name>...
    Done.

Script Setup 문법 사용선언

Vue3부터 setup 함수를 더욱 간결하게 표현할 수 있는 Script Setup 문법을 제공함
간단히 <script /> 태그에 setup 속성을 추가하면 활성화 됨

1
2
3
4
<code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">setup</span>></span>
    ...
<span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</code>

TypeScript를 기준으로 작성된 예시코드 과거에 비해 표현이 간결해짐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<code class="hljs"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">setup</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ts"</span>></span><span class="javascript">
    <span class="hljs-keyword">import</span> { ref, onMounted, onUnmounted, computed } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;
 
    type ListItem = {
        <span class="hljs-attr">Text</span>:string,
        <span class="hljs-attr">Index</span>:number
    };
 
 
    <span class="hljs-comment">//Variables</span>
    <span class="hljs-keyword">const</span> listItems = ref([] <span class="hljs-keyword">as</span> <span class="hljs-built_in">Array</span><ListItem>);
    <span class="hljs-keyword">const</span> selectedIdx = ref(<span class="hljs-number">0</span>);
    <span class="hljs-keyword">const</span> keyword = ref(<span class="hljs-string">''</span>);
     
     
    <span class="hljs-comment">//Functions</span>
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createListItems</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span> ; i < <span class="hljs-number">100</span>; i++) {
            listItems.value.push({
                <span class="hljs-attr">Text</span>:<span class="hljs-string">'Item'</span> + i,
                <span class="hljs-attr">Index</span>: i,
            });
        }
    }
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">searchListItem</span>(<span class="hljs-params"></span>)</span>{
        ...
    }
     
 
    <span class="hljs-comment">//Computed</span>
    <span class="hljs-comment">//예1) getter, setter 모두 사용</span>
    <span class="hljs-keyword">const</span> listHeight = computed({
        <span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">return</span> ... },
        <span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">value</span>)</span> { ... }
    });
    <span class="hljs-comment">//예2) getter만 사용</span>
    <span class="hljs-keyword">const</span> listStyle = computed(<span class="hljs-function">() =></span> {
        <span class="hljs-keyword">return</span>  ... ;
    });
     
   
    <span class="hljs-comment">//Lifecycle Hooks</span>
    onMounted(<span class="hljs-function">() =></span> {
      createListItems();
      <span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'click'</span>, searchListItem);
    });
    onUnmounted(<span class="hljs-function">() =></span>{
      <span class="hljs-built_in">window</span>.removeEventListener(<span class="hljs-string">'click'</span>, searchListItem);
    })
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</code>

 

저작자표시 비영리 동일조건

'Web > Vue' 카테고리의 다른 글

[Vue] public folder 접근하기  (0) 2024.07.31
[Vue] .map 파일 생성방지  (0) 2023.11.24
공유하기 링크
댓글