vite?+?react?+typescript?環(huán)境搭建小白入門教程

更新時間：2022年12月24日 09:48:28 作者：小劉加油！

這篇文章主要介紹了vite?+?react?+typescript?環(huán)境搭建小白入門教程,本文通過示例圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

使用 vite 創(chuàng)建項目，node 版本需要大于12.0.0，

可以使用 node -v 查看自己當(dāng)前的node版本

1. 使用 vite 創(chuàng)建 react 項目

1. npm / yarn 命令初始化

我使用的是

npm init @vitejs/app  // 這個已經(jīng)被棄用

npm init vite // 使用這個

or

yarn create @vitejs/app  // 同理，使用下面這個
yarn create vite

2. 輸入項目名稱

項目名稱默認(rèn)為 vite-project，可以自定義，我自定義為demo

在這里插入圖片描述

3. 選擇框架

Vanilla：原生js，沒有任何框架集成
Vue：vue3框架，只支持 vue3
React：react框架
Preact：輕量化 react 框架
Lit：輕量級web組件
Svelte：svelte 框架
Others：其他

毫無疑問，選擇 React

在這里插入圖片描述

4. 選擇 Js / Ts

我選擇 TypeScript

在這里插入圖片描述

5. 項目創(chuàng)建完成

在這里插入圖片描述

6. 啟動項目

進(jìn)入項目：cd demo
安裝依賴：npm install
啟動項目：npm run dev

在這里插入圖片描述

2. 規(guī)范項目目錄

根據(jù)腳手架自動生成的項目目錄肯定不能滿足項目開發(fā)，所以我一般會規(guī)范項目目錄。

在這里插入圖片描述

3. 使用 react-router-dom 路由

1. 使用 npm / yarn 命令下載

npm install react-router-dom -S  // --save  加上 -S 或 --save 會讓依賴更新到 package.json 文件中

or 

yarn add react-router-dom -S

注意： react-router-dom V6 已經(jīng)拋棄了 Switch組件，改用 Routes 組件 ，使用時請注意！??！

這是以前使用 Switch 寫法：

return (
        <Router>
            <Switch>
                <Route path="/login" component={LoginComponent} />
                {/* 中間層 */}
                <Route exact path="/skeleton" component={Skeleton} />
                <Route exact path="/detail" component={Detail} />
                <Route exact path="/approve" component={Approve} /
                <AuthRoute path="/">
                    <LayoutPage />
                </AuthRoute>
            </Switch>
        </Router>
    )

現(xiàn)在 react-router-dom V6，引入 Switch 會報錯！需要使用 Routes

在這里插入圖片描述

這是使用 router-dom V6 的寫法：

在這里插入圖片描述

2. 更改 react-router-dom 版本

對于我個人而言，目前還是使用 react-router-domo V5版本更舒心一些，所以，替換路由版本為V5

有兩種方法：

1. 通過 npm 命令降低版本

npm install react-router-dom@5.2.1 -S

2. 手動修改 package.json 文件，然后 npm install

tips: 建議使用第一種方法，第二種方法容易報各種錯誤，

如果使用上述方法后 react-router-dom 報錯，可以嘗試下以下方法解決：

1、刪除 node_modules 文件夾，然后重新 npm install 下載

如果刪除后重新下載，react-router-dom 仍然報錯，則使用下述命令：

 npm i --save @types/react-router-dom

3. 修改App.tsx文件

在這里插入圖片描述

4. 配置 alias 別名

在開發(fā)中，使用 alias 別名匹配文件是一件非常爽的事情。

在 vite.config.ts 中配置

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    }
})

但配置過后，頁面仍然報錯，找不到該模塊。

在這里插入圖片描述

在 tsconfig.json 文件中再次進(jìn)行如下配置，即可解決：

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

5. 配置 Ant Design 樣式庫

1. 引入

npm install antd --save
or
yarn add antd

2. 在 App.tsx 中引入樣式文件

// App.tsx
import 'antd/dist/antd.css';

3. 在頁面中使用

import { Button, message, Space} from 'antd';

6. 配置axios與頂部加載進(jìn)度條，進(jìn)行二次封裝

下載安裝

npm i axios -S  // 安裝 axios
npm i --save nprogress  // 安裝頂部加載進(jìn)度條

進(jìn)行二次封裝： 將其配置在 http 文件夾下

配置請求攔截器與響應(yīng)攔截器

// http/http.ts

import axios from 'axios'
import NProgress from 'nprogress';
import { message } from 'antd';  // ant 組件配置下面會講到
// import qs from 'qs';
// import store from '@/store';

import 'nprogress/nprogress.css';


//返回其他狀態(tài)碼
axios.defaults.validateStatus = function (status: number) {
  return status >= 200 && status <= 500;
};
//跨域請求，允許保存cookie
axios.defaults.withCredentials = true;
// NProgress 配置
NProgress.configure({
  showSpinner: false,
});

//默認(rèn)超時時間
axios.defaults.timeout = 30000;

//表單序列化
const serialize = (data: any) => {
    const list: any = [];
    Object.keys(data).forEach((ele) => {
        list.push(`${ele}=${data[ele]}`);
    });
    return list.join('&');
};

