关于

AI-市场

AI-工具集

AI-模型市场

映技派-AI工具集

心流AI模型市场[MCP和智能体]

原创前端

前端项目

vue3-typescript-pro

ppxiong <

我的

文库

AI-市场

AI-工� if (t === undefined) { if (isLightMode) activateLightMode() else if (isDarkMode) activateDarkMode() else if (isNotSpecified || hasNoSupport) { const now = new Date() const hour = now.getHours() const isNight = hour <= 6 || hour >= 18 isNight ? activateDarkMode() : activateLightMode() } window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) { if (saveToLocal.get('theme') === undefined) { e.matches ? activateDarkMode() : activateLightMode() } }) } else if (t === 'light') activateLightMode() else activateDarkMode() if("system" === 'dark') activateDarkMode() if("system" === 'light') activateLightMode() const asideStatus = saveToLocal.get('aside-status') if (asideStatus !== undefined) { if (asideStatus === 'hide') { document.documentElement.classList.add('hide-aside') } else { document.documentElement.classList.remove('hide-aside') } } })(window) // 对响应数据做点什么 return response }, (error) => { // 对响应错误做点什么 return Promise.reject(error) }, ) }

ElementPlus

https://element-plus.org/zh-CN/

安装插件

pnpm install element-plus -S

全局引入

在main.ts入口文件中引入element-plus以及全局样式!

import ElementUi from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementUi)

全局引入会将所有的组件以及样式在入口文件进行引入，会影响打包速度以及体积大小！

按需引入

按需引入，需要安装自动导入插件，来帮我们实现自动组件导入!

pnpm install -D unplugin-vue-components unplugin-auto-import unplugin-element-plus

https://npmmirror.com/package/unplugin-vue-components

插件地址，可以查看具体使用方式!

在vite中，引入引入两个自动导入组件插件!

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({
  plugins: [
    vue(),
    vueDevTools(),
    // element plus 样式自动导入
    ElementPlus({
      useSource: true,
    }),
    // 配置自动导入，ref reactive 时自动导入vue
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: true,
      resolvers: [ElementPlusResolver()],
    }),
    // 配置组件自动导入
    Components({
      dts: true,
      resolvers: [ElementPlusResolver()],
      extensions: ['vue'],
      dirs: ['src/components/'],
    }),
  ],
})

配置 types 类型声明，在使用自动导入时，会帮我们创建两个声明文件，
"auto-imports.d.ts", "components.d.ts"
需要在 tsconfig.app.json 中加入两个声明文件!

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "auto-imports.d.ts", "components.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "noImplicitThis": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

加入声明文件后，对于unknow未知类型的标签，就会有对应的类型提示了

组件封装

封装常用的全局组件

svg-icon

全局icon组件, 需要安装的插件 vite-plugin-svg-icons | unplugin-icons

pnpm install -D vite-plugin-svg-icons | unplugin-icons

在vite.config.ts中引入插件，并配置icon路径!

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import Icons from 'unplugin-icons/vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    // 配置icons
    Icons({
      autoInstall: true,
    }),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [fileURLToPath(new URL('./src/icons', import.meta.url))],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
)}

创建svg-icon 组件，src -> components -> svg-icon -> index.vue

<template>
  <svg aria-hidden="true" class="svg-icon" :style="'width:' + size + ';height:' + size">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts" name="SvgIcon">
import { computed } from 'vue'

const props = defineProps({
  prefix: {
    type: String,
    default: 'icon',
  },
  iconClass: {
    type: String,
    required: false,
    default: '',
  },
  color: {
    type: String,
    default: '',
  },
  size: {
    type: String,
    default: '1em',
  },
})

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`)
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
  outline: none;
  fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
}
</style>

在 src 目录下 -> 创建 icons 文件夹，用来存放 svg icon图标!

三月 2025

7 篇

root = true [*] # 表示所有文件 charset = utf-8 # 表示字符集编码 indent_style = space # 表示缩进风格 [tab | space] indent_size = 2 # 表示缩进大小 end_of_line = lf # 控制换行类型 [lf | cr | crlf ] trim_traling_whitespace = true # 去除行尾的空白字符 inset_final_newline = true # 始终在文件末尾插入新的一行 [*.md] # 表示 md 文档适用以下规则 max_line_length = off trim_traling_whitespace = false

{ "useTabs": false, // 使用tab缩进还是空格缩进 "tabWidth": 2, // 缩进的大小 "printWidth": 100, // 当前行字符串的长度 "singleQuote": true, // 单引号还是双引号，true未单引号 "trailingComma": "none", // 对象属性末尾是否追加逗号 "semi": false // 语句末尾是否添加分号 }

import 'normalize.css' import '@/styles/index.scss' /* import ElementUi from 'element-plus' import 'element-plus/dist/index.css' */ import { createApp } from 'vue' import { setupPinia } from '@/stores/index.ts' import App from './App.vue' import router from './router' // 本地SVG图标 import 'virtual:svg-icons-register' const app = createApp(App) setupPinia(app) app.use(router) // app.use(ElementUi) app.mount('#app')

知识点汇总

子组件实例类型定义

当通过 ref 来获取子组件实例类型时，通过InstanceType来定义该组件实例的类型!

<template>
  <div id="layout">
    <el-container>
      <Sidebar ref="sidebarRef" />
      <el-container class="is-vertical">
        <Navbar />
        <Main />
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Navbar from './navbar/Navbar.vue'
import Sidebar from './sidebar/Sidebar.vue'
import Main from './main/Main.vue'
const sidebarRef = ref<InstanceType<typeof Sidebar>>()
</script>

<style lang="scss" scoped></style>

以上获取Sidebar子组件实例，通过InstanceType来定义该组件实例类型!

const sidebarRef = ref<InstanceType<typeof Sidebar>>()

前端项目 3

阅读建议

皮皮熊

vue3-typescript-pro

styles

layout

ElementPlus

安装插件

全局引入

按需引入

组件封装

svg-icon

配置页面`icon`

配置页面`tltle`

配置`路径别名`

代码规范配置

`editorconfig`配置

`prettier`代码格式化

`eslint`代码语法检查

知识点汇总

子组件实例类型定义

配置页面icon

配置页面tltle

配置路径别名

代码规范配置

editorconfig配置

prettier代码格式化

eslint代码语法检查

知识点汇总

子组件实例类型定义

配置页面`icon`

配置页面`tltle`

配置`路径别名`

`editorconfig`配置

`prettier`代码格式化

`eslint`代码语法检查