lex-xin 0f4ea8f750 修改 | 3 miesięcy temu | |
---|---|---|
dist | 2 lat temu | |
public | 2 lat temu | |
src | 2 lat temu | |
templates | 2 lat temu | |
.browserslistrc | 2 lat temu | |
.editorconfig | 2 lat temu | |
.eslintignore | 2 lat temu | |
.eslintrc.js | 2 lat temu | |
.gitignore | 2 lat temu | |
.prettierrc.js | 2 lat temu | |
LICENSE | 2 lat temu | |
README.md | 2 lat temu | |
auto-imports.d.ts | 2 lat temu | |
babel.config.js | 2 lat temu | |
components.d.ts | 2 lat temu | |
index.html | 2 lat temu | |
jsconfig.json | 2 lat temu | |
package-lock.json | 3 miesięcy temu | |
package.json | 2 lat temu | |
plopfile.js | 2 lat temu | |
postcss.config.js | 2 lat temu | |
tailwind.config.js | 2 lat temu | |
tsconfig.json | 2 lat temu | |
vite.config.ts | 2 lat temu | |
yarn.lock | 3 miesięcy temu |
This template should help get you started developing mobile applications with Vue3 and Typescript and Vant in Vite.
yarn install
yarn start
yarn build
yarn lint
yarn generate
/src/student -- 学生端页面目录
/src/teacher -- 老师端页面目录
/src/views 两端共用页面,路由最好配置到 routes-common 文件中
/src/components -- 公用组件
1、图片上传
2、图片裁切
3、图形验证码
4、协议
5、视频上传
/src/business-components -- 业务组件
1、详情头部
1、所有的图片和视频尺寸统一 3:2 2、所有的金额四舍五入保留两位小数, 所有的金额保留2位小数,有百分符
postMessage({ api: 'chooseFile', content: { type: 'img' | 'video' | 'file' | 'midi' | 'mp3' | 'xml', max: 1 }}, (res) => { })
postMessage({ api: 'joinLiveRoom', content: { roomId: 'xxx',
teacherId: 'xxx'
})
postMessage({ api: 'joinChatGroup', content: {
type: 'multi', // single 单人 multi 多人
id: item.id
} })
postMessage({ api: 'paymentOrder', content: {
orderNo: this.orderInfo.orderNo,
payInfo: `alipays://platformapi/startapp?saId=10000007&qrcode=${res.data.pay_info}`
} })
postMessage({api:'setBarStatus',content:{status:1}});
postMessage({api:'backIconChange',content:{iconStyle:'black'}});
postMessage({ api: 'getNavHeight' })
export const getAssetsHomeFile = (fileName: string) => {
const path = ../images/${fileName}
const modules = import.meta.globEager('../images/*')
return modules[path].default
}
Vant uses px
unit by default,You can use tools such as postcss-pxtorem
to transform px
unit to rem
unit.
PostCSS config example:
// .postcssrc.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
you can use tools such as postcss--px-to-viewport to transform px
unit to viewport units (vw, vh, vmin, vmax).
PostCSS config example:
// .postcssrc.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
},
},
};
If the size of the design draft is 750 or other sizes, you can adjust the rootValue
to:
// .postcssrc.js
module.exports = {
plugins: {
// postcss-pxtorem version >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};
.vue
Imports in TSSince TypeScript cannot handle type information for .vue
imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue
imports (for example to get props validation when using manual h(...)
calls), you can enable Volar's .vue
type support plugin by running Volar: Switch TS Plugin on/off
from VSCode command palette.