Write the Code. Change the World.

5月 11

vue 项目中,出现 Component name “home” should always be multi-word.eslint 这个错误提示,可以改两个地方。

处理方式

修改 vue.config.js 文件,在 defineConfig 中加入 lintOnSave: false ,这个保证编译不会报错。

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

修改 .eslintrc.js 文件,在其中追加配置 overrides 。注意自己的 vue 文件目录配置好。这个保证在 vue 文件中,不会出现警告的波浪线。有强迫症的受不了。

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: ['src/views/**/*.vue'],
      rules: {
        'vue/multi-word-component-names': 0,
      }
    }
  ]
}

阅读全文 >>

5月 08

升级 node,vue-cli 到最新版本

node -v

# 更新 node 到最新版本
sudo n stable

# 更新 pnpm
pnpm add -g pnpm

# 更新 yarn
yarn set version latest

# pnpm 安装 @vue/cli
pnpm install @vue/cli -g

# 或使用 yarn 安装
yarn global add @vue/cli

# 创建项目,指定包管理工具
vue create -m pnpm demo

创建 vue 项目

这里就建一个 ts 的,使用 sass 的 vue3.x 项目,使用手动选择模式,包管理工具使用 yarn 。一路选择和回车即可:

vue create -m yarn zeipan
  • step-1
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
❯ Manually select features
  • step-2
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
  • step-3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x
  2.x
  • step-4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Less
  Stylus

一路选择回车后,提示安装成功。进入项目,运行项目。

cd zeipan

yarn serve

阅读全文 >>

5月 07

npm 简单介绍

npm 中文文档

npm 英文官网

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

npm 由三个独立的部分组成:

  • 网站
  • 注册表(registry)
  • 命令行工具 (CLI)

网站 是开发者查找包(package)、设置参数以及管理 npm 使用体验的主要途径。

注册表 是一个巨大的数据库,保存了每个包(package)的信息。

CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

npm 下载安装

https://nodejs.org/en/download/

下载对应的系统对应的版本安装即可。

配置淘宝镜像

# 配置为淘宝镜像(旧的)
npm config set registry https://registry.npm.taobao.org

# 配置为淘宝镜像(新的)
npm config set registry  https://registry.npmmirror.com
# 查看镜像
npm config get registry

# 切回默认镜像
npm config set registry https://registry.npmjs.org

更新升级 node, 方式一

# 查看当前 node 版本 
node -v

# 查看 node 的版本
npm view node versions

# 安装 n
sudo npm install -g n

# 通过 n 来更新 node 到最新版本
sudo n latest

# 通过 n 来更新 node 到稳定版本
sudo n stable

# 通过 n 来更新 node 到具体版本
sudo n 15.0.0

更新升级 node, 方式二

# 最新版本
npm install npm@latest -g

# 下一个版本
npm install npm@next -g

yarn 简单介绍

yarn1 中文文档

yarn2 中文文档

Yarn 对你的代码来说是一个软件包管理器, 你可以通过它使用全世界开发者的代码,或者分享自己的代码给全世界的开发者。Yarn 做这些事情快捷、安全、可靠,所以你不用担心什么。

通过 Yarn 你可以使用其他开发者针对不同问题的解决方案,简化你开发软件的过程。 如果使用过程中遇到问题,你可以将其上报或者贡献解决方案。一旦问题被修复, 你可以使用 Yarn 更新。

代码通过 软件包(package) 的方式被共享。一个软件包里包含了所有需要共享的代码,以及一个描述软件包信息的文件 package.json (叫做 清单)。

安装 yarn

npm install -g yarn

yarn -v

# 更新 yarn 到最新版本
yarn set version latest

yarn 用法

yarn 镜像

# 查看
yarn config get registry

# 设置为淘宝镜像
yarn config set registry https://registry.npmmirror.com

# 设置为默认官方镜像
yarn config set registry https://registry.yarnpkg.com

pnpm 简单介绍

pnpm 中文文档

知乎

安装

# 安装
sudo npm install pnpm -g

# 查看镜像
pnpm config get registry

# 设置为淘宝镜像
pnpm config set registry https://registry.npmmirror.com/

# 更新升级
pnpm add -g pnpm

# 获取 pnpm安装位置
which pnpm

# 查找更多 pnpm
mdfind -n pnpm

使用

pnpm install 包  // 
pnpm i 包
pnpm add 包    // -S  默认写入dependencies
pnpm add -D    // -D devDependencies
pnpm add -g    // 全局安装

移除

pnpm remove 包                            //移除包
pnpm remove 包 --global                   //移除全局包

更新

pnpm up                //更新所有依赖项
pnpm upgrade 包        //更新包
pnpm upgrade 包 --global   //更新全局包

设置存储路径

pnpm config set store-dir /path/to/.pnpm-store

阅读全文 >>

5月 03

ui 框架

https://vuestic.dev/

这个风格最喜欢

https://docs.soybean.pro/

这个组件功能最丰富

https://github.com/qingqingxuan/admin-work

上边两个都是基于第一个的 ui 库实现

https://www.naiveui.com/zh-CN/os-theme/docs/community

https://primefaces.org/primevue/

大前端组合方案

vue3 + ts + vite

丢掉 vue2 丢掉 js 丢掉 webpack

当然 react 栈另说

阅读全文 >>

4月 25

// 将 ip 转换成 city
function ip2City($ip)
{
    $url = "https://apis.map.qq.com/ws/location/v1/ip?ip={$ip}&key=XXXXXXXX";
    $res = curl($url, false, false, true);
    $data = [];

    try {
        if ($res) {
            $res = json_decode($res, true);
        }

        if ($res && $res['status'] == 0 && $res['result']) {
            $data['latitude'] =  $res['result']['location']['lat'];
            $data['longitude'] =  $res['result']['location']['lng'];
            $data['city'] =  $res['result']['ad_info']['city'] ? $res['result']['ad_info']['city'] : '未知';
            $data['citycode'] =  $res['result']['ad_info']['adcode'] && $res['result']['ad_info']['adcode'] > 0 ? $res['result']['ad_info']['adcode'] : 0;
        }
    } catch (Exception $e) {
    }
    return $data;
}

/**
 * @param string $url 请求网址
 * @param bool $params 请求参数
 * @param bool $post 请求方式,是否是post
 * @param bool $https 请求http协议,是否是https
 * @return bool|mixed
 */
function curl($url, $params = false, $post = false, $https = false)
{
    $httpInfo = array();
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36');
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);
    curl_setopt($ch, CURLOPT_TIMEOUT, 30);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    if ($post === true) {
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
        curl_setopt($ch, CURLOPT_URL, $url);
    } else {
        if ($params === false) {
            curl_setopt($ch, CURLOPT_URL, $url);
        } else {
            if (is_array($params)) {
                $params = http_build_query($params);
            }
            curl_setopt($ch, CURLOPT_URL, $url . '?' . $params);
        }
    }

    if ($https === true) {
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 对认证证书来源的检查
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); // 从证书中检查SSL加密算法是否存在
    }
    $response = curl_exec($ch);
    if ($response === false) {
        Illuminate\Support\Facades\Log::error(sprintf('curl 错误。 url:%s, error:%s', $url, curl_error($ch)));
        return false;
    }
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    $httpInfo = array_merge($httpInfo, curl_getinfo($ch));
    curl_close($ch);
    return $response;
}

阅读全文 >>