blog station

nvm在 windows上用方便，n则在Mac上用方便

一、清除 node缓存

1

sudo npm cache clean --force

二、全局安装 n

官网：https://nuxt.com.cn/

配置环境变量

1.根目录下新建文件.env.development和.env.production，当然文件.env.xxx都行，只要和后面对应上即可；
2.文件中增加全局环境变量，例如：PUBLIC_API_BASE=https://api.com;
3.nuxt.config.ts配置文件增加配置项：

1
2
3
4
5
6
7
8

export default defineNuxtConfig({
runtimeConfig: {
    apiKey: '',//默认为空字符串，在运行时使用process.env.NUXT_API_KEY自动设置，为项目域名
    public: {
       baseURL: process.env.PUBLIC_API_BASE //暴露在前端的自定义路径
    }
  },
})

新建项目

项目配置

1.开启 PreBundle 配置

开发环境热更新占用内存可以大大降低，热更新所需时间也将大幅减少；生产模式也可以通过提前编译依赖，大幅提升部署效率。

条件编译快捷命令

选中要条件编译的代码块，ctrl + alt + /即可生成正确注释

1
2
3

// #ifdef APP
uni.hideNavigationBarLoading();
// #endif

之前一直懒没有安装nvm，现在安装上发现又简单又方便，真香！

注意：在下载nvm之前需要卸载本电脑已经安装的node!

一、进入官网http://nvm.uihtm.com/ 或者githubhttps://github.com/coreybutler/nvm-windows/releases 下载：

如果说flex布局是一维布局，则grid布局则是二维布局

css优化

1. 加载性能：
   （1）css压缩：将写好的css进行打包压缩，可以减少很多的体积。
   （2）css单一样式：当需要下边距和左边距的时候，很多时候选择：margin:top0 bottom:0;但margin-bottom:bottom;margin-left:left;执行的效率更高。
   （3）减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

   阅读全文 »

方法

如果table分页最后一页只有一条数据，删除这条会导致分页和数据展示不一致

原因：如果需求要求记录当前table页，删除之后没有判断当前页是否还有数据，所以判断如果当前页只有一条&&当前页大于1，则重新请求时页数-1

1
2
3
4
5
6
7
8
9
10
11
12
13

onDeleteItem: id => {
    dispatch({
        type: 'nodeManage/delete',
        payload: { id },
    }).then(() => {
        this.handleRefresh({
            page:
                list.length === 1 && pagination.current > 1
                ? pagination.current - 1
                : pagination.current,
            })
    })
}

input中加slot标签，表单验证无法回显

默认宽度可能会覆盖回显值，设置足够宽度

Form表单验证通过，却没反应

1
2
3
4
5
6
7
8
9
10
11
12
13

//如果表单验证rules对象中有自定义验证，必须在验证函数最后返回回调函数
let validatePass1 = (rule, value, callback) => {
let reg = /(?!^0*(\.0{1,2})?$)^\d{1,13}(\.\d{1,2})?$/;
if (value && !reg.test(value)) {
    callback(new Error('仅支持输入大于0的数字'));
} else {
    //这里必须返回
    callback()
}
};
rules: {
    market_price: [{ validator: validatePass1, trigger: "change" }],
}