# vue-cli 實用套件安裝 3

###### tags: `vue`

我們在開發vue專案可能會用到bootstrap和jquery來美化頁面，串接api則要用到axios，所以我們要把它們引入到vue-cli中，讓功能更強大!!

### Step 1

我們先開啟cmd到專案資料夾打這些指令

`npm i bootstrap jquery popper.js bootstrap-vue`

---

### Step 2

接著在src裡的main.js加入

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'
import jQuery from 'jquery'
import BootstrapVue from 'bootstrap-vue'
window.$ = window.jQuery = jQuery
Vue.use(BootstrapVue)
Vue.use(BootstrapVue)

### Step 3
接著我們切換到src/views裡的Home.vue，輸入簡單的jquery語法，會出現這個問題
這時只要在元件頁面的script標籤裡輸入
`/*eslint-disable*/`
就能解決問題
### Step 4
接著我們要安裝axios套件，我們在cmd專案資料夾打

`npm install --save axios vue-axios`

### Step 5
然後在src/main.js裡，加入這四行

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.prototype.axios = axios;
Vue.use(VueAxios,axios)

就可以在元件中呼叫API了
api範例:

    this.axios.get('https://opendata.cwb.gov.tw/api/v1/rest/datastore/O-A0017-001?Authorization=CWB-9DD945F1-35A1-4572-91D2-692152B71FC6&elementName=', {

                })
                .then(function(response) {
                    console.log(response)

                })
                .catch(function(error) {
                    console.log(error);
                });