vite初始化

三种配置方式

1、默认初始化

npm init vite@latest

2、直接创建模板

// 指定项目名字
npm init vite@latest my-vite-app
// 也可以直接指定vite的创建模板，但是要注意npm6和npm7+的指令是不同的
// npm6
npm init vite@latest my-vite-app --template react
// npm 7+
npm init vite@latest my-vite-app -- --template react

可以根据指引创建模板

输入上述指令，启动项目。运行成功之后，可以在控制台中看到目前运行的地址

直接打开http://localhost:3001/ ，可以看到初始页面如下

3、vite社区模板

vite社区有许多开发者提供的现成模板，可以在awesome-vite上找到符合要求的模板，直接运行下面的指令就可以生成自己的项目啦！

npx degit template-name
cd my-vite-app
npm i

Antd配置

安装

npm install antd --save

我们将项目中的App.tsx文件修改为如下，以验证antd是否可以正常使用

import { useState } from 'react'
import { Button } from 'antd'
import './App.css'
    function App() {
        return ( 
          <div className="App">
            <Button type="primary">antd按钮</Button> 
          </div>
         )
    } 
export default App

运行后，展示如下，发现antd的样式没有成功引入

全局引入antd的样式

在项目主文件main.tsx中引入antd的样式，如下

import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
import App from './App'

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
)

同时下载less预处理器

npm install -D less

并在vite.config.ts中指定css的预处理器

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    css: {
        preprocessorOptions: {
            less: {
            // 支持内联 javascript
            javascriptEnabled: true,
            },
        }
    }
})

配置antd的css按需引入

在上一步，我们全局引入了antd的css，打包后发现光css的包就有529kb啦，这怎么能忍呢？

所以我们需要考虑一下如何按需引入css。

为了解决这个问题，我们需要引入一个插件，用于按需引入组件库样式的插件。

• vite-plugin-imp
• vite-plugin-style-import

以上两个插件可以实现按需引入组件库样式，尝试后发现vite-plugin-imp这个插件目前有个问题是，它支持按照组件动态引入组件内部的样式，但是antd还定义了一些全局样式，比如对a标签的样式重写，这部分样式没有被正确引入。所以我建议使用vite-plugin-style-import

npm i vite-plugin-style-import -D --save

配置vite.config.ts文件

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react(), styleImport({ resolves: [AntdResolve()] })]
    css: {
        preprocessorOptions: {
            less: {
            // 支持内联 javascript
            javascriptEnabled: true,
            },
        }
    }
})

修改为按需加载后可以发现，css包的大小有很明显的下降，真香

prettier

下载

npm install prettier -D --save

配置

echo {}> .prettierrc.json

在.prettierrc.json文件中配置你需要的prettier格式即可

eslint

下载

npm install eslint -D --save

配置

在package.json中配置

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --fix"
}

同时添加.eslintrc.js文件，此处可以参考一些eslint配置的文章。 此时，你就可以运行npm run lint对src下文件做lint校验啦！

stylelint

下载

npm install --save-dev stylelint stylelint-config-standard

配置

创建一个.stylelintrc.json文件，并增加配置

{
"extends": "stylelint-config-standard"
}

同样，你可以参考一些配置stylelint的文章去完成stylelintrc文件的配置。

完成

基于此，我们就完成一个vite项目的基本搭建啦。如果各位有什么问题或者建议的话，可以在评论区给我留言～

参考文档： zhuanlan.zhihu.com/p/358403100