vue3 + ts

安装

# Vite 需要 Node.js 版本 >= 12.0.0
npm init vite@latest

# 根据相关问题进行回答
# 需要选择 框架以及使用语言 配置项目名

# 进入项目目录
cd vite-project
# 安装依赖
npm install
# 运行项目
npm run dev

习惯Vue2脚手架中用 @符号指向Src的习惯了 在Vite中配置一下

配置vite.config.ts和tsconfig.json

 

// viet.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 配置别名指向src目录
      '@': resolve(__dirname, 'src') //注如果__dirname报错存在找不到npm install @types/node -D
    },
    // 使用别名的文件后缀
    extensions: ['.js', '.json', '.ts']
  },
  //服务器的端口监听端口配置和host设置
  server: {
    host: 'localhost',
    port: 8099,
    https: false
  }
})

Vue-Router

# Vue-Router 4+ 版本支持 Vue3
npm install vue-router@4

新建 目录/文件夹 src/router/index.ts

// index.ts
import { createRouter,createWebHashHistory,RouteRecordRaw } from 'vue-router';

// 添加类型校验
const routes: RouteRecordRaw[] = [
    {
        path: "/",
        name: "home",
        component: ()=>import('@/components/HelloWorld.vue')
    },
    {
        path: "/logIn",
        name: "logIn",
        component: ()=>import('@/view/LogIn.vue')
    },
]

// 创建router
const router = createRouter({
    // 配置为Hash模式
    history: createWebHashHistory(),
    // 配置toures
    routes,
    // 路由跳转时返回顶部
    scrollBehavior () {
        return {top: 0}
    }
})

// 设置前置路由守卫
router.beforeEach((to, from, next) => {
    next()
})

// 设置后置路由守卫
router.afterEach((to, from, failure) => {
    
})

export { router }

// main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
const app = createApp(App)
// 引入Pinia
import { createPinia } from 'pinia'
// 引入router
import { router } from './router'
app.use(router)
// 创建 Pinia 实例
const pinia = createPinia()
// 挂载到 Vue 根实例
app.use(pinia)
app.mount('#app')

状态管理Pinia

安装npm install pinia
新建 目录/文件 src/store/index.ts
// index.ts
　　

Pinia从使用角度和之前的Vuex一样。

Store是保存状态与业务逻辑的实体，有三个核心概念。

◆state：存储全局状态

◆getters：类似于组件的computed，根据已有state封装派生数据，也具有缓存的特性

◆actions：类似于组件的methods,用来封装业务逻辑，支持同步和异步

/**
 *    1. 定义容器并导出
 *    2. 使用容器中的state
 *    3. 修改容器中的state
 *    4. 使用容器中的action
 */
import { defineStore } from "pinia";

/**
 * 1. 定义容器并导出
 * 参数一: 容器ID, 唯一, 将来 Pinia 会把所有的容器挂载到根容器
 * 参数二: 选项对象
 * 返回值: 函数, 调用的时候要空参调用, 返回容器实例
 */
export const mainStore = defineStore('main', {
    /**
     * 类似组件的 data, 用于存储全局的的状态
     * 注意:
     *    1.必须是函数, 为了在服务端渲染的时候避免交叉请求导致的数据交叉污染
     *    2.必须是箭头函数, 为了更好的 TS 类型推导
     */
    state: () => {
        return {
            state: {
                token: true
            }
        }
    },
    /**
     * 类似组件的 computed, 用来封装计算属性, 具有缓存特性
     */
    getters: {

    },
    /**
     * 类似组件的 methods, 封装业务逻辑, 修改state
     * 注意: 里面的函数不能定义成箭头函数(函数体中会用到this)
     */
    actions: {

    }
})

安装Axios

npm insall axios

新建 目录/文件 src/utils/request.ts src/api/user.ts

// request.ts

import axios from 'axios'
// 导入pinia
import { mainStore } from '@/store'
const store = mainStore()

// 创建axios
const $http = axios.create({
    //设置默认请求地址
    baseURL: 'http://localhost:8080',
    //设置请求超时时间
    timeout:5000,
    //设置请求头
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
})


// 请求拦截器
$http.interceptors.request.use(config => {
    // 验证 token
    const token = store.state.token;
    if (config.headers!= undefined) config.headers.Authorization = token
    return config;
},error => {
    return Promise.reject(error);
})

//响应拦截
$http.interceptors.response.use(res => {

    // 状态码为200正常返回
    if (res.status === 200) {
        return Promise.resolve(res);
    } else {
        return Promise.reject(res);
    }
}, error => {
    return Promise.reject(error);
})

// 导出封装的axios
export default $http

// api/user.ts
import request from '@/utils/request'

export function login(data: object) {
  return request({
    url: '/Login',
    method: 'post',
    data
  })
}

export function getInfo(token: object) {
  return request({
    url: '/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/logout',
    method: 'post'
  })
}