Fork me on GitHub

react 插件

react-loadable

React 项目打包时，如果不进行异步组件的处理，那么所有页面所需要的 js 都在同一文件中（bundle.js），整个js文件很大，从而导致首屏加载时间过长。

所有，可以对组件进行异步加载处理，通常可以使用 React-loadable。

more >>

展开全文 >>

vite + vue3 + tailwindcss

中前台项目 开发

项目架构

image-20221208154045915

开发使用到的技术及开发插件

vite

以速度运行制胜 webpack. 兼容 rollup 几乎所有插件，生态已经支持企业项目开发

创建项目：

1
npm init vite@latest

没有安装vite@latest会提示勾选安装

vue3

vue 最新版，搭配 vite 使用更佳

tailwindcss

前端 css 四种模式

  1. 行内样式，自由度极高但复用性极差
  2. 通用组件库，风格固定，自定义性差
  3. 原子样式， tailwindcss 众多类名，每个类名都对应一个 css 样式，类似于boostrap
  4. 经典模式， class 类名方式，但是媒体查询需要重写

安装

1
yarn add tailwindcss postcss@8.4.8 autoprefixer@10.4.2 -D

报错缺少依赖 sass

1
yarn add sass -D

生成配置文件 tailwind.config.js

1
npx tailwindcss init -p

配置文件 

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
// purge: [], purge在3.0 更改为 content
{
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    ...
}
    
// 最新
module.exports = {
  // purge: [], purge在3.0 更改为 content tailwind 应用范围
  content: [
    './index.html', 
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      height: {
        header: '72px',
        main: 'calc(100vh - 72px)'
      },
      fontSize: {
        xs: ['0.25rem', '0.35rem'],
        sm: ['0.35rem', '0.45rem'],
        base: ['0.42rem', '0.52rem'],
        lg: ['0.55rem', '0.65rem'],
        xl: ['0.65rem', '0.75rem']
      },
      boxShadow: {
        'l-white': '-10px 0 10px white',
        'l-zinc': '-10px 0 10px #18181b'
      },
      colors: {
        main: '#f44c58',
        'hover-main': '#f32836',
        'success-100': '#F2F9EC',
        'success-200': '#E4F2DB',
        'success-300': '#7EC050',
        'warn-100': '#FCF6ED',
        'warn-200': '#F8ECDA',
        'warn-300': '#DCA550',
        'error-100': '#ED7456',
        'error-200': '#f3471c',
        'error-300': '#ffffff'
      },
      backdropBlur: {
        '4xl': '240px'
      },
      variants: {
        scrollbar: ['dark']
      }
    },
  },
  plugins: [],
}

在src下新建styles文件夹， 增加 index.scss

1
2
3
4
/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

然后在mian.js中引用这个index.scss.tailwind CSS就引入成功了,

1
import '@/styles/index.scss'

tailwind CSS 依赖scss,可能需要手动安装

1
yarn add sass@1.54.4 -D
more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。