【vite react】项目环境初始化

海的对岸
2,079 阅读3分钟

「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」

前言

新建了一个react项目，首先要要做哪些？

  1. 路由安装
  2. axios，发送get，post 请求
  3. 安装UI框架，pc端 或 移动端
  4. css样式预处理器
  5. vite.config.js一些配置

开干

路由安装

yarn add react-router-dom

axios安装

yarn add axios

安装antd（PC端UI框架）

npm install antd --save
或
yarn add antd

UI框架分为完全引入和 按需引入

  • 完全引入
  1. 在App.jsx中引入样式文件
  2. 在要使用的xxx.jsx文件中直接引用要用的组件
// App.jsx
...
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import routes from '../src/router';

// 引入antd样式
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

function App() {
  return <>
    <Router>
      <Switch>
        {
          routes.map(route => <Route exact key={route.path} path={route.path}>
            <route.component />
          </Route>)
        }
      </Switch>
    </Router>
  </>
}

export default App

具体xxx.jsx组件中使用

// Index.jsx
import React from 'react';
import { Button } from 'antd';

export default function Index() {
  return <div>
    Index
    <Button type="primary">Button</Button>
  </div>
}

image.png

  • 按需引入(推荐)
  1. 首先我们安装一个插件vite-plugin-style-import：
npm i vite-plugin-style-import -D
或
yarn add vite-plugin-style-import -D

在vite.config.js配置

...
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
    plugins: [
        ...
        styleImport(
          {
            libs: [
              {
                libraryName: 'antd',
                esModule: true,
                resolveStyle: (name) => {
                  return `antd/es/${name}/style/css`;
                }
              }
            ]
          }
        ),
    ]
})

这时，我们就不用在App.jsx中引入所有的样式文件了，直接在要使用的某个具体的xxx.jsx中引入具体的antd组件即可

具体xxx.jsx组件中使用

// Index.jsx
import React from 'react';
import { Button } from 'antd';

export default function Index() {
  return <div>
    Index
    <Button type="primary">Button</Button>
  </div>
}

比较完全引入和按需引入之后的打包大小

完全引入：

image.png

按需引入：

image.png

安装zarm（移动端UI框架） 按需加载

npm install zarm@2.8.2 -S
或
yarn add zarm@2.8.2

ps: 此处Zarm 为我们提供的模拟数字键盘组件 Keyboard，在点击删除按钮的时候，onKeyClick 方法会反复被执行，降级为2.8.2，就没有这个问题

zarm 按需引入（推荐）

ps 此处就不讲完全引入了，主要开发中还是按需引入用的多

同样要安装vite-plugin-style-import

npm i vite-plugin-style-import -D 
或 
yarn add vite-plugin-style-import -D

在vite.config.js配置

... 
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
    plugins: [ 
        ... 
        styleImport(
            {
                libs: [
                    {
                        libraryName: 'zarm',
                        esModule: true,
                        resolveStyle: (name) => {
                            return `zarm/es/${name}/style/css`;
                        }
                    }
                  ]
            }
      ),
    ]
  ...
 })

这时，我们就不用在App.jsx中引入所有的样式文件了，直接在要使用的某个具体的xxx.jsx中引入具体的zarm组件即可

App.jsx如下

import React, { useEffect, useState } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation
} from "react-router-dom"

import zhCN from 'zarm/lib/config-provider/locale/zh_CN'
// 按需加载之后，就不需要引入下面的这个css了，因为vite.config.js中已经做了引入了
// import 'zarm/dist/zarm.css'

import routes from '@/router'
function App() {

  return <>
    <ConfigProvider primaryColor={'#007fff'} locale={zhCN}>
    <Router>
      <Switch>
        {
          routes.map(route => <Route exact key={route.path} path={route.path}>
            <route.component />
          </Route>)
        }
      </Switch>
    </Router>
    </ConfigProvider>
  </>
}

export default App

具体xxx.jsx组件中使用

// Index.jsx
import React from 'react';
import { Button } from 'zarm';

export default function Index() {
  return <div>
    Index
    <Button type="primary">Button</Button>
  </div>
}

vite.config.js的其他配置

resolve.alias 别名设置

我们必须得设置好别名，否则在页面中，你会写出很长一串类似这样的代码 ../../../。

打开 vite.config.js，添加配置如下：

... import path from 'path'

export default defineConfig({
    ...
    resolve: {
        alias: {
          '@': path.resolve(__dirname, 'src'), // src 路径
          'utils': path.resolve(__dirname, 'src/utils'), // utils 路径
          'config': path.resolve(__dirname, 'src/config') // config 路径
        }
    },

转发代理配置

我们需要去配置代理，打开 vite.config.js，添加如下代码：

export default defineConfig({
    ...
    server: {
        proxy: {
          '/api': {
            // 当遇到 /api 路径时，将其转换成 target 的值
            target: 'http://127.0.0.1:7001',
            // target: 'http://xxx.xxxxx.xxxx',
            changeOrigin: true,
            rewrite: path => path.replace(/^\/api/, '') // 将 /api 重写为空
          }
        }
      },
    ...
})

配置 CSS 预处理器 Less

项目中采用的 Less 作为 CSS 预处理器，它能设置变量以及一些嵌套逻辑，便于项目的样式编写。

安装 less 插件包，

npm i less -D
或
yarn add less -D

因为上述配置我们使用的是 less，并且我们需要配置 javascriptEnabled 为 true，支持 less 内联 JS。

修改 vite.config.js，如下：

{
    plugins: [...],
    css: { 
      modules: { 
        localsConvention: 'dashesOnly' 
      }, 
      preprocessorOptions: { 
        less: { 
          // 支持内联 JavaScript 
          javascriptEnabled: true,
        } 
      } 
    },
}

在src目录下的Home文件夹下新建style.module.less样式文件

image.png

style.modules.less内容如下：

.index {
  span {
    color: red;
  }
}

在index.jsx中引入：

import React from 'react';
import { Button } from 'antd';

import s from '@/views/Home/style.module.less'

export default function Index() {
  return <div className={s.index}>
    <span>Index</span>
    <Button type="primary">Button</Button>
  </div>
}

效果如下：

image.png

完整vite.config.js代码

ps UI组件 我以antd为例，zarm的配置也是差不多的，上面已经讲过了

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    styleImport(
      {
        libs: [
          {
            libraryName: 'antd',
            esModule: true,
            resolveStyle: (name) => {
              return `antd/es/${name}/style/css`;
            }
          }
        ]
      }
    ),
  ],
  css: {
    // 该配置设置之后，我们就不用担心在项目中，自定义的样式重名的风险
    modules: {
      localsConvention: 'dashesOnly'
    },
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true,
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // src 路径
      'utils': path.resolve(__dirname, 'src/utils'), // utils 路径
      'config': path.resolve(__dirname, 'src/config') // config 路径
    }
  },
  server: {
    proxy: {
      '/api': {
        // 当遇到 /api 路径时，将其转换成 target 的值
        target: 'http://127.0.0.1:7001',
        // target: 'http://xxx.xxxxx.xxxx',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '') // 将 /api 重写为空
      }
    }
  }
})

都看到这里了，求各位观众大佬们点个赞再走吧，你的赞对我非常重要

avatar
文章
阅读
粉丝