【备忘录】从头搭建VUE项目，配置ROUTE路由，并使用AXIOS跨域访问后端

# 安装项目依赖
npm install
 
# 启动开发服务器
npm run serve

router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
 
Vue.use(VueRouter);
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // ...其他路由配置
];
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});
 
export default router;

src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
 
Vue.config.productionTip = false;
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

src/components/ExampleComponent.vue

<template>
  <div>
    <!-- 使用router-link组件进行导航 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <!-- 路由出口，渲染匹配的组件 -->
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'ExampleComponent'
}
</script>

src/http/api.js

import axios from 'axios';
 
const http = axios.create({
  baseURL: 'http://backend-api-url', // 替换为实际后端API地址
  timeout: 10000,
  // 其他配置...
});
 
export default http;

src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import http from './http/api';
 
Vue.config.productionTip = false;
Vue.prototype.$http = http; // 将axios挂载到Vue原型上，方便全局使用
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

src/components/SomeComponent.vue

<template>
  <!-- 组件模板内容 -->
</template>
 
<script>
export default {
  name: 'SomeComponent',
  methods: {
    fetchData() {
      this.$http.get('/some-endpoint')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        });
    }
  }
}
</script>

以上代码展示了如何使用Vue CLI创建和配置Vue项目，包括安装和配置vue-router路由，以及使用axios进行跨域请求后端API的基本方法。这些是开始Vue项目的基础，对于开发者来说非常重要。