# 安装项目依赖
npm install
# 启动开发服务器
npm run serverouter/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项目的基础，对于开发者来说非常重要。