目录

一.pages.json文件：

1.组件自动导入规则（easycom）：

2.页面配置（pages）：

3.全局样式（globalStyle）：

4.底部TabBar配置（tabBar）：

二.manifest.json文件：

1. 应用基本信息：

2. App-Plus 特有配置：

 3. QuickApp 特有配置：

4. 小程序特有配置：

 5. UniStatistics 配置：

6. vueVersion 配置：

三.App.vue：

四. main.ts：

五.uni.scss：

配置 manifest.json： 

一.pages.json文件：

配置页面路由、导航条、选项卡等页面类信息

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 

下面举例四个常用配置，其余可见下面的官网教程：pages.json 页面路由 | uni-app官网 

1.组件自动导入规则（easycom）：

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
    "^Xtx(.*)": "@/components/Xtx$1.vue"
  }
}

easycom: 配置组件的自动引入规则：

• autoscan: 设置为 true 时，UniApp 会自动扫描项目中的组件，无需手动引入。适用于简单的组件引用场景。
• custom: 自定义组件引入规则：
  • ^uni-(.*): 匹配 uni- 开头的组件，将自动引入 @dcloudio/uni-ui/lib/uni-xxx/uni-xxx.vue。
  • ^Xtx(.*): 匹配 Xtx 开头的组件，路径会在 @/components/Xtx 目录下查找。

2.页面配置（pages）：

"pages": [
  {
    "path": "pages/index/index",
    "style": {
      "navigationStyle": "custom", // 隐藏默认导航
      "navigationBarTextStyle": "white",
      "navigationBarTitleText": "首页"
    }
  },
  {
    "path": "pages/my/my",
    "style": {
      "navigationBarTitleText": "我的"
    }
  },
  ...
]

pages: 配置应用的页面路由：

• path: 页面路径，表示该页面相对项目根目录的路径。
• style: 页面样式配置，可以用来设置该页面的导航栏等：
  • navigationStyle: custom 表示自定义导航栏，如果不需要显示导航栏，可以设置为 none。
  • navigationBarTextStyle: 设置导航栏文字颜色，如 white 或 black。
  • navigationBarTitleText: 设置导航栏标题文本。

3.全局样式（globalStyle）：

"globalStyle": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "",
  "navigationBarBackgroundColor": "#F8F8F8",
  "backgroundColor": "#F8F8F8"
}

globalStyle: 配置全局样式，适用于所有页面的默认样式：

• navigationBarTextStyle: 设置全局导航栏文字颜色，black 或 white。
• navigationBarTitleText: 设置全局导航栏标题文本（可以为空）。
• navigationBarBackgroundColor: 设置导航栏背景颜色。
• backgroundColor: 设置整个页面的背景色。

4.底部TabBar配置（tabBar）：

"tabBar": {
  "color": "#333",
  "selectedColor": "#27ba9b",
  "backgroundColor": "#fff",
  "borderStyle": "white",
  "list": [
    {
      "text": "首页",
      "pagePath": "pages/index/index",
      "iconPath": "static/tabs/home_default.png",
      "selectedIconPath": "static/tabs/home_selected.png"
    },
    ...
  ]
}

tabBar: 配置底部 TabBar 栏的样式及项：

• color: 未选中时图标的颜色。
• selectedColor: 选中时图标的颜色。
• backgroundColor: TabBar 背景颜色。
• borderStyle: 设置 TabBar 的边框样式，通常为 white。
• list: 配置 TabBar 的各个 Tab 项。
  • text: Tab 项的文本。
  • pagePath: 对应的页面路径。
  • iconPath: 未选中时显示的图标路径。
  • selectedIconPath: 选中时显示的图标路径。

二.manifest.json文件：

manifest.json 是 UniApp 项目中的配置文件，用于描述应用的基本信息、平台特定配置、权限要求、发布配置等。它对整个项目的打包和发布有很大的影响，确保应用在不同平台（如 App、微信小程序、支付宝小程序等）上的正确运行。

详细配置文件可见官网：manifest.json 应用配置 | uni-app官网 

1. 应用基本信息：

{
    "name": "***",
    "appid": "",
    "description": "",
    "versionName": "1.0.0",
    "versionCode": 1,
    "transformPx": false
}

