vue quickstart

创建工程

• cnpm install -g vue-cli
• vue init webpack project
• cnpm install
• cnpm run dev

axios

//main.js
import VueAxios from 'vue-axios';
import axios from 'axios';

Vue.use(VueAxios, axios);

//demo1.vue
<script>
export default {
name: "demo1",
methods: {
    getOrders: function () {
      this.axios
        .get("http://localhost:8888/orders?id='33'")
        .then((response) => {
          console.log(response.data);
          this.orders = response.data["order"];
        });
    },
}
</script>

router

//main.js

import router from './router';

new Vue({
  el: '#app',
  render: h => h(App),
  router
});

//App.vue

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

• 使用

// router/index.js

import Vue from 'vue'
import Router from 'vue-router'

//添加模板
import main from '@/components/main'

export default new Router({
  routes: [
    {
      path:'/main',
      name:'main',
      component:main
    },
    {
      path:'/d1',
      name:'d1',
      component:d1
    }
  ]
})

跨域

    proxyTable: {
      '/api':{
        target: 'http://localhost:10000',
        changeOrigin: true,
        pathRewrite: {
          '^/api':''
        }
      }
    }

element-ui

// main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

文档：https://element.eleme.cn/#/zh-CN/component/layout