非你网

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

相关网站

https://echarts.apache.org/examples/zh/index.html#chart-type-line

https://echarts.apache.org/zh/option.html#title

https://vue-echarts.dev/

渲染成功效果图

开始

安装

pnpm add echarts vue-echarts

继续阅读

用了 ts 的 vue3 项目，会经常遇到类型问题。组件问题也是类型问题的一种。这里简单总结一下写法。

组件类型声明

无论是第三方库，还是自定义组件，都可以通过这种方式来搞定。

这里分别以 element plus 中的组件和自定义组件为例。

# element plus 的 ElTable 组件
<template>
<el-table ref = "userTableRef">
    <el-table-column property="nickname" label="昵称" />
</el-table>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ElTable } from "element-plus";

const userTableRef = ref<InstanceType<typeof ElTable>>()
</script>

下边是自定义组件。

<template>
<MediaPlayer ref="mediaPlayer" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MediaPlayer from '@/components/MediaPlayer/MediaPlayer.vue'

const mediaPlayer = ref<InstanceType<typeof MediaPlayer>>()
</script>

最后

定义好了类型后，代码提示就很友好了。

https://www.zeipan.com/nuxt/

很久很久以前，第三方授权登录就开始流行。比如 qq、微博、github、微信这些。如果有一个大的平台来做这个服务的确是很方便的一个事情。在这些授权后都会有一个回调页面，就是从自己的网页跳转到授权页面，再跳转回来。但是，小程序是没提供这个服务的。但是自己可以构造类似的方式。
整个环节，代码都是由自己控制，可以很灵活的视线需求。仅仅是生成小程序码和扫码登录上小程序是腾讯那边做的。

示例：https://www.zeipan.com/admin

步骤

关键点：这里以 jwt 的认证方式来实现授权登录。

• 登录页获取并展示生成携带参数的小程序码
• 登录页面轮询获取登录状态（这里是 token）
• 手机微信扫描小程序码并授权同意登录

继续阅读

前端项目，打包后，运行起来就可能会出现一些提示。描述语是 Violation 。看着不舒服，还是要解决的。列举一下

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event.

出现报错的原因：

Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners；

Passive Event Listeners：被动事件侦听器是 DOM 规范中的一项新功能，它使开发人员能够通过消除滚动来阻止触摸和滚轮事件侦听器来选择加入以获得更好的滚动性能。

开发人员可以使用 {passive: true} 来设置监听器后内部不会调用 preventDefault() 来阻止默认滑动行为，Chrome 浏览器称这类型的监听器为被动（passive）监听器。

Passive Event Listeners 就是告诉前页面内的事件监听器内部是否会调用 preventDefault 函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。

目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件。

参考这篇课解决 https://juejin.cn/post/7230806990452588581

[Violation] Forced reflow while executing JavaScript

很多很多年前，网页端图片裁切都会想到 cropper.js 。到了当前， cropper.js 还是值得一选。这个是基于 js，ts 的插件，不局限你使用 vue 还是 使用 react 或其他的。反正，还是很好用。当下 2.0 版本更好用。

官网： https://fengyuanchen.github.io/cropperjs/v2/zh/

演练场：https://fengyuanchen.github.io/cropperjs/v2/zh/playground.html

这个插件越来越自由，也越来越集中。它只关注输入（img dom）和输出（canvas）[转换成 base64 可能会存在跨域问题]。大只分以下几个模块（每个模块都可以单独使用）。

Cropper

CropperCanvas

CropperImage

CropperSelection

CropperShade

CropperGrid

CropperViewer
# 等等

这些，都各自有各自的渲染职责。加上就有，配置就改变。不加则没有。想加就加，想减就减。是真的好用。 先看一个我做的一个 demo。是基于vue3 + ts 实现的。（不对。里边还加了一些 element-plus 的组件）

构建的时候，也很方便。使用其接口就可以。更好的是是基于组件的方式来处理。最终的目的是什么，是要渲染到 dom 中，让人看到。 组件不就是最直接的方式吗。这个时候，你可以很方便的使用 css 去美化你的产品。只需要少量关注一些配置就好。比如裁切比例，覆盖比列等。

继续阅读

有封装好的 useDark useToggle 这些插件，做项目就很方便。可是用的时候，会遇到一些问题。其实到最后，不是问题了。比如改变主题的时候，transition 失效了。因为没 transition，强行改变背景颜色等就会很生硬。transition 失效是因为 userColorMode 在处理改变的时候，先禁用 transition 再取消禁用导致的。在创建 useDark 的时候，options 的 disableTransition 可以控制该行为，只是不传值的时候，默认就是 true，就是禁用 trasition。那么默认传入 disableTransition 为 false 的值就可以搞定了。

https://github.com/vueuse/vueuse/blob/main/packages/core/useColorMode/index.ts#L122

const isDark = useDark({disableTransition: false})
 const toggleDark = useToggle(isDark)

只需上边这样实现即可。

继续阅读

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

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

https://www.zeipan.com/admin

用户登录

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

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

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

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

要做好这些，先温习一下 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 内部去处理就好了。

继续阅读