【尚医通】vue3+ts前端项目开发笔记 2 —— 创建项目、封装网络请求、集成elment-plus 、重置样式、准备状态管理/路由 等开发前准备

尚医通开发记录(Vue3+TypeScript+Pinia+Axios)

一、接口地址

服务器地址:http://syt.atguigu.cn
医院接口：http://139.198.34.216:8201/swagger-ui.html
公共数据接口：http://139.198.34.216:8202/swagger-ui.html
会员接口：http://139.198.34.216:8203/swagger-ui.html
短信验证码接口：http://139.198.34.216:8204/swagger-ui.html
订单接口：http://139.198.34.216:8206/swagger-ui.html
文件上传接口：http://139.198.34.216:8205/swagger-ui.html
后台用户接口：http://139.198.34.216:8212/swagger-ui.html

二、创建项目

创建项目 syt_hospital

npm init vue@latest

在这里插入图片描述

项目架构

在这里插入图片描述

在这里插入图片描述

三、配置项目

1.配置icon

favicon.ico

2.配置项目代码规范

  1. 集成 editorconfig配置 https://editorconfig.org/

editorconfig有助于为不同IDE编辑器上处理同一个项目的多个开发人员维护一致的编码风格。

.editorconfig

# http://editorconfig.org
root = true[*] # 表示所有的文件
charset = utf-8 # 设置文件字符集为utf-8
indent_style = space # 缩进风格 （tab或者space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行风格
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行[*.md] # 表示仅设置 markdown 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
  • Vscode 需要安装插件 EditorConfig for VS Code
  1. 使用prettier工具 https://www.prettier.cn/

Prettier 是一款强大的代码格式化工具，支持 javascript、typescript、css、scss、less、jsx、angular、vue、graphql、json、markdown等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

  • 2.1 安装prettier

​ npm install prettier -D

  • 2.2. 配置 .prettierrc 文件；
    • useTabs: 使用tab缩进还是空格缩进，选择 false
      • tabWidth: tab是空格的情况下，是几个空格，选择2个
      • printWidth: 当行字符的长度，推荐80，也有人喜欢100或120
      • singleQuote: 使用单引号还是双引号，选择true ，使用单引号
      • TranilingComma: 在多行输入的尾逗号是否添加，设置为true，比如对象类型的最后一个属性后面是否加一个 ， ；
      • semi: 语句末尾是否要加分号，默认值true，选择false表示不加；
{"useTabs":false,"tabwidth":2,"printWidth":80,"singleQuote":true,"trailingComma":"none","semi":false
}

