vue 之 axios Vue路由與element-UI

一. 在組件中使用axios獲取數據

1. 安裝和配置axios

默認狀況下，咱們的項目中並無對axios包的支持，因此咱們須要下載安裝。

在項目根目錄中使用 npm安裝包

npm install axios

接着在main.js文件中，導入axios並把axios對象 掛載到vue屬性中做爲一個子對象，這樣咱們才能在組件中使用。

 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import axios from 'axios'  // 從node_modules目錄中導包(這樣寫就行)

Vue.config.productionTip = false;

Vue.prototype.$axios = axios;  // 把對象掛載到Vue中

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

 

2.在組件中使用axios獲取數據

新建子組件GetWeather.vue文件

前提是將GetWeather註冊到App.vue下

 

<template>
  <div id="GetWeather">
    <input type="text" v-model="city" placeholder="請輸入要查詢的城市">
    <button @click="get_weather">獲取天氣</button>
    <p>{{weather_info}}</p>
    <hr>
    <div v-for="k,v in weather_info.data">
      <p>{{v}}:{{k}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "GetWeather",
    data() {
      return {
        city: "",
        weather_info: "",
      }
    },
    methods: {
      get_weather() {
        this.$axios.get("http://wthrcdn.etouch.cn/weather_mini", {
          params: {
            "city": this.city
          }
        }).then(response => {
          this.weather_info = response.data;
        }).catch(error => {
          console.log(error.response)
        })
      }
    }

  }
</script>

<style scoped>

</style>

GetWeather.vue

 

效果以下：

 

 

本質上來講，咱們仍是原來的axios，因此也還會受到同源策略的影響。

二.項目搭建vue-router與element-UI

1. 新建一個vue項目

vue init webpack 項目名

根據須要在生成項目時，咱們選擇對應的選項。

根據上面的提示，咱們已經把vue項目構建好了，接下來咱們能夠在pycharm編輯器中把項目打開並根據上面黃色提示，運行測試服務器。

2. 初始化項目

清除默認的Helloworld.vue組件和App.vue中的默認模板代碼和默認樣式。

修改後的效果：

接下來查看效果就是一張白紙。

3. 安裝路由vue-router

(1)下載路由組件

npm i vue-router -S

執行效果：

(2)配置路由

在src目錄下建立router路由目錄，在router目錄下建立index.js路由文件

router/index.js路由文件中，編寫初始化路由對象的代碼：

// 引入路由類和Vue類
import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home"
// 註冊路由類
Vue.use(Router);

// 初始化路由對象
export default new Router({
  // 設置路由模式爲‘history’，去掉默認的#
  mode: "history",
  routes: [ // 至關於django的urls.py 下的 urlpatterns
    // 路由列表
    // { // 一個字典，表明一條url
      // name: "路由別名",
      // path: "路由地址",
      // component: 組件類名,
    // },
    {
      name: "Home",
      path: "/",
      component: Home,
    },
    {
      name: "Home",
      path: "/home",
      component: Home,
    }
    ]
})

index.js

打開main.js文件，把router路由規則對象註冊到vue中。

代碼：

 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/index'

// elementUI 導入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 調用插件
Vue.use(ElementUI);


Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: router,
  components: {App},
  template: '<App/>'

});

main.js

 

(3)在視圖中顯示路由對應的內容

在App.vue組件中，添加顯示路由對應的內容。

代碼：

 

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

 

注意：若是在vue建立項目的時候，設置安裝vue-router，則項目會自動幫咱們生成上面的router目錄和index.js裏面的代碼，以及自動到main.js裏面註冊路由對象。

4.引入ElementUI

對於前端頁面佈局，咱們可使用一些開源的UI框架來配合開發，Vue開發前端項目中，比較經常使用的就是ElementUI了。

ElementUI是餓了麼團隊開發的一個UI組件框架，這個框架提早幫咱們提供了不少已經寫好的通用模塊，咱們能夠在Vue項目中引入來使用，這個框架的使用相似於咱們前面學習的bootstrap框架，也就是說，咱們徹底能夠把官方文檔中的組件代碼拿來就用，有定製性的內容，能夠直接經過樣式進行覆蓋修改就能夠了。

中文官網：http://element-cn.eleme.io/#/zh-CN

文檔快速入門：http://element-cn.eleme.io/#/zh-CN/component/quickstart

(1)快速安裝ElementUI

在項目的根目錄下執行下面的命令。

npm i element-ui -S

上面的代碼等同於：npm install element-ui --save

執行命令效果：

(2) 配置ElementUI到項目中

在main.js中導入ElementUI，並調用。代碼：

 

// elementUI 導入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 調用插件
Vue.use(ElementUI);

mian.js

效果：

這樣就成功引入了ElementUI。