关于前端:用vue3vite重构小项目

2.0.0

我的项目阐明

该我的项目为web单页面利用，外围性能为显示工夫。

技术栈应用 pnpm、Vite、Vue3、typescript、tailwind、github/api

性能需要

显示工夫
显示随机壁纸
每日热词录入

非性能需要

挪动端自适应
查看日前工夫具体属性

页面比照

新我的项目预览
旧我的项目预览

旧页面

新页面

开发记录

Vscode Extension

Vue 3 Pack

Vue Extension Pack

Tailwind CSS Extension Pack

alias设置

‘@’默认失效、其余门路须要同时配置vite和typescript才失效，配置完最好重启ide

1.配置vite.config文件

{
resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '#': path.resolve(__dirname, './src/views'),
      '$': path.resolve(__dirname, './src/components'),
    },
  }
}

2.配置tsconfig.json文件

{
 "compilerOptions": {
    "paths": {
      "/@/*": ["src/*"],
      "/#/*": ["src/views/*"],
      "/$/*": ["src/components/*"]
    }
  },
}

script setup

<script setup lang="ts">
  import { reactive, watchEffect, computed, ref } from 'vue';
  import gitPut from '$/gitPut.vue'; // 组件引入即可间接应用，不须要componet注册
  //    以下变量都能够在template中应用
  const menu = [...routes];     //非动静绑定
  const menuShow = ref(false);  //动静绑定，set/get时须要应用menuShow.value
  const state = reactive({  //动静绑定。相似store/state，保护一组参数
       imgUrl: '',
       now: Date.now(),
       twDate: computed(() => new TwDate(state.now)),
       /*应用computed代替filter*/
       weekMix: computed(() => state.twDate.getWeekEn() + '|' + state.twDate.getWeekZh()),
       seasonMix: computed(() => state.twDate.getSeasonEn() + '|' + state.twDate.getSeasonZh()),
  })
  //  watchEffect,  区别于watch只监听一个变量
  watchEffect(() => {
    //  能够定义所有变量监听，此处只监听了state.now
    state.localStr = new TwDate(state.now).toLocaleString();
  });
<script/>

Vue3 Hooks

最大区别就是勾销了destroyed 改为 unMounted

创立hook.tslog工具

import {
  onBeforeMount,
  onMounted,
  // onBeforeUpdate,
  // onUpdated,
  onBeforeUnmount,
  onUnmounted,
  // onDeactivated,
  // onActivated,
  // onRenderTracked,
  // onRenderTriggered
} from 'vue';

const HOOK_LIST: Map<string, any> = new Map([
  ['BeforeMount', onBeforeMount],
  ['Mounted', onMounted],
  // ['BeforeUpdate', onBeforeUpdate],
  // ['Updated', onUpdated],
  ['BeforeUnmount', onBeforeUnmount],
  ['Unmounted', onUnmounted],
  // ['Deactivated', onDeactivated],
  // ['Activated', onActivated]
  // ['RenderTracked', onRenderTracked],
  // ['RenderTriggered', onRenderTriggered]
]);

/**
 * @description    Hook 日志与回调
 * @param cb
 */
export default (
  cb:
    | {
        afterBeforeMount: () => void;
        afterMounted: () => void;
        afterUnmounted: () => void;
        afterBeforeUnmount: () => void;
      }
    | any
) => {
  HOOK_LIST.forEach((hook, key) => {
    hook(() => {
      console.log(`#Hook////${key}`);
      let afterCb = cb?.[`after${key}`];
      afterCb && afterCb();
    });
  });
};

应用hook.ts

<script setup lang="ts">
  import hook from '@/common/hook';
  import { reactive } from 'vue';
  const state = reactive({
       now: Date.now()
  })
  //  timeInterval
  let timer = setInterval(() => {
    state.now = Date.now();
  }, 800);
  //  test hook
  hook({
    afterUnmounted: () => {
      clearInterval(timer);
      timer = 0;
    },
  });

Class Date Extend

