yarn create @vitejs/app

yarn   // 安裝依賴
yarn dev  // 啟動開發(fā)環(huán)境

├── dist/       // 默認的 build 輸出目錄
└── src/       // 源碼目錄
 ├── assets/     // 靜態(tài)資源目錄
 ├── config      
  ├── config.js    // 項目內(nèi)部業(yè)務(wù)相關(guān)基礎(chǔ)配置
 ├── components/    // 公共組件目錄
 ├── service/     // 業(yè)務(wù)請求管理
 ├── store/      // 共享 store 管理目錄
 ├── until/      // 工具函數(shù)目錄
 ├── pages/      // 頁面目錄
 ├── router/     // 路由配置目錄
├── .main.tsx      // Vite 依賴主入口
├── .env       // 環(huán)境變量配置
├── vite.config.ts     // vite 配置選型，具體可以查看官網(wǎng) api
└── package.json

import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter, Route, Switch } from 'react-router-dom'
import routerConfig from './router/index'
import './base.less'

ReactDOM.render(
 <React.StrictMode>
 <HashRouter>
  <Switch>
  {
   routerConfig.routes.map((route) => {
   return (
    <Route key={route.path} {...route} />
   )
   })
  }
  </Switch>
 </HashRouter>
 </React.StrictMode>,
 document.getElementById('root')
)

import BlogsList from '@/pages/blogs/index'
import BlogsDetail from '@/pages/blogs/detail'

export default {
 routes: [
 { exact: true, path: '/', component: BlogsList },
 { exact: true, path: '/blogs/detail/:article_id', component: BlogsDetail },
 ],
}

import * as information from './information'
import * as base from './base'

export {
 information,
 base
}

import { request } from '../until/request'

const prefix = '/api'

export const getAllInfoGzip = () => {
 return request({
 url: `${prefix}/apis/random`,
 method: 'GET'
 })
}

import qs from 'qs'
import axios from "axios";

interface IRequest {
 url: string
 params?: SVGForeignObjectElement
 query?: object
 header?: object
 method?: "POST" | "OPTIONS" | "GET" | "HEAD" | "PUT" | "DELETE" | undefined
}

interface IResponse {
 count: number
 errorMsg: string
 classify: string
 data: any
 detail?: any
 img?: object
}

export const request = ({ url, params, query, header, method = 'POST' }: IRequest): Promise<IResponse> => {
 return new Promise((resolve, reject) => {
  axios(query ? `${url}/?${qs.stringify(query)}` : url, {
   data: params,
   headers: header,
   method: method,
  })
   .then(res => {
    resolve(res.data)
   })
   .catch(error => {
    reject(error)
   })
 })
}

import { information } from "@/service/index";

const { data } = await information.getAllInfoGzip({ id });

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({
 plugins: [
 reactRefresh(),
 vitePluginImp({
  libList: [
  {
   libName: 'antd-mobile',
   style(name) {
   return `antd-mobile/lib/${name}/style/index.css`
   },
  },
  ]
 })
 ],
 resolve: {
 extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
 alias: {
  '@': '/src'
 }
 },
 server: {
 proxy: {
  // 選項寫法
  '/api': {
  target: 'https://www.xxx.xxx',
  changeOrigin: true,
  rewrite: (path) => path.replace(/^\/api/, '')
  },
 }
 },
 css: {
 postcss: {
  plugins: [
  require('postcss-pxtorem')({ // 把px單位換算成rem單位
   rootValue: 32, // 換算基數(shù)，默認100，這樣的話把根標簽的字體規(guī)定為1rem為50px,這樣就可以從設(shè)計稿上量出多少個px直接在代碼中寫多上px了。
   propList: ['*'], //屬性的選擇器，*表示通用
   unitPrecision: 5, // 允許REM單位增長到的十進制數(shù)字,小數(shù)點后保留的位數(shù)。
   exclude: /(node_module)/, // 默認false，可以（reg）利用正則表達式排除某些文件夾的方法
  })
  ]
 }
 }
})

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