Write the Code. Change the World.

分类目录
7月 25

以整个视口为单位,使用滑轮滚动或导航触发来达到展示效果的网站是一种需求。一种是自己手写 js + css 来达到这种效果。还有一种使用 fullpage.js 来达到这个效果。当然,使用 swiperjs 来实现这效果也是妥妥的赞,还很丝滑。

https://github.com/alvarotrigo/fullPage.js

https://swiperjs.com/get-started

主要是 fullpage.js 是需要花钱购买服务,而 swiperjs 是开源使用的。并且 swiperjs 不仅仅可以做这种视口滚动效果。

所以,这里选择使用 swiperjs 来完成目标。

DEMO 展示效果如下图所示(gif 使用 https://www.mnggiflab.com/ 录制和压缩):

操作

初始化一个 vue 项目。

pnpm create vue

cd swiperFullpage

pnpm install 

pnpm format

pnpm dev

创建选项如下图所示。

然后,创建一个版本管理。

git init

git add .

git commit -m 'initialize'
7月 10

后台管理系统,个人审美还是更喜欢 element-plus 多一点。如果组件更丰富点就更好了。

https://element-plus.org/zh-CN/guide/installation.html

安装

# 安装
pnpm add element-plus

# 自动导入,安装unplugin-vue-components 和 unplugin-auto-import 这两款插件
pnpm add -D unplugin-vue-components unplugin-auto-import

配置自动导入
编辑 vite.config.ts

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

追加 AutoImportComponents 配置。完整的配置文件如下:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vite.dev/config/
export default defineConfig({
  base: '/admin/',
  build: {
    outDir: 'admin',
    emptyOutDir: true,
    chunkSizeWarningLimit: 3000,
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].[hash].js', // 入口文件名
        chunkFileNames: 'assets/[name].[hash].js', // chunk 文件名
        assetFileNames: 'assets/[name].[hash].[ext]', // 静态资源文件名
      },
    },
  },
  plugins: [
    vue(),
    vueDevTools(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

下边进行尝试使用

使用

编辑 src/views/home/index.vue,增加按钮组件,尝试下效果。

<template>
  <div>
    <h1>HI, {{ user.name }} , Welcome to the Home Page</h1>
    <h2>Email: {{ user.email }}</h2>
    <h2>Api: {{ api }}</h2>
    <div>
      <el-button type="primary" @click="test">Click Me</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const user = ref<User>({
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com',
  createdAt: new Date(),
})

const api = ref(import.meta.env.VITE_API_BASE_URL)

function test() {
  alert('Button Clicked!')
}
</script>

<style scoped>
h1 {
  color: #42b983;
  font-size: 2em;
}
</style>

运行起来,效果如下图所示。

7月 09

vite7: https://vite.dev/blog/announcing-vite7

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

创建初始化

现在创建一个叫 forgetting 的项目

pnpm self-update

pnpm create vue@latest

# 引导构建

┌  Vue.js - The Progressive JavaScript Framework
│
◇  请输入项目名称:
│  forgetting
│
◇  请选择要包含的功能: (↑/↓ 切换,空格选择,a 全选,回车确认)
│  TypeScript, Router(单页面应用开发), Pinia(状态管理), ESLint(错误预防), Prettier(代码格式化)
│
◇  选择要包含的试验特性: (↑/↓ 切换,空格选择,a 全选,回车确认)
│  Oxlint(试验阶段), rolldown-vite(试验阶段)

正在初始化项目 C:\Users\Windows\Desktop\study\vue\forgetting...
│
└  项目初始化完成,可执行以下命令:

创建完成后,执行下边命令,运行起来。

   cd forgetting
   pnpm install
   pnpm format
   pnpm dev

提交版本。

git init -b main
git add .
git commit -m 'initialize'

删除默认页面,组件,样式

rm -rf ./src/views/*
rm -rf ./src/components/*
rm -rf ./src/assets/logo.svg

新增一个首页,运行起来

touch ./src/views/home/index.vue

# 添加以下内容
<template>
    <div>
        <h1>Welcome to the Home Page</h1>
    </div>
</template>

修改 App.vue

<template>
  <RouterView />
</template>

调整路由 router.ts

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/home/index.vue'),
    },
  ],
})

export default router

去掉 assets/main.css 中的其他代码,保留。

@import './base.css';

#app {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

重新运行

pnpm dev

> forgetting@0.0.0 dev C:\Users\Windows\Desktop\study\vue\forgetting
> vite

Port 5173 is in use, trying another one...

  ROLLDOWN-VITE v7.0.6  ready in 858 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5174/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

可以执行代码检查

pnpm lint

> forgetting@0.0.0 lint C:\Users\Windows\Desktop\study\vue\forgetting
> run-s lint:*

> forgetting@0.0.0 lint:oxlint C:\Users\Windows\Desktop\study\vue\forgetting
> oxlint . --fix -D correctness --ignore-path .gitignore

Found 0 warnings and 0 errors.
Finished in 12ms on 8 files with 87 rules using 16 threads.

> forgetting@0.0.0 lint:eslint C:\Users\Windows\Desktop\study\vue\forgetting
> eslint . --fix

C:\Users\Windows\Desktop\study\vue\forgetting\src\views\home\index.vue
  1:1  error  Component name "index" should always be multi-word  vue/multi-word-component-names

✖ 1 problem (1 error, 0 warnings)

 ELIFECYCLE  Command failed with exit code 1.
ERROR: "lint:eslint" exited with 1.
 ELIFECYCLE  Command failed with exit code 1.

官方默认的vue文件名是以大写字母开头,多单词的形式。或以中横线连接。个人喜欢以名字+动词的形式来定义文件。即以单数名字作为文件夹名,动词作为文件名。比如,想要一个创建订单的页面可以这样:order/create.vue,如果想要一个订单列表的页面就是 order/list.vue。 这种规则和默认规则相冲,eslint 检查出错误来。所以可以手动修改该策略。

对于组件命名,还是喜欢用大写字母开头,多单词的形式。 components/MediaPlayer/MediaPlayer.vue

修改 eslint.config.ts,增加规则来允许上边所说的消息单个单词的文件命名。

  {
    rules: {
      'vue/multi-word-component-names': 'off',
    },
  }

需要扩展和覆盖规则都可以在这里进行。因为是刚创建的项目,所以配置很干净除了新增这一条,其他都是默认的,完整如下:

import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import pluginOxlint from 'eslint-plugin-oxlint'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  ...pluginOxlint.configs['flat/recommended'],
  skipFormatting,
  {
    rules: {
      'vue/multi-word-component-names': 'off',
    },
  }
)

再执行 pnpm lint 就不会报错了。

执行 pnpm format 格式化代码。中间不规范操作,都可以通过这个来自动纠正。

提交版本。 git add . && git commit -m '删除默认页面、组件、样式,配置支持单个单词文件名的eslint规则'

9月 12

vite 构建的 ts 项目中,引用某些库时,遇到 Could not find a declaration file for module 的错误提示。手动在 env.d.ts 中添加一下就可以。如:

/// <reference types="vite/client" />
declare module 'element-plus/dist/locale/zh-cn.mjs'
declare module 'element-plus/dist/locale/en.mjs'
declare module 'element-plus/dist/locale/ja.mjs'
declare module 'simple-peer/simplepeer.min.js'
9月 09

在 vite 环境下,安装使用 simple-peer,报错 global is not defined 处理。

解决方法: https://github.com/feross/simple-peer/issues/883

这样引入就可以了:

import SimplePeer from 'simple-peer/simplepeer.min.js'

如果遇到 Could not find a declaration file for module 'simple-peer/simplepeer.min.js'. 错误。可以在 env.d.ts 中增加定义就可以。

env.d.ts

declare module 'simple-peer/simplepeer.min.js'
5月 04

vite 支持自动处理 scss,less 等文件,但需要下载对应的包 https://cn.vitejs.dev/guide/features#css-pre-processors。 如果,你想单独写 scss 这些,可以在 vite.confit.ts 中进行配置

常规操作

1、先创建一个 vue3 项目

# 创建 vue 项目
pnpm add vue

pnpm format

pnpm dev

# 添加 git 版本控制
git init -b main
git add .

2、安装 sass

pnpm add sass

3、创建一个 scss 文件

touch ./src/assets/css/base.scss

# 填充下边内容
body {
    background-color: #f00;
}

4、在 vite.config.ts 中进行配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/base.scss";`
      }
    }
  },
  plugins: [vue(), VueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

这个时候,发现 base.scss 中的样式不生效。真的很郁闷,查了一些文档和资料,就是这么写的,偏偏不行。还好在 segmentfault 上找到了一个解释。就是你必须至少在 .vue 文件里边至少使用 <style lang="scss"><style>。于是,手动这样加了一下,果真样式生效了。 当下用的是最新版本的 vite(vite5),依然存在这个问题。

参考

https://segmentfault.com/a/1190000041425201

8月 13

经过前边的处理,用户登录,侧边栏渲染,路由跳转,登录信息展示,用户退出。这些功能最小化完成。如下图所示。

在线预览,可切换角色。新用户注册,有一个默认角色。只有测试账号有多角色。

https://www.zeipan.com/admin

用户登录

打开后台域名任意 url 。在路由全局守卫中。 如果用户已登录(存在 token),先判断用户信息是否初始化,如果没有,先请求用户信息(返回数据不仅有用户信息,还有该用户对应的后台权限【用户生产菜单】),处理存储用户信息,添加路由信息。再重定向。如果已初始化,就继续。如果用户没登录,先重定向到登录页面。

调用接口,请求登录。获取用户的 token。存储 token。

通过 token,请求用户信息(数据中包括用户的权限数据),存储用户信息以及权限数据。处理权限数据,生成菜单。

8月 04

做了一些基础的配置。现在准备开始做布局了。这里只要两种布局,空白布局和后台布局。空白布局什么时候用呢,登录页面会用到。后台布局,就后台真正内容会用到。始终喜欢极简风格,所以方方面面都不要搞的太复杂。后台布局页面主要有左侧菜单栏,顶部信息栏,中间内如区域构成。

要做好这些,先温习一下 vue3 的 vue-router 以及 transition 还有 element plus 的 menu 组件。当然,loading 相关的也会考虑进去。

额外一点。左侧菜单的内容(和路由会一一映射),请求 api 的权限,全部有后端生成。前端不做权限的控制。也就是后端返回过来的菜单是什么样子,前端就渲染成什么样子。

https://router.vuejs.org/zh/

https://cn.vuejs.org/guide/built-ins/transition.html

https://element-plus.org/zh-CN/component/menu.html#collapse-%E6%8A%98%E5%8F%A0%E9%9D%A2%E6%9D%BF

基础布局

先看看构成后台的三部分。这里建立了一个 layout,拆分成了三部分。

src/views
├── HomeView.vue
├── layouts
│   ├── components
│   │   ├── AppMain
│   │   │   └── AppMain.vue
│   │   ├── NavBar
│   │   │   └── NavBar.vue
│   │   └── SideBar
│   │       └── SideBar.vue
│   └── index.vue
└── test.vue

路由是这样的。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Layout from '@/views/layouts/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    }, 
    {
      path: '/test',
      name: 'test',
      component: Layout,
      children: [
        {
          path: '',
          name: 'test-child',
          component: () => import('@/views/test.vue')
        }
      ]
    }
  ]
})

export default router

这里只是初步尝试,没有做更细致的逻辑编写。

希望你的屏幕足够宽,希望一屏足够承载你的业务。如果不够,如果不可以。那么滚动条在所难免。那么滚动条怎么出现最好看呢。

一种方式如上图所示。还有一种,可以只在 content 区域左右上下滚动。个人觉得那种不好看,交互也不是很好。最好就是一屏足够承载吧。

side bar 和 nav bar 都没使用背景色。滑动中间区域会看到穿透。真正做时,会有背景色,z-index 也会高出一些。

白天以及暗黑主题安排上,侧边栏展开收缩也安排上。

还有移动端的布局(小程序、h5、app 等等),特别是小程序。有的公司为了一套代码,给很多企业或多项目用。底部 tabbar 采用非原生写法,滚动条从顶滚到底,不仅滚动条丑,底部切换还会闪动。体验特不好。有时候为了好的滚动条效果,加入了 scroll-view 组件去控制。

这里,如果左侧菜单足够多,也会出现滚动条。这个在 side bar 内部去处理就好了。

继续阅读

8月 03

丰富的互联网资源,用 svg 文件作为 icon 已经很常见了。这里使用 iconify 来处理 icon。 iconify 可以理解为一个管理封装各个 icon 的工具。

https://iconify.design/

https://element-plus.org/zh-CN/component/icon.html

开始

# 安装
pnpm install unplugin-icons unplugin-vue-components -D

# 修改 vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/assets/styles/element.scss";
          @use "@/assets/styles/element-dark.scss";
          @use "@/assets/styles/main.scss";
          @use "@/assets/styles/preflight.scss";
        `,
      },
    },
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver({
        importStyle: "sass",
        directives: true
      })],
    }),
    Components({
      dts: "./components.d.ts", 
      resolvers: [
        IconsResolver({
          prefix: "i", // 默认为i,设置为false则不显示前缀
          enabledCollections: ["ep"],
          alias: {
            'icon': "ep", //配置别名
          }
        }),
        ElementPlusResolver({
          importStyle: "sass",
          directives: true
        })
      ],
    }),
    Icons({
      autoInstall: true, // 是否自动安装对应的图标库,默认为true
      scale: 1, // 图标缩放,默认为1
      defaultStyle: "", // 图标style
      defaultClass: "", // 图标class
      compiler: 'vue3', // 编译方式,可选值:'vue2', 'vue3', 'jsx'
      jsx: "react", // jsx风格:'react' or 'preact'
    })
  ]
})

继续阅读