Vite基础 | 青训营

2023-08-16 57 阅读2分钟

两大组成部分：

No-bundle开发服务，源文件无需打包
生产环境基于Rollup 的Bundler

核心特征

高性能，dev启动速度和热更新速度非常快！
简单易用，开发者体验好

1. 使用 Sass/Scss & CSS Modules

1. 下载引入包

npm i sass -D

把index.css改成index.scss
导入index.scss文件

注意：如果使用了scss，scss中使用图片的绝对路径的时候需要加上~

2. 修改样式文件名

CSS IN JS：以js的方式来处理css 。思想是让css有局部作用域全局作用域这样的区分.
CSS IN JS：是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题. 原理:CSS Modules通过自动给CSS 类名补足类名,保证类名的唯一性,从而避免样式冲突的问题。 CSS IN JS的具体实现方法有很多 CSS Modules css module的注意点:
类名最好使用驼峰命名，因为最终类名会生成styles的一个属性
如果使用中划线的命名，需要使用[]语法 .tab-bar {} ---> styles['tab-bar']
从 xx.scss -> xx.module.scss （React脚手架中的约定，与普通 CSS 作区分）

3. 组件中进行使用

组件中导入该样式文件（注意语法） import styles from './index.module.scss'
通过 styles 对象访问对象中的样式名来设置样式
css类名是xxx.module.scss中定义的类名。

2. 使用静态资源

对于资源加载问题，Vite需要处理的就是如何将静态资源解析出来并加载为一个 ES 模块；接下来，我们看一下如何在Vite项目中使用图片。首先，我们需要在 Vite配置文件vite.config.ts中配置一下图片资源，比如：

import path from 'path';
{
  resolve: {
    //别名配置
    alias: {
      '@assets': path.join(__dirname, 'src/assets')
    }
  }
}

接下来，我们就可以在代码中引入assets的图片，比如：

import React, { useEffect } from 'react';
import { devDependencies } from '../../../package.json';
import styles from './index.module.scss';

import logoSrc from '@assets/vite.png';

export function Header() {
  return (
    <div className={`p-20px text-center ${styles.header}`}>
      
      <img className="m-auto mb-4" src={logoSrc} alt="" />
    </div>
  );
}