【项目管理后台】Vue3+Ts+Sass实战框架搭建二

Vue3+Ts+Sass搭建

      • git cz的配置
      • mock 数据
          • 配置viteMockServe
      • 建立mock/user.ts文件夹
          • 测试一下mock是否配置成功
      • axios二次封装
          • 解决env报错问题,ImportMeta”上不存在属性“env”
      • 统一管理相关接口
          • 新建api/index.js
      • 路由的配置
          • 建立router/index.ts
          • 将路由进行集中封装,新建router.ts
          • main.ts的vue-router的挂载
      • 解决Vue3的el-input无法输入

git cz的配置

  • 安装: npm install -g commitizen
  • 安装:pnpm install -D cz-git
  • package.json文档中
// package.json"config": {"commitizen": {"path": "node_modules/cz-git"}}
  • 新增.commitlintrc.cjs
// .commitlintrc.js
module.exports = {rules: {// @see: https://commitlint.js.org/#/reference-rules},prompt: {messages: {type: '选择你要提交的类型 :',scope: '选择一个提交范围(可选):',customScope: '请输入自定义的提交范围 :',subject: '填写简短精炼的变更描述 :\n',body: '填写更加详细的变更描述(可选)。使用 "|" 换行 :\n',confirmCommit: '是否提交或修改commit ?',},types: [{value: 'feat',name: 'feat:        新增功能 | A new feature',emoji: '✨',},{ value: 'fix', name: 'fix:         修复缺陷 | A bug fix', emoji: '🐛' },{value: 'docs',name: 'docs:        文档更新 | Documentation only changes',emoji: '📄',},{value: 'style',name: 'style:       代码格式 | Changes that do not affect the meaning of the code',emoji: '💄',},{value: 'refactor',name: 'refactor:    代码重构 | A code change that neither fixes a bug nor adds a feature',emoji: '♻️',},{value: 'perf',name: 'perf:        性能提升 | A code change that improves performance',emoji: '⚡️',},{value: 'test',name: 'test:        测试相关 | Adding missing tests or correcting existing tests',emoji: '✅',},{value: 'build',name: 'build:       构建相关 | Changes that affect the build system or external dependencies',emoji: '📦️',},{value: 'ci',name: 'ci:          持续集成 | Changes to our CI configuration files and scripts',emoji: '🎡',},{value: 'revert',name: 'revert:      回退代码 | Revert to a commit',emoji: '⏪️',},{value: 'chore',name: 'chore:       其他修改 | Other changes that do not modify src or test files',emoji: '🔨',},],useEmoji: true,// scope 类型(定义之后,可通过上下键选择)scopes: [['components', '组件相关'],['hooks', 'hook 相关'],['utils', 'utils 相关'],['element-ui', '对 element-ui 的调整'],['styles', '样式相关'],['deps', '项目依赖'],['auth', '对 auth 修改'],['other', '其他修改'],].map(([value, description]) => {return {value,name: `${value.padEnd(30)} (${description})`,}}),// 是否允许自定义填写 scope,在 scope 选择的时候,会有 empty 和 custom 可以选择。allowCustomScopes: true,skipQuestions: ['body', 'breaking', 'footer'],subjectLimit: 100, // subject 限制长度// 设置只有 type 选择了 feat 才询问 breaking messageallowBreakingChanges: ['feat'],},
}

mock 数据

  • 当后端接口还没有的时候,这个用于前端自己造数据
  • 安装依赖地址
  • 安装:pnpm install -D vite-plugin-mock mockjs
pnpm install -D vite-plugin-mock@2.9.6
配置viteMockServe
//导入
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {return {plugins: [vue(),//配置viteMockServe({localEnabled: command === 'serve', //保证开发阶段使用mock接口}),],}
}
  • localEnabled如果有波浪线报错
  • 解决办法:卸载 vite-plugin-mock插件,然后重新安装2.9.6版本的插件

建立mock/user.ts文件夹

//getUser 此函数执行会返回一个数组,数组里包含用户信息
function getUser() {return [{userId: 1,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'admin',password: '111111',desc: '平台管理员',roles: ['平台管理员'],buttons: ['cuser.detail'],routes: ['home'],token: 'Admin Token',},{userId: 2,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'system',password: '111111',desc: '系统管理员',roles: ['系统管理员'],buttons: ['cuser.detail', 'cuser.user'],routes: ['home'],token: 'System Token',},]
}export default [// 用户登录接口{url: '/api/user/login', //请求地址method: 'post', //请求方式response: ({ body }) => {//获取请求体携带过来的用户名与密码const { username, password } = body//调用获取用户信息函数,用于判断是否有此用户const checkUser = getUser().find((item) => item.username === username && item.password === password,)//没有用户返回失败信息if (!checkUser) {return { code: 201, data: { message: '账号或者密码不正确' } }}//如果有返回成功信息const { token } = checkUserreturn { code: 200, data: { token } }},},// 获取用户信息{url: '/api/user/info',method: 'get',response: (request) => {//获取请求头携带tokenconst token = request.headers.token//查看用户信息是否包含有次token用户const checkUser = getUser().find((item) => item.token === token)//没有返回失败的信息if (!checkUser) {return { code: 201, data: { message: '获取用户信息失败' } }}//如果有返回成功信息return { code: 200, data: { checkUser } }},},
]
测试一下mock是否配置成功

在这里插入图片描述
在这里插入图片描述

  • 好的,看着可以使用,那么正式在项目中使用,这里main.ts就先删除

axios二次封装

  • 为更好的与后端进行交互,需要使用axios插件实现网络请求

  • 一般对axios进行二次封装

  • 使用请求拦截器,可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

  • 使用响应拦截器,可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理 http 网络错误)

import axios from 'axios'
import { ElMessage } from 'element-plus'
//创建axios实例,创建后可以设置一下其他配置,基础路径,超时请求
let request = axios.create({baseURL: (import.meta as any).env.VITE_APP_BASE_API,timeout: 5000,
})
//请求拦截器
request.interceptors.request.use((config) => {//config,配置请求头,经常携带公共参数tokenreturn config
})
//响应拦截器
request.interceptors.response.use((response) => {return response.data},(error) => {//处理网络错误let msg = ''let status = error.response.statusswitch (status) {case 401:msg = 'token过期'breakcase 403:msg = '无权访问'breakcase 404:msg = '请求地址错误'breakcase 500:msg = '服务器出现问题'breakdefault:msg = '无网络'}// 提示错误信息ElMessage({type: 'error',message: msg,})return Promise.reject(error)},
)
export default request
解决env报错问题,ImportMeta”上不存在属性“env”

在这里插入图片描述

  • import.meta.env.VITE_APP_BASE_API,报错类型“ImportMeta”上不存在属性“env”
  • 方法一:忽略类型校验
//@ts-ignorebaseURL: import.meta.env.VITE_APP_BASE_API,
  • 方法二:使用类型断言
baseURL: (import.meta as any).env.
  • 其余方法我这试着没生效,类似 “types”: [“vite/client”],

统一管理相关接口

新建api/index.js
// 统一管理相关接口
import request from '@/utils/request'
// 统一ts接口参数类型定义
import type { setlogin, getloginDate } from './type'
// 统一管理
enum API {LOGIN_URL = '/user/login',
}
//统一暴露请求函数
export const getLogin = (data: setlogin) =>request.post<any, getloginDate>(API.LOGIN_URL, data)
  • 页面上使用即可
import { getLogin } from '@/api/index'
const getlogin = () => {getLogin({ username: 'admin', password: '111111' })
}

路由的配置

  • 安装:pnpm install vue-router
建立router/index.ts
// 通过vue-router插件实现模板路由
import { createRouter, createWebHashHistory, RouterOptions } from 'vue-router'import { constantRoute } from './routers'
// 创建路由器
let router = createRouter({// 路由模式history: createWebHashHistory(),routes: constantRoute,//路由切换滚动条scrollBehavior() {return {left: 0,top: 0,}},
})
export default router
将路由进行集中封装,新建router.ts
//index.ts下routes类型报错问题,增加类型定义
import { RouteRecordRaw } from 'vue-router'
// 对外暴露配置的路由
export const constantRoute: RouteRecordRaw[] = [{path: '/login',name: 'login', //命名路由component: () => import('@/view/login/index.vue'),},{path: '/',name: 'home',component: () => import('@/view/home/index.vue'),},{path: '/404',name: '404',component: () => import('@/view/404/404.vue'),},//重定向,打开任何不存在的页面,跳转到404{path: '/:pathMatch(.*)*',redirect: '/404',name: 'Any',},
]
main.ts的vue-router的挂载
//引入Vue-Router
import router from './router'
app.use(router)

解决Vue3的el-input无法输入

  • 原因Vue3里面这两个值不能相同
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/768914.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GA遗传算法和ALNS算法的区别(我的APS项目七)

博主用最简单的方式告诉你遗传算法是什么&#xff0c;估计这是网上最简单的遗传算法入门教程了。首先我们先带入一个问题&#xff0c;我们要去9大城市旅游&#xff0c;想知道每个城市走一遍&#xff0c;总路程最短的出行顺序是什么&#xff1f; OK&#xff0c;题目我们已经明确…

Chrome 插件打包发布

插件打包发布 一、打包成 zip 包 最简单方便的一种其实就是打包成 zip 包&#xff0c;通过下载链接进行下载&#xff0c;在包里面通过设置版本号和数据库的版本号对比来提醒用户进行新包的下载。 二、发布到 Chrome 应用商店 1. 注册成为开发者 在发布到 chrome 应用商店之…

第八节:深入讲解SMB中的Http组件

一、概述 Http组作是SMB中的核心组件之一&#xff0c;在第七节中讲解了如何简洁的进行web程序部署和运行&#xff0c;这只是它的功能之一。在本节中&#xff0c;我们将介绍Http组件的重要属性。 二、请求头Request 1、支持方法 支持POST、GET、PUT、DELETE、OPTIONS等方法&a…

吴恩达深度学习笔记:神经网络的编程基础2.15-2.17

目录 第一门课&#xff1a;神经网络和深度学习 (Neural Networks and Deep Learning)第二周&#xff1a;神经网络的编程基础 (Basics of Neural Network programming)2.15 Python 中的广播&#xff08;Broadcasting in Python&#xff09;2.16 关于 python _ numpy 向量的说明&…

作为技术人员在日常工作中如何使用边界AICHAT工具

目录 1.1、解决日常问题1.2、编写日常程序1.3、优化日常工作中的代码1.4、边界AICHAT工具会员中心1.5、边界AICHAT工具普通用户的权益1.6、边界AICHAT工具超级永久会员的权益 有关边界AICHAT工具工具的介绍请参考之前的系列博文&#xff0c; 一款好用的AI工具——边界AICHAT&a…

【SpringSecurity】十六、OAuth2.0授权服务器、资源服务器的配置(理论部分)

文章目录 0、OAuth2服务端结构1、授权服务配置2、授权服务器 ⇒ 配置客户端详情3、授权服务器 ⇒ 管理令牌配置4、授权服务器&#xff1a;配置端点访问的安全约束5、资源服务器配置 相关&#x1f4d5;&#xff1a; 【OAuth2授权服务器配置完整Demo】 0、OAuth2服务端结构 OAu…

微服务(基础篇-003-Nacos集群搭建)

目录 Nacos集群搭建 1.集群结构图 2.搭建集群 2.1.初始化数据库 2.2.下载nacos 2.3.配置Nacos 2.4.启动 2.5.nginx反向代理 2.6.优化 视频地址&#xff1a; 06-Nacos配置管理-nacos集群搭建_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1LQ4y127n4?p29&…

【Linux文本处理三剑客-grep、awk、sed】

grep, awk, 和 sed 是三个强大的文本处理工具&#xff0c;在Linux系统中广泛使用。每个工具都有其独特的特性和用法&#xff0c;下面我会对每一个工具进行简要的介绍和说明。 1.grep grep 是一个用于模式搜索的工具&#xff0c;它可以在文件或者标准输入中搜索包含特定模式的…

国内ip地址随意更换的潜在风险和策略

在数字化时代&#xff0c;IP地址是互联网通信的基础&#xff0c;而国内IP地址的随意更换可能带来一系列安全风险和问题。虎观代理小二将探讨国内IP地址随意更换的潜在影响以及如何有效应对这一挑战。 1.什么是国内IP地址&#xff1f; 国内IP地址是指在国内分配和使用的IP地址&…

边缘计算基础介绍及AKamai-linode产品分析

1、背景 随着互联网的发展&#xff0c;我们进入了大数据时代&#xff0c;这个时代也是移动互联网的时代&#xff0c;而且这个时代&#xff0c;大量的线下服务走到线上&#xff0c;随之而来的&#xff0c;比如外卖、叫车……于是&#xff0c;有各种各样的 App 和设备在收集你的…

对尾递归的理解,有哪些应用场景

文章目录 一、递归二、尾递归二、应用场景参考文献 一、递归 递归&#xff08;英语&#xff1a;Recursion&#xff09; 在数学与计算机科学中&#xff0c;是指在函数的定义中使用函数自身的方法 在函数内部&#xff0c;可以调用其他函数。如果一个函数在内部调用自身本身&am…

电子电器架构 —— 诊断数据DTC具体故障

电子电器架构 —— 诊断数据DTC具体故障 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师 (Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输了就是输了,不要在意别人怎么看自己。江湖一碗茶,喝完再挣…

qt5-入门-标签页部件QTabWidget-2-新增和删除标签页

参考&#xff1a; C GUI Programming with Qt 4, Second Edition 本地环境&#xff1a; win10专业版&#xff0c;64位&#xff0c;Qt5.12 上一篇&#xff1a; qt5-入门-标签页部件QTabWidget-1-CSDN博客 https://blog.csdn.net/pxy7896/article/details/136883359 目录 效果实…

机器学习之线性回归与逻辑回归【完整房价预测和鸢尾花分类代码解释】

目录 前言 一、什么是线性回归 二、什么是逻辑回归 三、基于Python 和 Scikit-learn 库实现线性回归 示例代码&#xff1a; 使用线性回归来预测房价: 四、基于Python 和 Scikit-learn 库实现逻辑回归 五、总结 线性回归的优缺点总结&#xff1a; 逻辑回归&#xff08;Logistic…

WiFi已连接却不可上网是什么原因?

很多使用wifi上网的用户都遇到过这样的问题,就是电脑已经连接了wifi,但就是上不了网。着到底是怎么回事呢?今天,极客狗带大家一起来找找WiFi已连接却不可上网是什么原因,并给出对应的解决方。 原因分析: 可能是ip地址冲突所导致,也有可能是宽带出先故障,不妨试试下面的…

零基础入门数据挖掘系列之「特征工程」

摘要&#xff1a;对于数据挖掘项目&#xff0c;本文将学习应该从哪些角度做特征工程&#xff1f;从哪些角度做数据清洗&#xff0c;如何对特征进行增删&#xff0c;如何使用PCA降维技术等。 特征工程&#xff08;Feature Engineering&#xff09;对特征进行进一步分析&#xf…

Python - 深度学习系列30 - 使用LLaMA-Factory微调模型

说明 最实用的一种利用大语言模型的方式是进行微调。预训练模型与我们的使用场景一定会存在一些差异&#xff0c;而我们又不可能重头训练。 微调的原理并不复杂&#xff0c;载入模型&#xff0c;灌新的数据&#xff0c;然后运行再训练&#xff0c;保留checkpoints。但是不同项…

ExoPlayer架构详解与源码分析(12)——Cache

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…

华为配置AP静态上线业务实验

配置AP静态上线业务示例 组网图形 图1 配置AP静态上线业务示例组网图 业务需求组网需求数据规划配置思路操作步骤配置文件扩展阅读 业务需求 管理员希望为AP配置静态IP地址&#xff0c;使AP能够找到正确的AC&#xff0c;当AP通过AC的认证后&#xff0c;实现AP在AC中正常上…

C++项目——集群聊天服务器项目(四)MySQL数据库

今天来介绍集群聊天器项目中MySQL数据库的相关表结构 集群聊天服务器项目需要进行好友、群组的增删操作以及好友离线状态的判断&#xff0c;需要在数据库中建立相关表进行增删改查操作&#xff0c;因此项目设计了如下五个表&#xff0c;大家可以自己动动小手&#xff0c;使用S…