import dateEnum from './../enums/dateEnum';
export default class TwDate extends Date {
  //    返回当天是当年的第几天
  getDayInYear = () => {
    return (
      (Date.now() - new TwDate(new TwDate().getFullYear(), 0, 1, 0, 0, 0).getTime()) /
      (24 * 3600 * 1000)
    );
  };
  //    返回以后时刻是当天的第几毫秒
  getMillSecInDay = () => {
    const y = new TwDate().getFullYear();
    const m = new TwDate().getMonth();
    const d = new TwDate().getDate();
    return Date.now() - new TwDate(y, m, d, 0, 0, 0).getTime();
  };
  //    返回当天/当年占比
  getRatioYear = () => {
    return this.getDayInYear() / 365;
  };
  //    返回当天/当月占比
  getRatioMonth = () => {
    const y = new TwDate().getFullYear();
    const m = new TwDate().getMonth();
    return new TwDate().getDate() / new TwDate(y, m + 1, 0).getDate();
  };
  //    返回当天/当周占比
  getRatioWeek = () => {
    return (new TwDate().getDay() || 7) / 7;
  };
  //    返回以后时刻/当天占比
  getRatioDay = () => {
    return this.getMillSecInDay() / (24 * 3600 * 1000);
  };
  //    返回文本：周-En
  getWeekEn = () => {
    return dateEnum.WEEK_EN[new TwDate().getDay()];
  };
  //    返回文本：周-Zh
  getWeekZh = () => {
    return dateEnum.WEEK_ZH[new TwDate().getDay()];
  };
  //    返回文本：节令-En
  getSeasonEn = () => {
    return dateEnum.SEASON_EN[Math.floor(new TwDate().getMonth() / 3)];
  };
  //    返回文本：节令-Zh
  getSeasonZh = () => {
    return dateEnum.SEASON_ZH[Math.floor(new TwDate().getMonth() / 3)];
  };
}

随机图片地址

reference

unsplash:收费的高清摄影素材网站

  const api = 'https://unsplash.it';
  const randomId = Math.random() * 10;
  const width = 1920;
  const height = 1080;
  let url = `${api}/${width}/${height}?random=${parseInt(randomId.toString(), 10)}`;

P.S.
也可用利用api获取Bing壁纸，但因为要解决跨域放弃了。如果是独立部署的话能够思考。

// const bingUrl = 'https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN';

tailwind应用

因为目前应用的是quasar框架，其中也有一些原子类的款式，所以思维上还是能了解。

但不习惯api的话起手比拟吃力，有肯定门槛，对与团队推广还是有肯定难度。

个人感觉作为我的项目落地的话将来可能会有应用上的瓶颈，作为集体开发的话我目前还是比拟中意的，有种中庸之美。

github/api

每日热词需要由 github/issue 实现，即输出热词回车后将参数由github/api传递给github。
写入操作须要token验证，能够在github/开发者设置里创立。
因为token不可显性显示在代码中，所以对token采纳非对称加密，每次申请要输出密钥，解码后获取token。

P.S.如果token间接裸露在代码中，该token会主动删除。

1.创立token，输出note即可，checkbox勾选repo即可

2.在github/repo/issue里创立新label，次要用于辨别。

3.配置用户、我的项目 package.json

{
  "config": {
    "owner": "Mulander-J",
    "repo": "timeWaster",
    "label": "heart"
  }
}

4.应用api

import axios from 'axios';
import pkg from './../../package.json';

const { owner, repo, label } = pkg.config;
const url = `https://api.github.com/repos/${owner}/${repo}`;

export default class Api {
  static getIssueList = (since?: string): Promise<any> => {
    since = since ? '&since=' + since : '';
    return axios.get(`${url}/issues?filter=created&labels=${label + since}`);
  };
  static addIssue = (body: string, token: string): any => {
    return axios.post(`${url}/issues?access_token=${token}`, {
      labels: [label],
      title: 'TW/' + new Date().toLocaleDateString(),
      body,
    });
  };
}

打包及部署

打包前要依据仓库地址批改根目录属性

// [guide](https://vitejs.dev/config/)
export default defineConfig({
  base: '/timeWaster'
});

应用github-page部署，这里用到了gh-pages插件，两行命令间接部署。

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "predeploy": "vite build",
    "deploy": "gh-pages -d dist"
  },
  "devDependencies": {
    "gh-pages": "^3.1.0"
  },
}

结语

本意是紧跟潮流学点新货色，利用空闲工夫查资料等了一周，理论开发用了两天左右。

对于vue3没波及具体业务还不分明，对于vite的速度真的很喜爱。

关于前端:用vue3vite重构小项目

我的项目阐明

性能需要

非性能需要

页面比照

开发记录

alias设置

script setup

Vue3 Hooks

Class Date Extend

随机图片地址

tailwind应用

github/api

打包及部署

结语

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:用vue3vite重构小项目

我的项目阐明

性能需要

非性能需要

页面比照

开发记录

alias设置

script setup

Vue3 Hooks

Class Date Extend

随机图片地址

tailwind应用

github/api

打包及部署

结语

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复