​

  • 2.3. 配置 .prettierrcignore 忽略文件；

    /dist/*
.local
.output.js
/node_modules/****/*.svg
**/*.sh/public/*

  • 2.4 vscode 需要安装插件 Prettier - Code formatter

  • 2.5 测试prettier是否生效

    • 测试一：在代码中保存代码

    • 测试二：配置一次性修改的命令

      在package.json中配置一个 scripts:

      ​ "prettier":"prettier --write ."

3.使用ESLint检测

  • Vue创建项目的时候，选择ESLint，会默认帮我们配置需要的ESLint环境

  • vscode需要安装ESLint插件 ESLint

  • 解决eslint和prettier冲突的问题：

    • 安装插件 （vue在创建项目时，如果选择prettier，那么这两个插件会自动安装）
    • npm install eslint-plugin-prettier eslint-config-prettier -D

  • 添加 prettier插件

      extends: ['plugin:prettier/recommended'],

4.git Husky和eslint

5.git commit 规范

​

四、项目准备

CSS样式的重置

  • 对默认css样式进行重置：

    • normalize.css

    • reset.css

  • 安装
    npm install normalize.css
    在 main.ts 中 引用
    import 'normalize.css'

  • 在assets / css 中新建

    • reset.less 重置的样式
    • common.less 公共的样式
    • index.less 其他less的出口，将这个less在main.ts中引入
    //css  main.ts
import 'normalize.css'
import '@/assets/css/index.css'

  • 安装 less npm install less -D （个人习惯用less）

路由配置

import { createRouter, createWebHistory } from 'vue-router'
// 初始配置
const router = createRouter({history: createWebHistory(),// 配置映射关系：path => componentroutes: [{path: '/',redirect: '/home'},{path: '/home',component: () => import('../views/home/index.vue')},{path: '/hospital',component: () => import('../views/hospital/index.vue')},{path: '/:pathMatch(.*)',component: () => import('../views/not-found/index.vue')}]
})export default router

状态管理Pinia

  • 在store/index.ts中，创建pinia

    import { createPinia } from 'pinia'const pinia = createPinia()export default pinia

  • 将pinia引入到main.ts中

    import pinia from './store'
...
app.use(pinia)

二次封装axios

  • 安装 npm install axios 
// service/request/index.ts
import axios from 'axios'
import type { AxiosInstance } from 'axios'
import type { PKRequestConfig } from './type'// 拦截器: 蒙版 loading ... / token / 修改配置class PKRequest {instance: AxiosInstance// request实例 => axios实例constructor(config: PKRequestConfig) {this.instance = axios.create(config)// 全局拦截器：给每个instance实例都添加拦截器this.instance.interceptors.request.use((config) => {// loading tokenconsole.log('全局请求成功的拦截器')return config},(err) => {console.log('全局请求失败的拦截器')return err})this.instance.interceptors.response.use((res) => {// loading tokenconsole.log('全局响应成功的拦截器')return res},(err) => {console.log('全局响应失败的拦截器')return err})// 判断是否携带拦截器this.instance.interceptors.request.use(config.interceptors?.requestOnFulfilledFn as any,config.interceptors?.requestOnRejectedFn)this.instance.interceptors.response.use(config.interceptors?.responseOnFulfilledFn,config.interceptors?.responseOnRejectedFn)}// 封装网络请求的方法request<T = any>(config: PKRequestConfig<T>) {// 单次请求的成功拦截处理if (config.interceptors?.requestOnFulfilledFn) {config = config.interceptors.requestOnFulfilledFn(config)}// 返回的promisereturn new Promise<T>((resolve, reject) => {this.instance.request<any, T>(config).then((res) => {// 单次响应的成功拦截处理if (config.interceptors?.responseOnFulfilledFn) {res = config.interceptors.responseOnFulfilledFn(res)}resolve(res)}).catch((err) => {reject(err)})})}get<T = any>(config: PKRequestConfig<T>) {return this.instance.request({ method: 'GET', ...config })}post<T = any>(config: PKRequestConfig<T>) {return this.instance.request({ method: 'POST', ...config })}put<T = any>(config: PKRequestConfig<T>) {return this.instance.request({ method: 'PUT', ...config })}delete<T = any>(config: PKRequestConfig<T>) {return this.instance.request({ method: 'DELETE', ...config })}patch<T = any>(config: PKRequestConfig<T>) {return this.instance.request({ method: 'PATCH', ...config })}
}
export default PKRequest
// type.ts
import type { AxiosRequestConfig, AxiosResponse } from 'axios'// 针对AxiosRequestConfig进行扩展
export interface IPKInterceptors<T = AxiosResponse> {requestOnFulfilledFn?: (config: AxiosRequestConfig) => AxiosRequestConfigrequestOnRejectedFn?: (err: any) => anyresponseOnFulfilledFn?: (res: T) => TresponseOnRejectedFn?: (err: any) => any
}export interface PKRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {interceptors?: IPKInterceptors<T>
}

  • 创建网络请求的实例

    import PKRequest from './request/index'
import { BASE_URL, TIME_OUT } from './config/index'// 可以创建一个实例，也可以创建多个实例
const pkRequest = new PKRequest({baseURL: BASE_URL,timeout: TIME_OUT,interceptors: {requestOnFulfilledFn: (config) => {console.log('实例：请求成功的拦截')return config},requestOnRejectedFn: (err) => {console.log('实例：请求失败的拦截')return err},responseOnFulfilledFn: (res) => {console.log('实例：响应成功的拦截')return res},responseOnRejectedFn: (err) => {console.log('实例：响应失败的拦截')return err}}
})export default pkRequest

    // config.ts
export const BASE_URL = 'http://syt.atguigu.cn'
export const TIME_OUT = 5000

  • 使用 例如：

    import pkRequest from '@/service/index'// 发送网络请求
// 数据类型
export interface IHomeRoot {code: numbermessage: stringdata: anyok: boolean
}pkRequest.request<IHomeRoot>({url: '/api/hosp/hospital/1/5'}).then((res) => {console.log('home', res.data)})

区分 development和production环境

在实际开发中，有些变量或者标识符在开发环境和生产环境的值是不一样的。比如：baseURL=“服务器地址”。

  • 区分开发环境和生产环境

    • 方法一：以baseURL 为例：不用的环境注释掉

      // export const BASE_URL = 'http://syt.atguigu.cn' //生产环境
export const BASE_URL = 'http://syt.atguigu.cn' //开发环境

      缺点：太多依赖人为手动，不安全性太高

    • 方法二：vite环境变量¶

      Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

      • import.meta.env.MODE: {string} 应用运行的模式。
      • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
      • import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
      • import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
      • import.meta.env.SSR: {boolean} 应用是否运行在 server 上。
      let BASE_URL = ''
if (import.meta.env.PROD) {BASE_URL = 'http://syt.atguigu.cn'
} else {BASE_URL = 'http://syt.atguigu.cn'
}export const TIME_OUT = 5000
export { BASE_URL }

    • 方法三：Vite使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

      https://cn.vitejs.dev/guide/env-and-mode.html#env-files

      .env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

      • 在项目中 创建文件： .env .env.development .env.production

        在这里插入图片描述

集成ElementPlus

https://element-plus.org/zh-CN/guide/quickstart.html

  • 安装 npm install element-plus --save

  • 按需引入

    安装npm install -D unplugin-vue-components unplugin-auto-import

    // vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

问题：

  • Component name “index” should always be multi-word.eslintvue/multi-word-component-names

    • .eslintrc.cjs 中 配置
    module.exports = {root: true,extends: ...rules: {'vue/multi-word-component-names': 'off'}
}

  • 将生成到 CommonJS 输出的文件中不允许 ‘import.meta’ 元属性。ts(1470)

    The type of import.meta.

    If you need to declare that a given property exists on import.meta, this type may be augmented via interface merging.

    tsconfig.node.json

    "compilerOptions": {"module": "ESNext",}

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

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

相关文章

POI下载excel通用方法

POI下载excel通用方法

POI下载excel通用方法 最近遇到一个业务是需要下载excel&#xff0c;使用POI,这里记录一下实现过程 1、导包 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.9</version></dependency>…
阅读更多...
Python实现将pdf，docx，xls，doc，wps链接下载并将文件保存到本地

Python实现将pdf，docx，xls，doc，wps链接下载并将文件保存到本地

前言 本文是该专栏的第31篇，后面会持续分享python的各种干货知识，值得关注。 在工作上，尤其是在处理爬虫项目中，会遇到这样的需求。访问某个网页或者在采集某个页面的时候，正文部分含有docx，或pdf，或xls，或doc，或wps等链接。需要你使用python自动将页面上含有的这些信…
阅读更多...
什么是RPC并实现一个简单的RPC

什么是RPC并实现一个简单的RPC

1. 基本的RPC模型 主要介绍RPC是什么&#xff0c;基本的RPC代码&#xff0c;RPC与REST的区别&#xff0c;gRPC的使用 1.1 基本概念 RPC&#xff08;Remote Procedure Call&#xff09;远程过程调用&#xff0c;简单的理解是一个节点请求另一个节点提供的服务本地过程调用&am…
阅读更多...
C++STL：顺序容器之vector

C++STL：顺序容器之vector

文章目录 1. 概述2. 成员函数3. 创建 vector 容器的几种方式4. 迭代器vector容器迭代器的基本用法vector容器迭代器的独特之处 5. 访问元素5.1 访问vector容器中单个元素5.2 访问vector容器中多个元素 6. 添加元素6.1 push_back()6.2 emplace_back()6.3 emplace_back()和push_b…
阅读更多...
【Java/大数据】Kafka简介

【Java/大数据】Kafka简介

Kafka简介 Kafka概念关键功能应用场景 Kafka的原理Kafka 的消息模型早期的队列模型发布-订阅模型Producer、Consumer、Broker、Topic、PartitionPartitionoffsetISR Consumer Groupleader选举Controller leaderPartition leader producer 的写入流程 多副本机制replicas的同步时…
阅读更多...
SOKIT软件的使用

SOKIT软件的使用

1.模拟客户端向服务器发送报文 客户端---->TCP连接---->填写数据----->点击“发送” 2.模拟服务器接受报文 服务器---->设置IP地址与端口---->点击TCP侦听 就可以往该地址发送报文信息了
阅读更多...
回归预测 | MATLAB实现WOA-CNN-LSTM鲸鱼算法优化卷积长短期记忆神经网络多输入单输出回归预测

回归预测 | MATLAB实现WOA-CNN-LSTM鲸鱼算法优化卷积长短期记忆神经网络多输入单输出回归预测

回归预测 | MATLAB实现WOA-CNN-LSTM鲸鱼算法优化卷积长短期记忆神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现WOA-CNN-LSTM鲸鱼算法优化卷积长短期记忆神经网络多输入单输出回归预测预测效果基本介绍模型描述程序设计学习总结参考资料 预测效果 基本介绍 回归预测 …
阅读更多...
机器学习（13）--支持向量机

机器学习（13）--支持向量机

目录 一、支持向量机概述 二、Sklearn中的SVM概述 三、线性SVM损失函数 四、sklearn中进行可视化 1、导入模块 2、实例化数据集&#xff0c;可视化 3、网格点制作 4、建立模型并绘制决策边界和超平面 5、常用接口 6、如果数据是环形呢&#xff1f; 五、核函数 1、…
阅读更多...
mysql什么情况下行锁(表锁)（锁的概念）

mysql什么情况下行锁(表锁)（锁的概念）

1&#xff1a;数据表aa的设计结构 2&#xff1a; 使用navicat编写手动控制事务 3&#xff1a;先选择开启事务和执行更新操作&#xff0c;where b1&#xff08;表锁&#xff09;是不带索引&#xff0c;不提交事务&#xff0c;&#xff08;如果where b1&#xff0c;b是索引就行锁…
阅读更多...
Spring MVC 系列2 -- 创建连接、获取与输出

Spring MVC 系列2 -- 创建连接、获取与输出

上个系列总结了关于Spring MVC 项目的一些基础 ,Spring MVC就是在Spring Boot的基础上引入了Spring Web依赖.接下来就进行总结一下Spring MVC项目的创建,连接,获取参数,输出响应. 目录 1. Spring MVC 创建和连接 1.1 创建Spring MVC 项目实现与浏览器互通 1.2 RequestMapping…
阅读更多...
DEVICENET转ETHERNET/IP网关devicenet怎么读

DEVICENET转ETHERNET/IP网关devicenet怎么读

远创智控YC-EIP-DNT&#xff0c;你听说过吗&#xff1f;这是一款自主研发的ETHERNET/IP从站功能的通讯网关&#xff0c;它能够连接DEVICENET总线和ETHERNET/IP网络&#xff0c;从而解决生产管理系统中协议不同造成的数据交换互通问题。 这款产品在工业自动化领域可谓是一大利…
阅读更多...
【Linux】Linux工具

【Linux】Linux工具

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 一、Linux安装软件&#xff1a; 1.yum安装 2.Linux和Windows文件互传 问题: 3.yum卸载软件 二、vim编辑器 1.命令模式 2.vim配置项说明 3.vim操作总结 一、Linux安装软件&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023