• name: 应用名称，展示给用户时会使用。
• appid: 应用的唯一标识，通常是小程序、App等平台要求填写的字段，可以为空。
• description: 应用的简短描述，用于介绍应用的功能。
• versionName: 应用的版本名称，通常显示在用户设备上。
• versionCode: 应用的版本号，在发布新版本时需要递增，用于区分不同版本。
• transformPx: 是否将 px 转换为 rem。默认值是 false，表示不进行转换。

2. App-Plus 特有配置：

"app-plus": {
    "usingComponents": true,
    "nvueStyleCompiler": "uni-app",
    "compilerVersion": 3,
    "splashscreen": {
        "alwaysShowBeforeRender": true,
        "waiting": true,
        "autoclose": true,
        "delay": 0
    },
    "modules": {},
    "distribute": {
        "android": {
            "permissions": [
                "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                ...
            ]
        },
        "ios": {},
        "sdkConfigs": {}
    }
}

android.permissions 中列出的权限是 Android 平台应用运行时请求的权限，必须在应用安装前声明。如果使用了需要访问硬件（如摄像头、传感器等）或隐私数据（如联系人、短信等）的功能，必须在此列出相应的权限。 

• usingComponents: 是否启用自定义组件，通常设置为 true。
• nvueStyleCompiler: 配置 nvue 样式编译器的使用方式，通常为 uni-app。
• compilerVersion: 编译器版本，表示当前使用的编译器版本，通常为 3。
• splashscreen: 启动页相关配置。
  • alwaysShowBeforeRender: 是否在渲染页面之前总是显示启动页。
  • waiting: 是否显示加载动画。
  • autoclose: 是否在页面渲染后自动关闭启动页。
  • delay: 启动页显示的延迟时间，单位是毫秒。
• modules: 配置需要使用的模块，通常是插件或 SDK 等。
• distribute: 应用发布相关配置，包括不同平台（如 Android、iOS）特有的设置。
  • android: Android 打包配置。
    • permissions: 配置应用需要申请的权限，这些权限是 Android 系统为确保应用正常运行而请求的。
  • ios: iOS 打包配置，通常在这里配置应用需要的特定权限或功能。
  • sdkConfigs: SDK 配置，通常包括第三方 SDK 配置（如推送、分析等）。

 3. QuickApp 特有配置：

"quickapp": {}

quickapp: 这是针对快应用平台的配置，通常留空，除非有快应用的相关配置需求。

4. 小程序特有配置：

"mp-weixin": {
    "appid": "wx59832c3f6b76abbb",
    "setting": {
        "urlCheck": false
    },
    "usingComponents": true
},
"mp-alipay": {
    "usingComponents": true
},
"mp-baidu": {
    "usingComponents": true
},
"mp-toutiao": {
    "usingComponents": true
}

• mp-weixin: 配置微信小程序相关设置。
  • appid: 小程序的唯一标识（微信小程序的 AppID）。
  • setting: 小程序特定的设置，例如 urlCheck 用于检查 URL 的合法性。
  • usingComponents: 是否启用自定义组件。
• mp-alipay、mp-baidu、mp-toutiao: 配置其他小程序平台（如支付宝、百度、字节跳动）相关设置，通常涉及到组件的使用和平台特定的配置。

 5. UniStatistics 配置：

"uniStatistics": {
    "enable": false
}

uniStatistics: 用于统计和分析应用的使用情况。enable: 是否启用统计功能，false 表示不启用。

6. vueVersion 配置：

"vueVersion": "3"

 vueVersion: 配置项目使用的 Vue.js 版本。在 UniApp 中，可以选择使用 Vue 2 或 Vue 3，这里设置为 Vue 3，表示项目使用 Vue 3 构建。

三.App.vue：

App.vue 是应用的根组件，它负责配置一些全局的页面元素、路由等。通常，App.vue 是单页面应用的入口文件，在 UniApp 中，可以定义一些全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在App.vue中。

所有页面都是在App.vue下进行切换的，是应用入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。这个文件的作用包括：监听应用生命周期、配置全局样式、配置全局的存储globalData。应用生命周期仅可在App.vue中监听，在页面监听无效。

<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'

onLaunch(() => {
  console.log('App Launch')
})
onShow(() => {
  console.log('App Show')
})
onHide(() => {
  console.log('App Hide')
})
</script>

<style lang="scss">
// 字体图标
@import '@/styles/fonts.scss';

view,
navigator,
input,
scroll-view {
  box-sizing: border-box;
}

