前端TS项目中遇到过的难点（一）

TS项目总结

1.项目的搭建及配置

1.1使用vite来创建项目时

兼容性注意 Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本

启动命令以及相关内容具体看vite官网

开始 | Vite 官方中文文档

1.2浏览器自动打开

找到 package.json 配置文件!

"scripts": {
  "dev": "vite --open",
  "build": "vue-tsc && vite build",
  "preview": "vite preview"
 }

1.3 src 别名的配置

找到 vite.config.ts 配置文件。

如果红色语法提示请安装@types/node 是 TypeScript 的一个声明文件包，用于描述 Node.js 核心模块和常用的第三方库的类型信息

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 resolve: {
  alias: {
   "@": path.resolve(__dirname, 'src')
  }
 }
})

 找到tsconfig.json配置文件,找到配置项 compilerOptions 添加配置,这一步的作用是让 IDE 可以对路径进行智能提示

"baseUrl": ".",
  "paths": {
   "@/*": ["src/*"]
  }

2.LESS 和 SCSS 的区别

相同点：

1. LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。

2. 都可以通过自带的插件，转成相对应的css文件。

3. 都可以参数混入，可以传递参数的class，就像函数一样

4. 嵌套的规则相同，都是class嵌套class

不同点：

1.声明和使用变量</