# Vue學習#5 vue環境建立&起手結構
###### tags: `Vue 直播班 - 2022 春季班` `Vue`
## 1.環境建立

### CDN
直接把CDN在HTML匯入

<script src="https://unpkg.com/vue@next"></script>

連結=>[Vue Installation!](https://v3.vuejs.org/guide/installation.html#release-notes)

### ESM
可用 import 模組化載入，需要找到 vue.esm-browser.min.js 的檔案匯入
可用 import 來匯入vue的指定方法

import {createApp} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.26/vue.esm-browser.min.js';

## 2.起手結構
### 基本結構
1. 建立實體(又稱元件) createApp ， 元件 = data(資料) + method(方法) + mounted(生命週期)
2. data => 資料，放顯示在網頁內容資料的地方，用函式搭配一個return{}來宣告
3. created => 生命週期，元件建立完成之後會直接先觸發一次
4. method => 方法，對資料的值進行處理或是html標籤事件操作，用物件來宣告
#### 示意圖:
#### code:

 const app={
     data(){  //資料(函式)
         return{
         
         }
     },
     mounted(){  //生命週期(函式)
    
     },
     methods:{ //方法(物件)
        
     }
    Vue.createApp(app).mounted('#app'); // 掛載實體渲染html
 }

### Vue初步起手式用ESM建構
vue有很多種建立方法，以下用esm當範例

<div id="app"></div>
<script type="module">
    // #1 建立Vue環境
    // #2 關注點分離，建立Data
    // #3 createApp(vue的方法) & mount掛載(將資料顯示在html的標籤裡面)
    
    import {createApp} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.26/vue.esm-browser.min.js';
    
    const app={
        //關注點分離
        data(){ //資料(用函式表達且加上return方式) 
            return{
                person:'danny123'
            }  
        },
    }
    
    //建立實體 
   //掛載
   
   createApp(app).mount('#app');
</script>

#### 小提醒
使用CDN來建立環境時需要將建立VUE實體，需要加上 Vue. 不能直接套用
EX: 套用vue的createApp方法

Vue.createApp(app).mount('#app');

使用ESM來建立環境時就不需要實體了!，無須加上 Vue.
EX: 套用vue的createApp方法

createApp(app).mount('#app');