vue+ele 使用及demo

vue+ele+axios demo

项目配置、前后端交互、组件申明使用、路由

1>项目目录

2>安装axios

cnpm install axios

完成后，main.js引用

3>选择布局

官方布局 https://element.eleme.cn/#/zh-CN/component/container 

page下index.vue

 4>element组件使用

在ele官网找个心仪的组件，然后在components目录下新建.vue文件，如test.vue

找了个加载的组件：https://element.eleme.cn/#/zh-CN/component/loading ，直接粘贴进test.vue里。

在引用的页面中，如index.vue ,引入并使用

启动 npm run dev 前台展示“加载”组件

5>路由

router/index.js 绑定路由

下图'/'根目录绑定了index.vue，二级路由绑定了weekly_index、ci，ci下绑定了三级路由ci/appreport。

6>get、post 请求

get

post

7>跨域问题

config/index.js 中proxyTable 下增加：

    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:5000/',//接口域名、端口号
        changeOrigin: true,//允许跨域
        pathRewrite: {
          '^/api': '' //api就意味着，所有该域名下的接口目录第一级都要加个/api
        }
      }
    }

如，接口为：127.0.0.1:5000/testpost。则请求地址前加上/api

 

demo：https://github.com/olaheihei/QA_P_demo