vue+element+router+axios的使用

一、element的使用

•1、使用手冊https://element.eleme.cn/2.0/#/zh-CN/component/installation

•小例子：使用按鈕

•第一步：複製手冊中按鈕的代碼：<el-button type="success">成功按鈕</el-button>

•第二步：在element.js中引入按鈕（按需引入，用到了哪個元素就引入哪個）import { Button } from 'element-ui‘

•第三步：在element.js中使用按鈕  Vue.use(Button)

列舉幾個常用的組件（不引入會報錯，不能正常顯示哦）：

<el-table>標籤需在element.js中加入import { Table} from 'element-ui‘ ,  Vue.use(Table)  

<el-table-column>標籤需在element.js中加入import { TableColumn} from 'element-ui‘ , Vue.use(TableColumn) 

<el-form>標籤需在element.js中加入import { Form} from 'element-ui‘ , Vue.use(Form) 
在我們的實際開發中我們需要引入多個組件，可以在操作手冊中查找對應組件添加到element.js中

二、router的使用

router.js文件配置好了，在App.vue頁面寫入導航欄代碼：

<el-aside width="200px" style="background-color: rgb(238, 241, 246)" class="leftnav">
  <el-menu router  :default-active="$route.path" style="background-color: rgb(238, 241, 246)">
    <el-menu-item v-for="(item,index) in $router.options.routes"  :key="index"  class="router-link" :index="item.path"  >
      {{item.menuName}}</el-menu-item>
  </el-menu>
</el-aside>

其中<el-menu router>router必須寫，不能忘記要在element.js文件中引入menu,menuItem.否則導航欄無法展示

當然對於路由的理解我也只是一知半解，上面只是比較簡單的例子，需要自己在繼續深入學習研究，我之前看到一篇關於路由的文章，寫的很詳細，推薦一下：http://www.cnblogs.com/SamWeb/p/6610733.html

三、axios的使用

第一步：我們要新建一個vue.config.js文件，寫入如下代碼：

module.exports = {
    lintOnSave: false,
    publicPath: './',
    productionSourceMap: false,
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8081,
        https: false,
        hotOnly: false,        
        proxy: {
            '/': {
                target: 'http://192.168.1.50:8087',//後端接口地址           
                changeOrigin: true,//允許跨域               
            }
        }

    }
}

第二步：

在axios頁面添加如下代碼：

const env = process.env.NODE_ENV;

let config = {

 baseURL: env === "development"?"http://192.168.1.50:8087":"http://localhost"

};

第三步：使用axios

首先在<script></script>中引入axios : import axios from "axios";

接着就可以在函數體中發送請求了：

methods: {   
    createcode(){
        var self = this;//這裏需要注意，this的作用域。
        axios.post('/CaptureSite/Query',參數).then(function (ret) {
            var r = ret.data;
            if (r.IsSucc) {
              self.tableData=r.Data.Data;
             self.total=r.Data.Total;
            } else {
                alert(r.ErrText);
            }
        });
    }
｝

以上就是我自己的學習經驗，有更好的理解會繼續完善！