VUE3+TS入门

目前前端开发使用VUE3TS非常流行那我们就试试如何快速搭建一个前端项目并且和后端的Springboot通信。本文的先介绍搭建前端环境再介绍修改前端最后再介绍使用Springboot接收前端消息并返回。环境搭建访问nodejs官网https://nodejs.org/zh-cn/download。点击Windows 安装程序(.msi)下载安装包。双击安装包进行安装安装程序会自动配置环境变量。安装完成后打开CMD执行如下命令node-vnpm-v如果可以正常显示版本说明安装成功了。接下来安装TSnpminstall-gtypescripttsc-V新建前端项目安装 Vue CLIVue CLI 是官方提供的脚手架工具可以帮助你快速搭建项目。打开终端或命令提示符运行以下命令来全局安装 Vue CLInpminstall-gvue/cli安装完成。创建 Vue 3 项目使用 Vue CLI 创建一个新的 Vue 3 项目并选择 TypeScript 支持vue create my-vue-app选择Vue3.新建完成。创建完成后进入你的项目目录cdmy-vue-app使用以下命令启动你的 Vue 应用npmrun serve这将在浏览器中打开你的应用通常是 http://localhost:8080。现在你可以开始使用 Vue 3 和 TypeScript 进行开发了。例如你可以修改 src/App.vue 文件来测试 TypeScript 的支持向后端发送请求首先你需要安装Axios。你可以通过npm来安装它npminstallaxios后端使用springboot新建一个项目工程名字叫Vuetest包名字为com.vuetest类型选择maven选择SpringWeb新建一个controller类RestControllerRequestMapping(/view)publicclassHelloWorldController{RequestMapping(/hello)publicStringindex(){// 这里访问地址是 http://127.0.0.1:8080/view/helloSystem.out.println(Hello World);returnHello World;}}后面还需要解决跨域的问题不知道有没有直接将VUE3TS集成到Springboot项目中的方法。后面待完善