button::after {
  border: none;
}

swiper,
scroll-view {
  flex: 1;
  height: 100%;
  overflow: hidden;
}

image {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

// 两行省略
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

四. main.ts：

main.ts 是项目的入口文件，负责启动和初始化 Vue 实例，并应用全局配置。它也是应用启动时执行的第一段代码，通常在这里做路由、状态管理、插件等初始化。

import { createSSRApp } from 'vue'
import pinia from './stores'

import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App) 

  app.use(pinia) // 将 Pinia 插件添加到 Vue 应用
  return {
    app,
  }
}

在 main.ts 中，我们创建了一个 Vue 应用实例，并将 Pinia 插件应用到该实例。这里的代码主要是进行 应用初始化，将 Pinia 状态管理库与 Vue 应用关联。app.use(pinia) 使得整个 Vue 应用都能够访问 Pinia 的状态管理功能。

Pinia 作为一个插件，通过 app.use(pinia) 的方式加入到 Vue 的应用中，使得应用中的所有组件都可以访问到 Pinia 中定义的状态。

 stores/index.ts 中的 Pinia 配置：

在 store/index.ts 中，我们创建了 Pinia 实例，并且使用了 pinia-plugin-persistedstate 插件来实现持久化存储（即使刷新页面，应用的状态能够保留下来）。随后通过 export default pinia 将 pinia 实例导出，方便在 main.ts 中引用。 

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

// 创建 pinia 实例
const pinia = createPinia()

// 使用持久化存储插件
pinia.use(persist)

// 默认导出，给 main.ts 使用
export default pinia

// 模块统一导出
export * from './modules/member'

通过 export * from './modules/member'，我们将模块化的状态管理逻辑（如会员信息、购物车信息等）统一导出，这样就可以在应用中按需引入不同的状态模块，而无需每次都手动引入。

随后在stores/modules/member.ts文件中配置：

import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { LoginResult } from '@/types/member'

// 定义 Store
export const useMemberStore = defineStore(
  'member',
  () => {
    // 会员信息
    const profile = ref<LoginResult>()

    // 保存会员信息，登录时使用
    const setProfile = (val: LoginResult) => {
      profile.value = val
    }

    // 清理会员信息，退出时使用
    const clearProfile = () => {
      profile.value = undefined
    }

    // 记得 return
    return {
      profile,
      setProfile,
      clearProfile,
    }
  },
  {
    // TODO: 持久化
    persist: process.env.VUE_APP_PLATFORM === 'h5' ? true : {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key); // 同步获取
        },
        setItem(key, value) {
          uni.setStorageSync(key, value); // 同步存储
        }
      }
    }
  },
)

五.uni.scss：

uni.scss 是 UniApp 项目中的一个全局样式文件，通常用于存放全局的 SCSS 样式和变量。它能够帮助开发者定义整个应用的共享样式，例如全局的颜色、字体、布局等，确保在多个页面和组件中复用统一的样式。

在 UniApp 项目中，uni.scss 通常放置在 src/ 或 src/styles/ 目录下，具体位置可以根据项目结构调整。你只需确保在 manifest.json 文件中配置好使用 SCSS，并且确保文件位置正确。

/* 定义全局颜色变量 */
$primary-color: #27ba9b;
$secondary-color: #333;
$border-color: #e0e0e0;
$background-color: #f8f8f8;

/* 定义字体变量 */
$font-family: 'Arial', sans-serif;
$font-size: 16px;

/* 定义全局的导航栏样式 */
.navigation-bar {
  background-color: $primary-color;
  color: white;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

/* 设置页面默认背景 */
body {
  background-color: $background-color;
  font-family: $font-family;
  font-size: $font-size;
  color: $secondary-color;
}

/* 按钮样式 */
button {
  background-color: $primary-color;
  border-radius: 5px;
  color: #fff;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

/* 设置全局公共容器样式 */
.container {
  width: 100%;
  padding: 10px;
  margin: 0 auto;
}

如果你使用 SCSS，你需要在 manifest.json 文件中确保配置了 SCSS 编译功能。

配置 manifest.json： 

{
  "app-plus": {
    "usingComponents": true,
    "nvueStyleCompiler": "uni-app",
    "compilerVersion": 3
  }
}

 这里通过 nvueStyleCompiler 配置指定使用 UniApp 的 SCSS 编译器。