vite 构建的 ts 项目中，Could not find a declaration file for module 错误处理
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'在 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'vite 支持自动处理 scss，less 等文件，但需要下载对应的包 https://cn.vitejs.dev/guide/features#css-pre-processors。 如果，你想单独写 scss 这些，可以在 vite.confit.ts 中进行配置
# 创建 vue 项目
pnpm add vue
pnpm format
pnpm dev
# 添加 git 版本控制
git init -b main
git add .pnpm add sasstouch ./src/assets/css/base.scss
# 填充下边内容
body {
background-color: #f00;
}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），依然存在这个问题。
经过前边的处理，用户登录，侧边栏渲染，路由跳转，登录信息展示，用户退出。这些功能最小化完成。如下图所示。
在线预览，可切换角色。新用户注册，有一个默认角色。只有测试账号有多角色。
打开后台域名任意 url 。在路由全局守卫中。 如果用户已登录（存在 token），先判断用户信息是否初始化，如果没有，先请求用户信息（返回数据不仅有用户信息，还有该用户对应的后台权限【用户生产菜单】），处理存储用户信息，添加路由信息。再重定向。如果已初始化，就继续。如果用户没登录，先重定向到登录页面。
调用接口，请求登录。获取用户的 token。存储 token。
通过 token，请求用户信息（数据中包括用户的权限数据），存储用户信息以及权限数据。处理权限数据，生成菜单。
做了一些基础的配置。现在准备开始做布局了。这里只要两种布局，空白布局和后台布局。空白布局什么时候用呢，登录页面会用到。后台布局，就后台真正内容会用到。始终喜欢极简风格，所以方方面面都不要搞的太复杂。后台布局页面主要有左侧菜单栏，顶部信息栏，中间内如区域构成。
要做好这些，先温习一下 vue3 的 vue-router 以及 transition 还有 element plus 的 menu 组件。当然，loading 相关的也会考虑进去。
额外一点。左侧菜单的内容（和路由会一一映射），请求 api 的权限，全部有后端生成。前端不做权限的控制。也就是后端返回过来的菜单是什么样子，前端就渲染成什么样子。
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 内部去处理就好了。
丰富的互联网资源，用 svg 文件作为 icon 已经很常见了。这里使用 iconify 来处理 icon。 iconify 可以理解为一个管理封装各个 icon 的工具。
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'
})
]
})多主题，是一个站点的常规配置。至少白天主题和夜晚主题是必须要有的。 element-plus 提供了一个很好的实现多主题的方案。先从修改默认主题色开始。
https://element-plus.org/zh-CN/guide/theming.html
先安装 sass
pnpm add -D sass再创建覆盖默认主题颜色的 sass 文件
# 创建
touch assets/styles/element.scss
# 填充以下内容
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': #003261,
),
'success': (
'base': #21ba45,
),
'warning': (
'base': #f2711c,
),
'danger': (
'base': #db2828,
),
'error': (
'base': #db2828,
),
'info': (
'base': #42b8dd,
),
),
$button-padding-horizontal: (
'default': 80px,
)
);因为想部署到非根目录下。所以需要明确配置该非根目录的目录名。
修改 nuxt.config.js
import postcss from './postcss.config'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: false },
css: [
'@/assets/css/main.scss'
],
postcss,
app: {
baseURL: '/nuxt/'
}
})其中， app: { baseURL: ''} 就是配置目录的。
首页就按照原网站的图弄弄。图片资源从以往的库中复制过来。
<template>
<NuxtLayout name="base">
<div class="container flex">
<div class="md:w-1/3 flex flex-col">
<span class="text-black text-xl font-semibold mt-16">约拍宝</span>
<a class="text-blue-500 text-sm mt-3" href="https://www.yuepaibao.com" target="_blank">官方网站</a>
<p class="text-gray-600 text-sm mt-3">约拍宝是一款专业摄影类平台,主要服务于爱拍摄的人群。用户可以在平台上进行交互约定支付等来促成合作，还可以发布作品供其他用户欣赏、评论等。</p>
<div class="mt-5">
<img class="w-40 h-40 shadow-sm rounded-md inline mr-5 mb-4" src="../assets/image/home/ypb_miniapp.jpg" alt="约拍宝小程序" />
<img class="w-40 h-40 shadow-sm rounded-md inline mb-4" src="../assets/image/home/ypb_iosapp.jpg" alt="约拍宝 ios app" />
</div>
<div class="mt-1">
<img class="w-40 h-40 shadow-sm rounded-md inline mr-5 mb-4" src="../assets/image/home/ypb_baidu.png" alt="百度小程序" />
<img class="w-40 h-40 shadow-sm rounded-md inline mb-4" src="../assets/image/home/ypb_douyin.png" alt="抖音小程序" />
</div>
</div>
<div class="md:w-2/3 p-10 flex">
<img class="w-full object-contain max-w-3xl" src="../assets/image/home/ypb.jpg" />
</div>
</div>
</NuxtLayout>
</template>效果是这样子的。
有追求，自然会把尽力把每一个地方做到最好。有这样一个场景，中间实体内容很少。这个时候不做特殊处理，如果是正常排版下来，底下会出现很大空白。这样就不好看。既然知道了，那就想办法去解决掉。
先截图看看我说的这个场景。底部我还没完善哈。但是底部下边一大片空白。这样体验就不好了。只是一般网页的内容都会比较多，会把底部堆下去。总不能保证每个页面都能堆下去。
