咱们来聊一聊vite4吧？ 将欣赏夕阳的时间来补充一下能力？

iccKey
331 阅读3分钟

先简单来说一下 vite, 据我们所得知的信息, 就是快,有多快呢, 秒运行,哦,那用起来不是很丝滑,对呀。 话不多说, 那咱们一起来搭建一下, 做程序员的都知道,一遇到不会的会去查资料,然后再去嵌套或者克隆,学到了也赚到了, 我这两天看了一下,普遍都是TS+ Vite+ React18, 简单吐糟一下,哪有那么多时间来学习新知识,旧的项目都堆积了一箩筐了(请勿拉缸),然后我再想,要不自己试试，万一玩明白了, 原来玩webpack 的时候各种配置,各种修复, 听说抛弃了webpack,没有那么啰嗦了,那现在就开始吧！

首先

image.png

image.png

image.png

因为好长一段时间不啃vue了,不知道 vite 更新太快了还被骂了一顿,委屈宝宝

搭建vite, vite2的时候我们的使用方式是这样的:

# npm 6.x
npm init @vitejs/app vite-react-app --template react

# npm 7+, 需要额外的双横线：
npm init @vitejs/app vite-react-app -- --template react

vite4 之后我们变成这样了?

npm init vite@latest
yarn create vite
// 根据提示选择配置即可 vite 提供的选项很少，只有 react 或 react + ts

然后是这样的了? 和我当初构建 vue2.0 差不多 npm init webpack template

image.png

image.png

image.png

image.png

image.png

好了现在开启我们的vite4.0 旅行吧

配置别名

我们发现原来在 vue 上可以设置别名那 vite 上呢, 这还有思考呀,那肯定也行呀 如果path或者__dirname报红， 需要安装支持@types/node到本地

 npm i @types/node -D

vite.config.js

 import {  defineConfing } from 'vite'
 import react from '@vitejs/plugin-react'
 import path from 'path' 
 export default defineConfig({
  plugins: [
    react(),
    createStyleImportPlugin({
     resolves:[AntdResolve()]
    })
],

 resolve:{
      // 配置别名 @为src 引入
      alias:{
        '@':path.resolve(_dirname,"src")
       }
    }
})

配置了@别名之后去引入文件发现没有智能提示，需要在根目录添加一个jsconfig.json文件


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

配置完成后,记得要重启一下编辑器哦,或者重新运行一下vite

 yarn dev

配置proxy代理

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
],
 
  resolve:{
    // 配置别名 @为src引入
    alias:{
        '@':path.resolve(__dirname,"src")
    }
  },
 
  server:{
    host:'0.0.0.0',
    proxy:{
        '/api':{
            target:'http://10.3.89.113:9015/journal',
            ws:true , // 可以使用https
            changeOrigin:true,
            rewrite:path => path.replace(/^\/api/,"")
        }
    }
  }
})

安装Ant design 按需引入

npm install antd --save
按需引入
npm i less less-loader vite-plugin-style-import -D

这里关于 less css 插件的使用 我稍后再讲

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import {createStyleImportPlugin,AntdResolve} from 'vite-plugin-style-import';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    createStyleImportPlugin({
     resolves:[AntdResolve()]
    })
],
 
  resolve:{
    // 配置别名 @为src引入
    alias:{
        '@':path.resolve(__dirname,"src")
    }
  },
  // 配置antd 按需加载
  css:{
    preprocessorOptions:{
        less:{
            modifyVars:{
                // 更改主题
                "primary-color":'#52c41a',
                "link-color":"#1DA57A",
                "border-radius-base":'2px'
            }
        },
        javascriptEnabled:true
    }
  },
  server:{
    host:'0.0.0.0',
    proxy:{
        '/api':{
            target:'http://10.3.89.113:9015/journal',
            ws:true , // 可以使用https
            changeOrigin:true,
            rewrite:path => path.replace(/^\/api/,"")
        }
    }
  }
})

来测试一下 antd 按需加载

import React from 'react'
import { Button } from 'antd'
export default function home() {
    return (
        <div>
            <span>home</span>
            <Button type="primary">蓝色按钮</Button>
        </div>

    )
}


import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
import Home from '@/Page/Home/home';

function App() {
    <div>
      <Home/>
    </div>
  )
}

export default App

最终效果

image.png

文章借鉴于:zhuanlan.zhihu.com/p/456407867

下集我们来讲 react-router, react-redux, mobx, 等插件的引入与使用,敬请期待哦

avatar
文章
阅读
粉丝