项目初始化的常见问题

CssHero

已于 2024-08-02 09:38:46 修改

阅读量362

点赞数 7

文章标签： vue.js 前端前端框架 vue typescript

于 2024-02-20 16:14:11 首次发布

本文链接：https://blog.csdn.net/CssHero/article/details/136192708

版权

本文详细介绍了CSS样式的重置方法，包括reset.css和normalize.css的使用，ref绑定组件实例时的类型定义，以及ElementPlus在Vue项目中的类型提示和反馈组件问题的解决方案。还涉及了Vite配置的调整，以确保类型安全和组件效果。

摘要由CSDN通过智能技术生成

概要

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

React种修改配置信息

用处

用来配置路径信息
和使用less

使用 craco库

– 下载

// 下载craco
npm install @craco/craco -D

// 下载less和craco-less
npm i less craco-less

– 实现步骤

在项目的根目录下创建craco的配置文件：craco.config.js，并在配置文件中配置别名
修改 package.json 文件中的脚本命令
重启项目，即可生效使用别名引入

- 配置新建的craco.config.js文件

// 通过 craco插件 修改create-react-app 创建的脚手架webpack
const path = require("path");
const lessPlugin = require("craco-less"); 

module.exports = {
  // 配置less的使用
  plugins: [
    {
      plugin: lessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            // antdv 主题之类的配置
            // modifyVars: { "@primary-color": "#1DA57A" },
            javascriptEnabled: true
          }
        }
      }
    }
  ],
  // webpack 配置
  webpack: {
    alias: {
      // 约定
      "@": path.resolve(__dirname, "src"),
    },
  },
};

插入jsconfig.json

给项目插入，可以提高代码提示效果

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "jsx": "preserve",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

一.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))
    }
  }
})