// 配置請求攔截器
axios.interceptors.request.use((config: any) => {
	// 開啟進(jìn)度條
	NProgress.start();
	const token = window.localStorage.getItem('token');
	const meta = config.meta || {};
	// 讓每個請求都攜帶token
	if (token) {
		config.headers['Authorization'] = token  // 配置請求頭，token的值在自己項目中獲取
	}
	/**
	*  下面的部分可以不寫
	*/
	//headers中配置text請求
    if (config.text === true) {
      config.headers['Content-Type'] = 'text/plain';
    }
    //headers中配置serialize為true開啟序列化
    if (config.method === 'post' && meta.isSerialize === true) {
      config.data = serialize(config.data);
    };
	return config
}, (error: any) => {
	return Promise.reject(error)
})


// 配置響應(yīng)攔截器
axios.interceptors.response.use((res: any) => {
	// 關(guān)閉頂部加載進(jìn)度條
	NProgress.done();
	const status: number = res.data.code || res.status;
	const statusWhiteList: any = [];
	const messages = res.data.msg || res.data.error_description || res.data.message || '未知錯誤';
	 //如果是401則跳轉(zhuǎn)到登錄頁面
    if (status === 401 || status === 403) {
      window.location.href = '/#/login'; // 如果使用的是 HistoryRouter,路徑需要替換，不帶 # 
      message.destroy();
      message.error('登錄過期，請重新登錄');
      return Promise.reject();
    }
    // 如果請求為非200否者默認(rèn)統(tǒng)一處理
    if (status !== 200) {
      if (res.config.responseType == 'blob') {
        const fileReader: any = new FileReader();
        fileReader.readAsText(res.data);
        fileReader.onload = function () {
          const result = JSON.parse(this.result);
          if (!result.message) {
            result.message = '未知錯誤';
          }
          message.destroy();
          message.error(result.message);
          return Promise.reject(new Error(result.message));
        };
      } else {
        message.destroy();
        message.error(messages);
        return Promise.reject(new Error(messages));
      }
    }
	
	return res.data || res
}, (error: any) => {
	NProgress.done();
    const response = error.response;
    // 下面我列舉幾個常見狀態(tài)碼，具體根據(jù)項目中需要，可以將其封裝在一個文件中，便于美觀
    if(response.status == 401) {
    	message.error('登陸已失效')
    	window.location.href = "/#/login"
    } else if (response.status == 403) {
    	message.error('賬號沒有權(quán)限，請聯(lián)系管理員')
    	window.location.href = "/#/login"
    } else if (response.status == 404) {
    	message.error('接口不存在，請聯(lián)系管理員')
    } else if (response.status == 500) {
    	message.error('系統(tǒng)異常，請聯(lián)系管理員')
    } 
    return Promise.reject(new Error(error));
})

export default axios;

7. 配置 proxy 跨域

在 vite.config.ts 中配置

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
    server: {
        port: 3000, // 開發(fā)環(huán)境啟動的端口
        host: '0.0.0.0',
        // open: true, // 項目啟動時自動打開瀏覽器
        proxy: {
            '/api': {
                target: 'http:xxxxxx', // 當(dāng)遇到 /api 路徑時，會將其轉(zhuǎn)換成 target 的值
                changeOrigin: true,  // 如果接口跨域，需要進(jìn)行這個參數(shù)配置
                // 一般情況下，配置上面兩個即可
                // secure: false,      // 如果是 https 接口，需要配置這個參數(shù)
                // rewrite: path => path.replace(/^\/api/, '') // 將 /api 重寫為空
            }
        }
    }
})

8. 配置 Less / Sass

Less 與 Sass 是 Css 預(yù)處理語言，支持變量、嵌套，mixin 和導(dǎo)入等功能，可以極大的簡化 css寫法

1. 配置 Less

1. 使用 npm 安裝 less 和 less-loader

npm install less --save
npm install less-loader --save-dev

// 此處也可以合并命令

2. 在 vite.config.ts 中配置

css: {
  // css預(yù)處理器
  preprocessorOptions: {
    less: {
      // 支持內(nèi)聯(lián) JavaScript
      javascriptEnabled: true,  // 一般只需要配置  javascriptEnabled就行，modifyVars也可以稍微配置
      charset: false,
      modifyVars: { // 更改主題在這里
          'primary-color': '#52c41a',
          'link-color': '#1DA57A',
          'border-radius-base': '2px'
        },
      // additionalData: '@import "./src/assets/style/global.less";',
    },
  },
},

2. 配置 Sass

1. 使用 npm 安裝 sass 和 sass-loader

npm install sass --save
npm install sass-loader --save-dev

2. 在 vite.config.ts 中配置

css: {
  // css預(yù)處理器
  preprocessorOptions: {
    scss: {
      // 支持內(nèi)聯(lián) JavaScript
      javascriptEnabled: true, // 一般只需要配置  javascriptEnabled就行，modifyVars也可以稍微配置
      charset: false,
      modifyVars: { // 更改主題在這里
          'primary-color': '#52c41a',
          'link-color': '#1DA57A',
          'border-radius-base': '2px'
        },
      // additionalData: '@import "./src/assets/style/global.scss";',
    },
  },
},

注意： Less 與 sass 使用一個即可，我一般使用 Less

到此這篇關(guān)于vite + react +typescript 環(huán)境搭建小白入門教程的文章就介紹到這了,更多相關(guān)vite + react +typescript 環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: