vite + react +typescript 环境搭建小白入门教程
更新时间：2022年12月24日 09:48:28 作者：小刘加油！
这篇文章主要介绍了vite + react +typescript 环境搭建小白入门教程,本文通过示例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
前言
使用 vite 创建项目，node 版本需要大于12.0.0，
可以使用 node -v 查看自己当前的node版本
1. 使用 vite 创建 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. 项目创建完成
6. 启动项目
- 进入项目：cd demo
- 安装依赖：npm install
- 启动项目：npm run dev
2. 规范项目目录
根据脚手架自动生成的项目目录肯定不能满足项目开发，所以我一般会规范项目目录。
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 别名
在开发中，使用 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';
//返回其他状态码
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否者默认统一处理
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;
// 下面我列举几个常见状态码，具体根据项目中需要，可以将其封装在一个文件中，便于美观
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('系统异常，请联系管理员')
}
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, // 开发环境启动的端口
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 环境搭建小白入门教程的文章就介绍到这了,更多相关vite + react +typescript 环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了基于antd的autocomplete的二次封装查询示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
React Grid Layout是一个用于在React应用程序中创建可拖拽和可调整大小的网格布局的库,通过使用React Grid Layout,我们可以轻松地创建自适应的网格布局,并实现拖拽和调整大小的功能,本文介绍了React Grid Layout的基础使用方法,感兴趣的朋友一起看看吧2024-02-02
reactjs学习解决unknown at rule @tailwind css
这篇文章主要介绍了reactjs学习解决unknown at rule @tailwind css问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了create-react-app安装出错问题解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了ReactNative实现图片上传功能的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-07-07
本篇文章主要介绍了webpack3+React 的配置全解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了React组件间通讯传值，react组件的通信属于开发基础知识,今天来梳理一下,当然rudex还按老规矩排除在外,如同上篇文章的hooks一样,单独梳理2022-11-11
react-i18next 是基于 i18next 的一款强大的国际化框架，可以用于 react 和 react-native 应用，是目前非常主流的国际化解决方案。这篇文章主要介绍了React国际化react-i18next的相关知识,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了简易的redux createStore手写实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
图片懒加载是一种优化网页性能的技术,它允许在用户滚动到图片位置之前延迟加载图片,通过懒加载,可以在用户需要查看图片时才加载图片,避免了不必要的图片加载,本文给大家介绍了React实现图片懒加载的常见方式,需要的朋友可以参考下2024-01-01
最新评论