vue3 + ts

安装

?

1 2 3 4 5 6 7 8 9 10 11 12

# 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

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// 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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

# 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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

安装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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

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'   }) }