项目初始化的常见问题

概要

本文主要介绍项目初始化的常见问题，后期会继续更新

一.Css样式的重置

1.定义reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

2.导入normalize.css

– 1.npm下载

npm install --save normalize.css

– 2.在main.ts中导入

import 'normalize.css'

二.ref绑定组件实例时的类型定义

1.使用InstanceType

◼ 用于构造一个由所有Type的构造函数的实例类型组成的类型。

2.具体代码

<el-form
ref="formRef"
 />
// ElForm为组件
import {type ElForm} from 'element-plus'
const formRef = ref<InstanceType<typeof ElForm>>()

三.Element Plus使用时没有类型提示

• 即使用组件时，组件类型为unknown

1.可能的原因

– 没有引入对应的类型声明文件

• 即下载element pluse时自动生成的俩个文件auto-imports.d.ts和components.d.ts文件

解决办法

• 在tsconfig.app.json中的include中导入俩个文件

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "auto-imports.d.ts",
    "components.d.ts",
    "custom-types.d.ts"
  ],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

– vite.config.ts配置错误

• 没有配置正确的vite.config.ts

- 解决办法

• 将 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'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

四.Element Plus使用反馈组件时没效果

1.可能的原因

– 未导入反馈组件的Css样式

• 在使用按需导入组件时，使用反馈组件需要导入对应的css样式

解决方法

• 导入全部的样式(方便简单)

  import 'element-plus/dist/index.css'
  

• 局部引用，只导入需要的反馈组件的css文件

  import 'element-plus/theme-chalk/el-message.css'
  

小结

本文主要介绍项目初始化的常见问题
由于作者水平有限
如果对本文有任何疑问可以私信或者评论区发表你的看法
本文如果对你有帮助，麻烦点个赞和收藏方便回看，点点关注 谢谢