roamdy / uni-app-template

uni-app 通用模板

uni-app 通用模板

基于官方脚手架创建。

• 预览地址

分支	版本	说明
master	vue 3.x + vite	默认版本
v2	vue 2.6 + webpack	-

功能清单

1. http请求封装，具体使用看api/common.ts的几个示例。

2. scss使用，全局样式styles/index.scss的自动导入；注意：建立其他全局样式文件时，在styles/index.scss里面@import xxx.scss即可，部分注意事项请看uni.scss代码注释

3. 内置了一些常用的工具函数utils/index.ts。

4. 表单验证组件

5. 触底加载更多组件

6. 弹出选择器

后面有新功能再补充

自定义组件使用大写+驼峰

在<template>中，自己写的组件建议使用大写的方式，理由有两点

1. 便于区分一些第三方库或者框架类的组件，这些就用小写+-连接，自定义的组件使用大写+驼峰式；

2. 页面标签很多时，能快速定位组件和排查组件问题所在，因为import进来使用的时候，就是大写+驼峰式，所以直接双击变量然后ctrl + D就可以找到对应位置了，而且编辑器颜色对大写开头的组件也有颜色区分；

示例：

<template>
  <div>
    ...一些其他标签
    <!-- 默认使用方式 -->
    <UploadImg :src="formData.pageAdImg" @change="onUpload" tip="尺寸规格：750px * 391px" />
    ...一些其他标签
    <UserHK :show="showUserHK" @close="closeUserHK" :pageType="pageType" @update="getHkUsers" />
    ...一些其他标签
    <UserKCH :show="showUserKCH" @close="closeUserKCH" :pageType="typeKCH" @update="getKchUsers" :info="infoUserKCH" />
    ...一些其他标签
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import UploadImg from '@/components/UploadImg/index.vue';
import UserHK from './components/UserHK/index.vue';
import UserKCH from './components/UserKCH/index.vue';

export default defineComponent({
  components: {
    UploadImg,
    UserHK,
    UserKCH
  },
  ...more
})
</script>

这里有个细节：导入的组件带上完整路径和后缀，才能使用ctrl + 鼠标点击跳转到对应组件目录

项目配置相关

当前项目所有配置全部集中写在utils/config.js文件中，不用再处理各种配置文件，过于复杂，不利于代理组织和维护，动态配置也应该在该文件集中处理。

项目不使用eslint，理由是这个工具不够灵活，电脑性能不好的话可能每次改动代码都要等上不少时间，之后可以根据团队小组约定使用。

默认vscode配置代码风格约束：

{
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "vetur.format.options.tabSize": 2,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.updateImportsOnFileMove.enabled": "always",
}