Git Product home page Git Product logo

zhousg / consult-patient-h5-vue3-ts-pinia-vant Goto Github PK

View Code? Open in Web Editor NEW
97.0 3.0 20.0 1.61 MB

Vue3, Vue Router, Pinia, Composition API, TypeScript, Vant4, VueUse, Axios, SocketIO, PostCSS, ESlint, Prettier, Husky, Lint-staged, Mock, Amap, QQ Login, Alipay Sandbox, Eruda, CI/CD, Vercel, Mobile Project.

Home Page: https://consult-patient-h5-vue3-ts-pinia-vant.vercel.app/

License: MIT License

JavaScript 0.59% HTML 1.39% Vue 77.47% TypeScript 16.07% SCSS 4.43% Shell 0.05%
typescript vue pinia vant vitest mobile template eslint husky prettier

consult-patient-h5-vue3-ts-pinia-vant's Introduction

consult-patient-vue3 (Vue3 + TS + Pinia + Vant4)

This template should help get you started developing with Vue 3 in Vite. Page Views Count

Document

开发文档:https://zhousg.github.io/patient-h5-note/
国内站点:https://zhoushugang.gitee.io/patient-h5-note/

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

  1. Disable the built-in TypeScript Extension
    1. Run Extensions: Show Built-in Extensions from VSCode's command palette
    2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Lint with ESLint

pnpm lint

consult-patient-h5-vue3-ts-pinia-vant's People

Contributors

zhousg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

consult-patient-h5-vue3-ts-pinia-vant's Issues

utils 工具类里面怎么会引入vant?

新手上路,从项目中学到了很多。感谢。不过有些地方,我总感觉不太对劲?

比如响应拦截器里面有行代码: showToast(res.data.message || '业务失败'),
我觉得 utils 工具类不应该直接依赖UI组件?应该继续把响应往上层传,在.vue那边弹窗?不然,以后想换个UI组件库,还得去全局搜各个地方的 vant 调用?

还有个挺纠结的地方, login/index.vue 里:
const res = isPass.value ? await loginByPassword(mobile.value, password.value) : await loginByMobile(...)
...
showSuccessToast('登录成功')

这里感觉挺怪的,调用 login 之后,直接就提示'登录成功'了,就好像不会失败一样,结果虽然没错,但总感觉失去了业务代码流转的可读性,不利于代码阅读和维护。

感觉我学的那种古老的js请求代码更有易于阅读?
let res = await login(mobile.value, password.value)
if(res.success){
//显示成功或者跳转
}else{
//错误弹窗
}
哪怕是用 catch 做失败分支,然后显示失败信息,我都觉得整体代码条理清晰一些。

想问下,我想将 request.ts 里的 vant 调用调整到.vue层次,然后保持清晰的代码判断逻辑,整体应该怎么改?

vscode 不识别组件

淑淑我是83期的一转眼也三年多了,目前遇到的问题是 vscode不识别组件vue3+ts+uniapp,包括自己写的那个components下的 通过正则去配置 也不行 vscode插件也使用volar ts也托管了 vue2的也禁用了 就是不好使
0.src\components\HbcyPopup.vue

  1. src\types\components.d.ts 下
// src/types/components.d.ts 全局组件类型声明
import HbcyIconTitle from '@/components/HbcyIconTitle.vue'
import HbcyButton from '@/components/HbcyButton.vue'
import HbcyTitleText from '@/components/HbcyTitleText.vue'
import HbcyPopup from '@/components/HbcyPopup.vue'
declare module 'vue' {
  export interface GlobalComponents {
    HbcyIconTitle: typeof HbcyIconTitle
    HbcyButton: typeof HbcyButton
    HbcyTitleText: typeof HbcyTitleText
    HbcyPopup: typeof HbcyPopup
  }
}

declare module 'vue' 换成 @vue/runtime-core uniapp的组件就识别了 但是 自定义组件 这种就不识别只识别驼峰的
2. page.json

{
	// 组件自动导入
	"easycom": {
		// 是否开启自动扫描 @/components/$1/$1.vue 组件
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
			// 以 Hbcy 开头的组件,在 components 目录中查找
			"^Hbcy(.*)": "@/components/Hbcy$1.vue"
		}
	},
	}

网上根本查不到也不会查,vue3+ts就是找黑马要的你的课和b站看的uni那个 这个vscode问题 太苦恼了

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.