# mu-uniapp-vite **Repository Path**: jfCodeSRM/mu-uniapp-vite ## Basic Information - **Project Name**: mu-uniapp-vite - **Description**: 这是一个极简的 uniapp + vite/4 + vue/3 项目模板。是为了响应个别开发者对项目有着"极致纯净 & 百搭"的需求而设计。因此项目中只提供"基础的 结构 和 开发依赖"，并支持以命令的方式运行，以实现自动化部署的功能！ - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 3 - **Created**: 2024-09-21 - **Last Updated**: 2024-09-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # mu-uniapp-vite ## 项目介绍 这是一个极简的 uniapp + vite/4 + vue/3 项目模板。是为了响应个别开发者对项目有着`极致纯净 & 百搭`的需求而设计。因此项目中只提供`基础的 结构 和 开发依赖`，并支持以命令的方式运行，以实现自动化部署的功能！ ## 开发环境 - Node.js 20.12.2 - npm 10.5.0 - yarn 1.22.19 - Vite 4.3.5 - Vue 3.3.11 - 更多参考：[package.json](package.json) ## 开始项目 - 安装上述开发环境（注意版本！！！） - 命令行输入 `yarn` 安装依赖 - 命令行输入 `yarn dev:h5` 运行项目（默认运行 H5 端，如需运行其他端，请自行修改命令） ## 项目特点 - 基于 VUE3 开发，支持 `Composition API` 和 `Options API` 两种模式 - 支持 Vuex 持久化（项目已集成，使用方法下滑查看） - 支持 路由拦截（项目已集成） - CSS原子化（项目已集成，具体实现参考：[global.scss](static/scss/global.scss)） - HTTP请求接口封装（项目已集成，使用方法下滑查看） - 支持命令行运行（支持自动化部署） - 支持 ESLint & Prettier 代码规范（项目已集成，可自行更改规则） - 全局 & 通用方法的封装（项目已集成示例，可能据需求自行添加，使用方法下滑查看） ## 注意 - 该项目目前只调试了 `H5` 端，`APP` 端和 `小程序` 端暂未调试，如果需要请自行调试！！！ - 例如 `小程序` 端，需要在 `manifest.json` 文件中配置 `mp-weixin` 等信息 - `global.scss` 中需要将 `*、ul、li` 等 `小程序` 中不支持的 `CSS选择器` 进行条件编译等操作 ## 代码风格规范优先级 - 优先级A：必要的（项目开发中必须遵守的规则） - 优先级B：强烈推荐（项目开发中尽可能的要遵守，保持代码风格的一致性，但并不会带来项目上的安全风险） - 优先级C：推荐 - 优先级D：谨慎使用 ## 代码风格规范（为减少开发负担只规定 A、B 优先级的规范） | 说明 | 代码风格 | 优先级 | 示例 | | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | :----: | :--------------------------------------------------------: | | 组件命名 | 组件名为多个单词 | A | MyComponents | | 组件的 data 属性 | 必须是一个函数并 return 一个对象 | A | data: ()=>{ return {} } | | 组件的 props 属性 | 需要定义接收的类型 | A | props: { showStatus: String } | | v-for | 必须绑定 key 属性，最好是唯一不变的值，如果没有也得绑定自带的 index 为值 | A |
  • | | 组件设置样式作用域 | 组件的 style 标签必须设置作用域，APP根组件除外 | A | < style scoped > | | 私有 property 名 | 在开发通用功能时，要保持非公开的 property 自由化，VUE3已经自动最大化的规避，特殊情况无法规避请添加 "$\_" 前缀，并附带命名空间 | A | const $\_my_property = XXX | | 组件文件、注册、引用命名 | 除 `pages` 目录外的所有的单文件 `组件文件命名、引用、注册` 包括组件内的 `name` 命名，均使用大驼峰命名法，且至少两个单词 | B | MyComponents | | 普通目录命名 | 蛇形命名法（横线拼接） | B | /apis/system-admin/ | | 普通文件命名 | 蛇形命名法 | B | /user-login.js | | 同业务组件命名 | 同业务或同页面下的组件，文件名命名时保持统一的前缀 | B | HomeHead、HomeBody、HomeFoot | | 页面/组件目录命名 | 以业务为基准新建目录，词要达意，使用大驼峰命名法，过长使用使用首字母大写缩写 | B | Home、ShoppingMall、URLAdmin | | 单文件组件中 name | 大驼峰命名法 | B | name: 'UserHome' | | 单文件组件中 props | 小驼峰命名法 | B | props: { showStatus: String } | | 单文件组件中 data,computed | 蛇形命名法（下划线拼接） | B | { name：xxx, user_age: 18 } | | 单文件组件中 methods | 小驼峰命名法 | B | userLogin:function(){} | | 单文件组件中 ref | 小驼峰命名法 | B | ref=userFrom | | API中的接口命名 | 大驼峰命名法 | B | const UserLogin = async ()=>{} | | 普通 变量 与 常量 | 蛇形命名法（下划线拼接） | B | let a_1 = 1, const b_2 = 2 | | 普通 函数 命名 | 小驼峰命名法 | B | function userLogin(){} \|\| const userLogin = function(){} | | 标签属性排序 | 除 `id、ref、key` 以外所有的 attr 均按照，指令 > 静态属性 > 动态属性 > 速记属性 > 绑定事件（按照 eslint 规则顺序） | B | v-if > class='' > :class='' > disabled > @click='' | | 事件绑定 | 绑定事件如需接收回调或参数，则使用 `@event="funName"` 方式绑定，否则均使用 `@event=funName()` 方式绑定 | B | 接收参数：@click=funName，不接收参数：@click=funName() | | 组件/实例内的选项顺序 | name > components > mixins > props > data > computed > watch > created(生命周期) > methods | B | -- | ## 项目目录（项目结构） ```text |-- mu-uniapp-vite |-- apis //api 集中管理目录 | |-- axios-api.js //api 配置文件（用于导入接口） | |-- axios-config.js //api 配置文件（用于配置Axios） | |-- main //api - 业务目录，api以业务为基础作为目录 | |-- system.js //api 文件（其中包含 API 方法） |-- components //业务组件的根目录 | |-- Home //业务组件目录，建议根据业务命名，且与【页面组件】目录名称保持同步（仅包含关系） | | |-- IndexText.vue //业务模块组件（请使用大驼峰命名法） |-- pages //页面组件的根目录 | |-- Common //页面组件目录，建议根据业务命名,且与【业务组件】目录名称保持同步（仅包含关系） | | |-- CountNumber.vue //页面组件（请使用大驼峰命名法） |-- static //静态资源根目录 | |-- scss //用于存放所有 Scss 文件 | | |-- global.scss //用于定义全局的样式，在 App.vue 中引入 | |-- images //用于存放所有图片文件 |-- store //vuex 根目录 | |-- index.js //vuex 配置文件 | |-- mixin.js //vuex 混入配置文件 | |-- mixin-config.js //vuex 配置混入到所有实例的 state | |-- persistence.js //vuex 配置持久化的文件，将需要持久化的 key 存放到导出数组中 | |-- modules //vuex 模块目录 | |-- global.js //vuex 模块文件 |-- uni_modules //用于存放【第三方成品组件、插件】的目录 |-- utils //用于存放【工具函数/全局配置】的目录 |-- app-config.js //应用的全局配置项 |-- common.js //业务共通方法，将可能多个组件复用的逻辑抽离到此处 |-- global.js //项目全局方法 |-- interceptor.js //拦截器的配置 |-- .env //全局环境变量配置文件 |-- .eslintignore //eslint 配置文件，排除的文件夹 |-- .eslintrc.js //selint 配置文件 |-- .gitignore //git 配置文件，排除的文件夹 |-- .prettierignore //prettier 配置文件，排除的文件夹 |-- .prettierrc.js //prettier 配置文件 |-- App.vue //项目跟组件，用于应用配置，用来配置App全局样式以及监听。不用来写业务 |-- index.html //单页面项目入口文件，HTML入口文件，用于引入一些项目依赖等 |-- main.js //单页面项目入口文件，JS入口文件，用户配置项目依赖等项目配置 |-- manifest.json //uniapp 配置文件 |-- package.json //项目配置文件 |-- pages.json //uniapp 页面配置文件 |-- README.md //项目描述文件 |-- uni.scss //uniapp 全局 Scss 文件，请谨记这个文件会被自动打包到每个组件中，所以请不要在此定义全局样式，推荐这个文件只定义一些全局变量即可。 |-- vite.config.js //vite 配置文件 |-- yarn.lock //yarn 项目依赖锁，用于保证再多人开发的情况下，大家的项目依赖版本保持一致 ``` ## CSS原子化 - 项目中集成了 `flex、margin、padding` 三种布局类的原子化样式 - 布局类原子化类名构成：`前缀-类型[方向]-数值`，例如：`m-ma-auto、m-pl-100`，其中 `m` 是前缀，`ma` 是类型，`auto || 10` 是数值 - 支持 !important 加权重，可以在类后拼接 `__i`，例如：`u-flex__i` - 支持列表： `m-ma-*`、 `m-ml-*`、 `m-mr-*`、 `m-mt-*`、 `m-mb-*`、 `m-pa-*`、 `m-pl-*`、 `m-pr-*`、 `m-pt-*`、 `m-pb-*`、 `m-flex-*`、 `m-flex`、 `m-flex-column`、 `m-flex-wrap`、 `m-flex-nowrap`、 `m-col-top`、 `m-col-center`、 `m-col-bottom`、 `m-col-baseline`、 `m-col-stretch`、 `m-row-left`、 `m-row-center`、 `m-row-right`、 `m-row-between`、`m-row-around` ## Vuex实现数据的持久化 与 数据混入到全局实例 ### Vuex实现数据持久化 1. 第一步，将需要持久化的数据存放在【指定】模块 `state` 中，例如：`/store/modules/global.js` 2. 第二步，将需要持久化的数据的 `key` 配置到 `/store/persistence.js` 文件中。注意配置的`key` 需要与第一步中存放在 `state` 中的 `key` 一致 ### Vuex实现将 state 混入到全局实例 - 将需要混入的 `state` 配置到 `/store/mixin-config.js` 文件中即可，写法如下 ```javascript export default { //全模块混入 global: 'global', //混入指定的数据 vuex_token: state => state.global.vuex_token }; ``` ## 全局 & 通用方法的封装 ### 全局方法 全局方法指的是将方法挂载到Vue实例上，方便在各个组件中调用， 具体方式参考 `/utils/global.js` 文件 ### 通用方法 通用方法指的是将多个页面都能用到的方法抽离出来，同意进行维护，在使用的时候使用 import 引入即可，具体方式参考 `/utils/common.js` 文件 ## 请求的处理 ### 封装请求 - 所有的请求均存放在 `/apis` 文件夹中 - 根据业务创建子文件夹，命名与业务名称一致 或 API 路径一致，例如：`/main` - 创建对应业务的请求文件，例如：`system.js` - 最后在 `/apis/axios-api.js` 中进行引入并挂载到全局 `$apis` 中 - Tips：在定义API时，按照模板把注释写完整 ```javascript /* system.js */ /*** * 用户登录 * @params {Object} param={account,password} 用于请求的参数 * @return {Promise} 返回一个Promise对象 **/ const Login = async param => Axios.post('/main/login', param); /* axios.api.js */ //导入通用接口 import system from './main/system'; // 挂载到全局 Vue.config.globalProperties.$apis = { ...system }; ``` ### 执行请求 - 请求方法定义在 `methods` 中 - Tips: `try、catch` 是必须有的结构，`finally` 为可选项，根据具体代码进行选择 ```javascript /* template */ 登录 /* script */ login: async function () { //验证参数合法性 await this.$refs.loginForm.validate(); //定义参数 const params = { account: this.login_form.account, password: this.login_form.password }; //处理请求 try { //请求前的处理 uni.showLoading({ title: '登录中...' }); //发送请求 const res = await this.$apis.Login(params); //响应后的处理 console.log(res); } catch (e) { //错误处理 console.error(e); uni.hideLoading(); } } ``` ## 项目中的注释的使用 - ※ 开发项目时，请按照规定将注释写完整，方便他人理解 - 组件/实例中，`template、script、style` 三个部分的内容均要书写注释 - template 的注释用于快速了解组件结构 - script 的注释用于了解项目逻辑 - style 的注释用于区别组件库样式和自定义样式 ### template 注释的应用 ```javascript ``` ### script 注释的应用 ```javascript ``` ### style 注释的应用 ```javascript