创建工程
- 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