vs code 搭建 vue 开发环境

1. vs code 环境准备好

2. 安装vue环境：

nodejs：官网下载安装后 输入 node -v 验证是否安装成功

vue-cli ： 输入 npm install -g @vue/cli 安装后，vue --versoin 验证

1. 创建项目并启动：

进入目标文件夹，输入 vue create your-project-name ，创建vue 项目

以管理员身份打开 vs code ，导入 vue 项目

终端执行 npm run serve 访问： http://localhost:8080/

现在开发越来越简单了。

1. 在创建的项目里 完成请求后端的接口：

安装 axios

npm install axios

点击事件监听 前端vue代码片段，加在HelloWorld.vue 的 template 标签内：

请求

前端vue 完成http请求代码片段，加在HelloWorld.vue 的 script 标签内：

import axios from 'axios';

methods: {
requestApi() {
axios.get('http://localhost:88/test/v1')
.then(response => {
this.response = response.data;
console.log('Data received:', this.response);
})
.catch(error => {
console.error('Error fetching data:', error);
});
},
}

如果这样直接请求后端接口，会存在跨域问题。解决方式 是使用 nginx 做一下转发，nginx配置：

location /test {
proxy_pass http://localhost:8082;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
}

启动nginx，就可以访问通了。