vue2代码优化

vue2是第一版，现在以vue3重构

vue3重构

开发环境构建

vue3以vite为构建工具

见《vite最佳实现》篇

后台接口封装与调测

详细字段见yapi

  • 安装axios，并按照接口文档配置

    提取后台接口地址为单独文件，public目录下新建serverConfig.json，

    1
    2
    3
    {
      "baseURL": "http://127.0.0.1:7419"
    }

    如果是vite，直接建在文件根目录，可新建js

    1
    2
    3
    export default {
        "baseURL": "http://218.94.82.249:6062"
    }

    新建src/utils/request.js，基于函数封装axios

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    ```

    新建`src/api/home.js`

    ```js

    import {request} from "@/utils/request"

    export function getBackgroundData() {
      return request({url: '/img'})
    }

    export function getSearchIconData() {
        return request({url: '/search/engine'})
    }

    export function getSearchData(params) {
        return request({
            url: '/search/keyword',
            params: {
                query: params
            }
        })
    }

    export function getMotoData() {
        return request({
            url: '/search/hitokoto'
        })
    }
    // 添加搜索引擎
    export function addEngineUrl(data) {
        return request({
            method: 'post',
            url: '/search/engine/add',
            data
        })
    }

    // 添加搜索引擎
    export function modifyEngineUrl(data) {
        return request({
            method: 'post',
            url: '/search/engine/modify',
            data
        })
    }

    // 删除搜索引擎
    export function deleteEngineUrl(data) {
        return request({
            method: 'post',
            url: '/search/engine/delete',
            data
        })
    }

    // 默认搜索引擎
    export function defalutEngine() {
        return request({
            url: '/search/default-engine'
        })
    }

  • 如果要关闭eslint

    vue.config.js

    1
    2
    3
    4
    5
    6
    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      transpileDependencies: true,
      lintOnSave: false
    })

状态机定义

见《状态机》

状态机machine目录

国内生态不全，还是用pinia吧，至于各种state及边界条件，心里清晰即可（见流程图）

封装本地存储

业务模块

首页

  • 背景图片

    由css-background属性，替换成

交互优化

  • 添加导航支持快捷键
  • 新添加导航清除上次输入记录
  • 插件默认加载页支持自定义（导航页或书签页）