插件

插件是 yite-cli 脚手架特有的内容，也是 约定 的一部分。

插件目录位于 src/plugins 目录下。

默认的插件内容如下：

└───📁 src/
    └───📁 plugins/
        ├───📄 global.js
        ├───📄 http.js
        ├───📄 i18n.js
        ├───📄 router.js
        └───📄 storage.js

其含义和作用如下：

• http.js 接口请求插件
• i18n.js 多语言国际化插件
• router.js 自动路由插件
• storage.js 浏览器存储插件

还记得前文提到的，页面结构即路由吗，就是由 route.js 插件提供的。

我们可以看一下 route.js 文件的内容：

import { yiteRoutes } from 'virtual:yite-router';

// 创建路由
const $Router = createRouter({
    routes: yiteRoutes(),
    history: createWebHashHistory()
});

export { $Router };

没错，就是这么简单！

内部的代码细节，已经被笔者放到了独立的 yite-router 模块中。

最苦、最累、最麻烦的问题，交给笔者。

最好、最强、最方便的功能，留给你们。

开发项目，应该减少，甚至避免去思考项目架构方面的问题。

而是专注于业务开发，用最快、最好、最稳定的方式，完成项目，发布上线。

使用插件

插件目录下的文件，全部由 yite-cli 自动导入，全局可用。

以 http.js 插件为例，我们看看它如何使用，先看其定义

import axios from 'axios';

let $Http = axios.create({
    method: 'POST',
    baseURL: import.meta.env.VITE_HOST,
    timeout: 1000 * 60,
    withCredentials: false,
    responseType: 'json',
    responseEncoding: 'utf8',
    headers: {}
});
// 添加请求拦截器
$Http.interceptors.request.use(
    function (config) {
        let token = $Storage.local.get('token');
        if (token) {
            config.headers.authorization = 'Bearer ' + token;
        }
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);

// 添加响应拦截器
$Http.interceptors.response.use(
    function (res) {
        if (res.data.code === 0) {
            return Promise.resolve(res.data);
        }
        if (res.data.symbol === 'NOT_LOGIN') {
            location.href = location.origin + '/#/login';
        }
        return Promise.reject(res.data);
    },
    function (error) {
        return Promise.reject(res.data);
    }
);
export { $Http };

可以看到，就是一个简单的 axios 封装，同时导出了 $Http 请求实例。

使用的时候，不需要写如下导入代码：

import { $Http } from '@/plugins/https.js';

直接使用即可，因为所有的插件，都会被 yite-cli 默认导入，全局可用。

<script setup>
// 选项集
defineOptions({
    name: 'feedback'
});

// 全局集
const { $GlobalData, $GlobalComputed, $GlobalMethod } = useGlobal();

// 工具集

// 数据集
const $Data = $ref({
    pagination: {
        page: 1,
        limit: 20,
        total: 0
    },
    tableData: []
});

// 方法集
const $Method = {
    async initData() {
        await $Method.apiSelectData();
    },
    // 查询用户数据
    async apiSelectData() {
        try {
            let res = await $Http({
                url: '/feedback/select',
                data: {
                    page: $Data.pagination.page,
                    limit: $Data.pagination.limit
                }
            });
            $Data.tableData = res.data.rows;
            $Data.pagination.total = res.data.total;
        } catch (err) {
            console.log(err);
        }
    }
};

$Method.initData();
</script>

自定义插件

如果需要自己定义新的插件，只需要在 src/plugins 目录中创建一个 js 文件，写上自己的代码即可。

如果文件包含了导出的变量，那么此变量将在全局可用，无需导入。