vite?+?react?+typescript?環(huán)境搭建小白入門教程
更新時間：2022年12月24日 09:48:28 作者：小劉加油！
這篇文章主要介紹了vite?+?react?+typescript?環(huán)境搭建小白入門教程,本文通過示例圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
前言
使用 vite 創(chuàng)建項目，node 版本需要大于12.0.0，
可以使用 node -v 查看自己當前的node版本
1. 使用 vite 創(chuàng)建 react 項目
1. npm / yarn 命令初始化
我使用的是
npm init @vitejs/app // 這個已經被棄用 npm init vite // 使用這個 or yarn create @vitejs/app // 同理，使用下面這個 yarn create vite
2. 輸入項目名稱
項目名稱默認為 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. 啟動項目
- 進入項目：cd demo
- 安裝依賴：npm install
- 啟動項目：npm run dev
2. 規(guī)范項目目錄
根據腳手架自動生成的項目目錄肯定不能滿足項目開發(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 已經拋棄了 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>
)現在 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 文件中再次進行如下配置，即可解決：
// 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與頂部加載進度條，進行二次封裝
下載安裝
npm i axios -S // 安裝 axios npm i --save nprogress // 安裝頂部加載進度條
進行二次封裝： 將其配置在 http 文件夾下
配置 請求攔截器 與 響應攔截器
// 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,
});
//默認超時時間
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) => {
// 開啟進度條
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)
})
// 配置響應攔截器
axios.interceptors.response.use((res: any) => {
// 關閉頂部加載進度條
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則跳轉到登錄頁面
if (status === 401 || status === 403) {
window.location.href = '/#/login'; // 如果使用的是 HistoryRouter,路徑需要替換，不帶 #
message.destroy();
message.error('登錄過期，請重新登錄');
return Promise.reject();
}
// 如果請求為非200否者默認統(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)碼，具體根據項目中需要，可以將其封裝在一個文件中，便于美觀
if(response.status == 401) {
message.error('登陸已失效')
window.location.href = "/#/login"
} else if (response.status == 403) {
message.error('賬號沒有權限，請聯系管理員')
window.location.href = "/#/login"
} else if (response.status == 404) {
message.error('接口不存在，請聯系管理員')
} else if (response.status == 500) {
message.error('系統(tǒng)異常，請聯系管理員')
}
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', // 當遇到 /api 路徑時，會將其轉換成 target 的值
changeOrigin: true, // 如果接口跨域，需要進行這個參數配置
// 一般情況下，配置上面兩個即可
// secure: false, // 如果是 https 接口，需要配置這個參數
// rewrite: path => path.replace(/^\/api/, '') // 將 /api 重寫為空
}
}
}
})8. 配置 Less / Sass
Less 與 Sass 是 Css 預處理語言，支持變量、嵌套，mixin 和導入等功能，可以極大的簡化 css寫法
1. 配置 Less
1. 使用 npm 安裝 less 和 less-loader
npm install less --save npm install less-loader --save-dev // 此處也可以合并命令
2. 在 vite.config.ts 中配置
css: {
// css預處理器
preprocessorOptions: {
less: {
// 支持內聯 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預處理器
preprocessorOptions: {
scss: {
// 支持內聯 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
到此這篇關于vite + react +typescript 環(huán)境搭建小白入門教程的文章就介紹到這了,更多相關vite + react +typescript 環(huán)境內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React中useEffect 與 useLayoutEffect的區(qū)別
本文主要介紹了React中useEffect與useLayoutEffect的區(qū)別，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-07-07
React中函數式組件的基本意義是,組件實際上是一個函數,不是類,下面就來給大家介紹一下關于React中函數組件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
Hook是 React 16.8 的新增特性，它可以讓你在不編寫class的情況下使用state以及其他的React特性，這篇文章主要介紹了react中Hooks的理解和用法,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了React實現表格選取，類似于Excel選中一片區(qū)域并獲得選中區(qū)域的所有數據，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
本文介紹了如何在React項目中通過iframe嵌入百度網站的步驟,首先創(chuàng)建一個Baidu.js組件,并在該組件中設置iframe來加載百度,然后在App.js中引入并使用Baidu組件,還討論了因安全策略可能無法加載某些網站的問題,需要的朋友可以參考下2024-09-09
這篇文章主要為大家介紹了react 組件實現無縫輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了React使用Mobx6.x共享狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了JavaScript React如何修改默認端口號方法詳解，文中通過步驟圖片解析介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了手把手教您實現react異步加載高階組件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
本篇文章主要介紹了React-Router如何進行頁面權限管理的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12