全局配置

关于SCSS

fusions-ui依赖SCSS，您必须要安装此插件，否则无法正常运行。

如果您的项目是由 HBuilder X 创建的，如果已经安装scss插件，请忽略此步骤，如果没有，请在 HBuilder X 菜单的 工具 -> 插件安装 中找到 scss/sass编译 插件进行安装，如果不生效，重启 HBuilder X 即可。
如果您的项目是由 vue-cli 创建的，请通过以下命令安装对 sass(scss) 的支持，如果已安装，请忽略

javascript

// 安装sass
npm i sass -D

// 安装sass-loader，注意需要版本，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader -D

准备工作

在进行配置之前，请确保您已经根据安装中的步骤对fusions-ui进行了npm安装，如果没有，请执行安装：

javascript

// 如果您的根目录没有 package.json 文件的话，请执行如下命令：
// npm init -y

// 安装 fusions-ui
npm install fusions-ui

配置步骤

在项目根目录中的 main.js 中，引入并使用 fusions-ui，注意这两行要放在 import App from './App' 之后：

javascript

// 引入全局FusionsUI
import FusionsUI from 'fusions-ui';

// 使用全局FusionsUI
// #ifndef VUE3
Vue.use(FusionsUI);
// #endif

// #ifdef VUE3
app.use(FusionsUI);
// #endif

配置easycom组件模式

此配置需要在项目 pages/json 中进行：

温馨提示

uni-app 为了调试性能的原因，修改 easycom 规则不会实时生效，配置完后，您需要重启 HBuilder X 或者重新编译项目才能正常使用 fusions-ui 的功能。
请确保您的 pages.json 中只有一个 easycom 字段，否则请自行合并多个引入规则。

json

{
    pages: [
       ...
    ],
    "easycom": {
        "autoscan": true,
        "custom": {
            "^fu-(.*)": "fusions-ui/components/$1/src/$1.vue"
        }
    }
}

引入fusions-ui基础样式

注意

在 App.vue 中首行的位置引入，注意给 style 标签加入 lang="scss" 属性

css

<style lang="scss">
    /* 注意要写在第一行，同时给 style 标签加入 lang="scss" 属性 */
    @import "fusions-ui/index.scss";
</style>

内置路由管理

注意

为了不额外管理，此配置需要在 pages.json 中进行配置，请确保您的 pages.json 没有注释，否则请自行删除。

需确保每个命名路由名称唯一，避免冲突。如果您没有在 pages.json 中配置 name 属性，默认 path 是为 name 属性

使用此路由提供了两个参数进行配置，使用方法参考路由跳转：

name 路由名称，跳转时使用
type 跳转类型，可选值 switchTab、reLaunch、navigateTo、redirectTo

javascript

app.use(FusionsUI, {
    openRouter: true
});

优势

为什么用 name 属性进行跳转？

代码简洁性与可读性

使用名称跳转更简洁，尤其在路径较长或复杂时。
代码可读性更高，便于团队协作和维护。

路径变更的灵活性

当页面路径发生变化时（如文件重命名或结构调整），只需修改pages.json中的path字段，无需修改所有跳转代码。
减少因路径硬编码导致的错误风险。

减少耦合性

不再依赖具体路径结构，只需知道路由名称和参数即可跳转或重定向。
例如：this.$fu.$openPage({ name: 'home' })，无需关心home页面的具体路径。

便于维护与扩展

将路由与名称关联，使得代码更易于维护和扩展。
项目规模扩大时，路径和参数管理更高效。

避免路径排序问题

命名路由绕过了路径排序问题（如显示优先级），适用于大型应用或频繁导航场景。

参数自动编码/解码

命名路由支持参数的自动编码/解码，防止URL中的打字错误。

动态路由管理

通过名称跳转，可实现动态路由配置（如根据用户权限控制页面访问）。

Cli模式额外配置

如果您是 vue-cli 模式的项目，还需要在项目 根目录 的 vue.config.js 文件中进行如下配置：

javascript

// vue.config.js，如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['fusions-ui']
}

全局配置 ​

关于SCSS ​

准备工作 ​

配置步骤 ​

全局配置

关于SCSS

准备工作

配置步骤