Recently studied Vite+Vue development environment, write demo. I wanted to try Vite+React because I had been developing with React.

The Node environment is already installed by default

Key points:

  • Vite scaffolding initializationReactproject

Build Vite project

Compatibility Note

Vite requires node.js version >= 12.0.0.

Please refer to the official documentation if you are interested.

One-click project generation

Vite provides two ways to initialize a project. One is:

npm init @vitejs/app
Copy the code

Another option is to use the official template directly, one click generation:

# NPM 6. X NPM init @vitejs/app my-react-app --template react # NPM 7+  npm init @vitejs/app my-react-app -- --template react # yarn yarn create @vitejs/app my-react-app --template reactCopy the code

This article uses the second method to generate projects:

Follow the steps above to go to my-React-app and start the project

cd my-react-app && yarn && yarn dev
Copy the code

Install Vite + React. Configure routes.

React-router-dom is introduced

yarn add react-router-dom -S
Copy the code

Add a pages directory under the project SRC directory, create two more directories, Home and About, and create index.jsx under the directory

// /Home/index.jsx
import React from 'react'

export default function Home() {
    return (
      <div>
        Home
      </div>)}// /About/index.jsx
import React from 'react'

export default function About() {
    return (
      <div>
        About
      </div>)}Copy the code

Write the route. Js

Create a SRC /router/index.js file and configure the route:

import Home from '.. /pages/Home'
import About from '.. /pages/About'

const routes = [
  {
    path:'/'.component: Home,
    name:'Home'
  },
  {
    path:'/about'.component: About,
    name:'About'},]export default routes
Copy the code

Configure the App. JSX

Import the routing file into the app.jsx file and configure:

import React, { useState } from 'react'
import {BrowserRouter as Router, Switch, Route,Link} from 'react-router-dom'
import routes from './router'

import './App.css'

function App() {
  return (
    <div>
      <Router>
        <div className="navBox">
        {
          routes.map(route=><Link to={route.path} key={route.path} className="nav" >
            {route.name}
          </Link>)}<p>The content area</p>
        </div>
      <br/>
      <Switch>
        {
          routes.map(route=><Route exact path={route.path} key={route.path} render={route.component}>
          </Route>)}</Switch>
    </Router>
    </div>)}export default App
Copy the code

View the configured page after starting the project

After configuring the basic project to look ugly without the UI, configure a UI component library, ANTD, to make the project more beautiful.

Configure the Antd UI component library

First download the installation package:

yarn add antd @ant-design/icons -S
Copy the code

The ICONS library for antD 4 is separate and needs to be installed separately

After a successful installation, introduce styles in the entry file main.js.

.import 'antd/dist/antd.css'.Copy the code

JSX /Home/index. JSX

import React from 'react'
import {Button} from 'antd' 
export default function Home() {
    return (
      <div>
        Home
        <Button type='primary'>Verify the installation.</Button>
      </div>)}Copy the code

No need to restart the project, open the browser to refresh as shown in the following figure, which means that ANTD has been successfully introduced

Everything is configured and ready for development.

After switching to Vite, I want to see the file size after build, and run the yarn Build command as follows:

At first glance, the globally-introduced styles are 588.11 KB when packaged, so let’s try loading on demand.

Antd is loaded on demand

First, install the plug-in:

yarn add vite-plugin-imp -D
Copy the code

Then configure it in vite.config.js

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import vitePluginImp from 'vite-plugin-imp'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList:[
        {
          libName:'antd'.style: name= >`antd/lib/${name}/style/index.less`,}]})],css: {preprocessorOptions: {less: {// Support inline JS
        javascriptEnabled:true}}}})Copy the code

Yarn add less less-loader -d import ‘antd/dist/antd. CSS ‘from main. JSX Run YARN Build again to see the package size:

CSS style pack became 40.40 KB, Amazing!

Custom ANTD theme colors

Modify the vite.config.js file as follows:

.import lessToJs from 'less-vars-to-js';
import fs from 'fs';
import path from 'path';
// Read the less file in as string
const variablesConfig = lessToJs(fs.readFileSync(path.resolve(__dirname,'./config/variables.less'), 'utf8'))

export default defineConfig({
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList:[
        {
          libName:'antd'.style: name= >`antd/lib/${name}/style/index.less`,}]})],css: {preprocessorOptions: {less: {// Support inline JS
        javascriptEnabled:true.// Override the less variable to customize the style
        modifyVars:variablesConfig
      }
    }
  }
})
...

Copy the code

The less-vars-to-js package converts less styles to JSON key-value pairs

Then add the /config/ variable. less file to the root directory as follows:

/ / custom cover = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
@primary-color: orange; // Global primary color
// You can write a variety of overlay styles below
Copy the code

After restarting the project, the theme color is changed. To view: