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);
            }
        });
    }
｝

以上就是我自己的学习经验，有更好的理解会继续完善！