本文原文鏈接：https://blog.csdn.net/Jack__iT/article/details/88664601
api的調用和數(shù)據(jù)渲染
在Vue中要獲取服務器的接口數(shù)據(jù)选调，可以使用vue-resource調用.$http.get("獲取數(shù)據(jù)的API接口")這個方法鸟辅，然后將取得的數(shù)據(jù)在頁面中渲染methods:{ getUserData(){ this.$http.get("獲取數(shù)據(jù)的API接口") .then(function (response) { this.customers=response.body; }) }
當然洒缀，現(xiàn)在可以使用axios來實現(xiàn)api調用和數(shù)據(jù)渲染
Axios
Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中悴灵。
Axios的特點
從瀏覽器中創(chuàng)建 XMLHttpRequests
從 node.js 創(chuàng)建 http 請求
支持 Promise API
攔截請求和響應
轉換請求數(shù)據(jù)和響應數(shù)據(jù)
取消請求
自動轉換 JSON 數(shù)據(jù)
客戶端支持防御 XSRF
axios請求方式
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
數(shù)據(jù)的渲染可以引入一些常用的框架
在Vue中要獲取服務器的接口數(shù)據(jù)馍悟，則需要調用.$http.get("獲取數(shù)據(jù)的API接口")這個方法锣咒，然后將取得的數(shù)據(jù)在頁面中渲染methods:{ getUserData(){ this.$http.get("獲取數(shù)據(jù)的API接口") .then(function (response) { this.customers=response.body; }) }
在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要設置很多配置項毅整，網(wǎng)上有很多方法法毛嫉，這里不重復寫了。直接上 Vue CLI3.0 配置步驟辛臊。
第一步：安裝 jQuery仙粱、 Bootstrap、popper.js依賴彻舰。
其中popper.js 用于在 Bootstrap 中顯示彈窗伐割、提示、下拉菜單刃唤，所以需要引入隔心。
npm install jquery bootstrap@3 popper.js --save
注意：上面的 bootstrap@3 指的是安裝 Bootstrap 第三版，如果不加 @3 符號尚胞，默認安裝第四版硬霍。
第二步：配置 main.js
引入 Boostrap 請看配置文件。
//main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//在這里引入 bootstrap笼裳。默認只引入 bootstrap 中的 js唯卖，css 需要另外引入，我的 bootstrap.ss 在APP.vue中引入的
import "bootstrap";
//也可以在這里引入 bootstrap.css ;
//import "bootstrap/dist/css/bootstrap.css";
Vue.config.productionTip = false;
new Vue({
? router: router,
? store: store,
? render: h => h(App)
}).$mount("#app");
我的 APP.vue 的配置躬柬，只是引入 bootstrap.css拜轨，代碼僅供參考。
<style>
// 因為我的 bootstrap 文件經(jīng)過了我自己的調整允青，所以單獨放在 assets 文件夾中做單獨引入橄碾。
//如果你只是想使用原生的 bootstrap，直接在 main.js 中引入 css 文件即可。
@import "./assets/css/bootstrap.css";
</style>
第三步：配置 vue.config.js 文件
Vue CLI3.0 中的所有配置都在 vue.config.js 文件堪嫂，你在這里配置好，腳手架自動使用你的配置覆蓋掉默認的配置木柬。
如果你的項目中沒有 vue.config.js 文件皆串，請你在 package.json 文件的同級目錄新建一個 vue.config.js 文件。文件內具體的配置如下：
const webpack = require("webpack");
module.exports = {
//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件參數(shù)的地方眉枕，你在這里設置恶复，會新建或者覆蓋 webpack 默認配置。
//webpack ProvidePlugin 的含義是創(chuàng)建一個全局的變量速挑，使這個變量在 webpack 各個模塊內都可以使用谤牡。這里的配置含義是創(chuàng)建 '$'、'jQuery'姥宝、'window.jQuery' 三個變量指向 jquery 依賴翅萤，創(chuàng)建 'Popper' 變量指向 popper.js 依賴。
? ? configureWebpack: {
? ? ? ? plugins: [
? ? ? ? ? ? new webpack.ProvidePlugin({
? ? ? ? ? ? ? ? $: 'jquery',
? ? ? ? ? ? ? ? jQuery: 'jquery',
? ? ? ? ? ? ? ? 'window.jQuery': 'jquery',
? ? ? ? ? ? ? ? Popper: ['popper.js', 'default']
? ? ? ? ? ? ? })
? ? ? ? ]
? ? ? }
}
第四步：具體使用范例
我做了一個 tooltip 的示例腊满，鼠標放上去會出現(xiàn) tooltip 提示
//template
<template>
? <div class="content-wrap">
? ? <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
? ? <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
? ? <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
? ? <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
? </div>
</template>
//script
<script>
export default {
? name: "componentsTooltips",
? mounted: function() {
? ? //在頁面加載完畢后初始化 tooltip套么， 相當于$(function(){ $('[data-toggle="tooltip"]').tooltip(); }
? ? $('[data-toggle="tooltip"]').tooltip();
? }
};
</script>
如果 eslint 報誤，請設置 .eslintrc.js 文件碳蛋。
module.exports = {
? env: {
? ? node: true,
? ? jquery: true
? }
};
當然也可以不通過vue-cli引用胚泌，可以直接在頁面中引入。
