vue3+Ts-web移动端与pc端笔记

一、vue3.2全家桶 + ts+vant +mockjs开发移动端
开发环境准备：

Vscode vue3 支持插件，使用需要把vue2插件禁用：
Volar(Vue language Features)

chrome调试工具
vue3_devtools.crx

Ts开发技巧：

1. 类型限定

使用接口 约束 接口返回参数类型（重复使用时 使用封装/抽离）
在src目录新建 types/[对应.vue 组件名称].ts
// ../types/login.ts
inport type {FormInstance} from 'element-plus'
import {ref} from 'vue'
export interface LofinFormInt {
    userName:string,
    password: string
}
export class InitData{
    loginForm:LofinFormInt = {
        userName:'',
        password: ''
    }
    loginFormRef: ref<FormInstance>()
}

// Login.vue 使用抽离的类型约束
import {InitData} from '../types/login'

------vue2中结合ts需要以下两个组件：
vue-class-component
vue-property-decorator // 使我们能在vue组件中写TypeScript语法

----------------------
构建响应式H5页面（rem单位）
重置浏览器默认样式
npm install lib-flexible --save // 动态设置 html font-size适配不同手机的屏幕
yarn add postcss-loader      postcss-pxtorem -D
yarn add autoprefixer@9.8.6 -D  // 自动追加浏览器支持的前缀

npm i less -D 
npm i less-loader@7.3.0 -D 

文件配置：
postcss.config.js
vue.config.ts 

-----------------封装axios公共请求
1. 前置拦截：配置公共请求地址/延迟时间/loading请求状态/请求拦截和响应拦截

----一种是 restfulApi , 依赖前置请求和相应依赖，封装：get/put/post/delete 方法
import {get, put, post, delete} from './request.js'
export default  function login(data){
   return put({url:'/login',data:data})
} 
----一种是 新建API目录，配置具体模块的请求函数 依赖 前置拦截，使用
import http from './request.js'
export default  function login(url, data){
   return http({url:'/login',method:'post',data:data})
} 

-----------------------------------------------------
axios 的使用

1. 把