vs code 搭建 vue 开发环境

1. vs code 环境准备好

2. 安装vue环境：

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

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

3. 创建项目并启动：

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

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

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

现在开发越来越简单了。

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

安装 axios

npm install axios 

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

<h3>
    <button @click="requestApi">请求</button>
 </h3>

前端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，就可以访问通了。