# Plugins 擴充插件 (5-8)
###### tags: `Vue`、`5. 進階Api`
2022.3.7

**找尋套件工具: https://www.npmjs.com/**

### 1. 外部套件匯入方式
* **載入方式：cdn、npm**
* **運用方式：**
  **app.use()**，與Vue整合性高 `app.use(VueAxios, axios)`。
  **元件的形式載入**，`import {套件內容} from '套件名稱'`。

### 2. 使用外部套件注意事項
* **需要注意可搭配版本號**
* **更新頻率**
* **使用人數**

### 3. 範例：使用CDN匯入VeeValidate驗證套件(驗證欄位是否有填寫)

<div id="app">
        <v-form @submit = "OnSubmit" v-slot="{errors}">
            <v-field type="text" name="欄位名稱" placeholder="who are you" :rules = "isRequired"></v-field>
            <error-message name="欄位名稱"></error-message>
            <button>Submit</button>
        </v-form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/4.1.17/vee-validate.min.js"></script>
<script type="module">
    console.log(VeeValidate);
    const app = Vue.createApp({
        components:{
            VForm:VeeValidate.Form,
            VField:VeeValidate.Field,
            ErrorMessage:VeeValidate.ErrorMessage
        },
        methods:{
            OnSubmit(value){
                    console.log(value)
            },
            isRequired(value){
                if(!value){
                    return '此欄是必填'
                }
                return true
            }
        }
    });

    app.mount('#app');
</script>