Vue3 + TypeScript 一篇文章后端变全栈

1.构建Vue3技术选型

Vue
- 选项式 API 还是 组合式 API✔️
- HTML 还是 单文件组件✔️
语法
- javascript 还是 typescript✔️
构建工具
- @vue/cli 还是 vite✔️
路由
- vue-router✔️
共享存储
- vuex 还是 pinia✔️
视图组件
- ElementUI 还是 Antdv✔️

2) 环境准备

2.1创建项目

采用 vite 作为前端项目的打包，构建工具

在某个文件夹目录下输入以下命令用于使用Vite构建Vue3项目工具

npm init vite@latest

此时需要给项目编写一个项目名称

使用上下键选择对应的框架，我们这里选择Vue会自动生成Vue3的结构

语言此次我们使用的是TypeScript

剩下的全部选择Yes

访问对应的http地址就能跳转到

此时就算构建完成了

2.2 VSCode插件安装

在VSCode中安装以下插件

2.2项目结构

使用VSCode 打开项目

结构如下：

index.html

package.json

tsconfig.json

vite.config.ts

├─public

└─src

├─assets

├─components

├─model

├─router

├─store

└─views

index.html 为主页面
package.json npm 配置文件
tsconfig.json typescript 配置文件
vite.config.ts vite 配置文件
public 静态资源
src/components 可重用组件
src/model 模型定义
src/router 路由
src/store 共享存储
src/views 视图组件

其中我们首选需要认识 vite.config.ts

在这个文件中我们可以配置其前端项目运行的端口号，和选择谁能访问我们的项目，和对应的路径寻找哪些后端服务器

配置方式如下：

TypeScript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    port:7070,
    host:"0.0.0.0",  //设置为 "0.0.0.0" 后，别人可以在同一局域网中通过你的 IP 访问项目
    proxy:{ //走代理
      '/api':{ //请求路径以/api请求打头的都走 下面配置的后端服务器
         target: 'http://localhost:8080',
         changeOrigin: true
      }
    }
  
  }
})

3.尝试编写一个vue组件

在文件中找到一个叫App.vue的文件

里面有3个标签，

**<script>**标签中定义了我们写的语言是Ts，我们可以在里面编写Ts的代码

**<template>**标签是用于编写页面上的文字或图片的

**<style>**标签是用于编写样式的

下面我将提供一个简单的vue文件代码供大家参考

TypeScript 复制代码

<script setup  lang="ts">
import {ref} from 'vue';

//使用ref是为了使得该属性进行响应式编程，
// 当调用了其他方法修改里面的值则页面上的也会进行改变
let msg =ref('hello');

//改变msg值的方法
function change (){
    //使用了ref就不能直接赋值了,而是需要使用属性的其他方法来修改值
    msg.value="world";
}


</script>


<template>
<!--使用双括号用于展示属性的值-->
<h1>{{ msg }}</h1>
<!--定义一个按钮 当点击时 调用change方法修改属性值-->
<input type="button" value="点击修改值" @click="change">
</input>

</template>

<style>
</style>

将此文件保存并运行访问：

当点击修改值按钮后

发现页面上的值发生了改变

4.主页面与 vue组件的关系

来到这个index.html文件中，看到引用了一个Main.ts文件，我们使用Ctrl+鼠标左键点进去

会来到这个ts文件夹中

里面导入了我们最开始App组件，并对其进行了初始化，使用其作为根组件，并挂载到一个id为App的div中

5.axios编写

axios就是对xhr的封装

首先在控制台输入以下命令安装axios

npm install axios

尝试使用axios 访问一个获取数据的接口

Vue3 + TypeScript 一篇文章 后端变全栈