vite + react +typescript 环境搭建小白入门教程

目录
  • 前言
  • 1. 使用 vite 创建 react 项目
    • 1. npm / yarn 命令初始化
    • 2. 输入项目名称
    • 3. 选择框架
    • 4. 选择 Js / Ts
    • 5. 项目创建完成
    • 6. 启动项目
  • 2. 规范项目目录
  • 3. 使用 react-router-dom 路由
    • 1. 使用 npm / yarn 命令下载
    • 2. 更改 react-router-dom 版本
    • 3. 修改App.tsx文件
  • 4. 配置 alias 别名
  • 5. 配置 Ant Design 样式库
  • 6. 配置axios与顶部加载进度条,进行二次封装
  • 7. 配置 proxy 跨域
  • 8. 配置 Less / Sass
    • 1. 配置 Less
    • 2. 配置 Sass

前言

使用 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

LessSassCss 预处理语言,支持变量、嵌套,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";',
    },
  },
},

注意: Lesssass 使用一个即可,我一般使用 Less

到此这篇关于vite + react +typescript 环境搭建小白入门教程的文章就介绍到这了,更多相关vite + react +typescript 环境内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 如何在vite里获取env环境变量浅析

    目录 .env环境配置文件 在cli项目中我们可以是配置.env.[mode]文件来配置环境变量 在cli项目中使用.env.[mode] 在vite中使用.env文件 总结 .env环境配置文件 在项目中总会遇到一些默认的配置,需要我们配置到静态文件中方便我们去获取,这时候就可以用到这个.env环境变量文件,在cli创建的项目中顶层的nodejs会有一个process对象,这个对象可以根据不同的环境获取不同的环境配置文件,但是,在vite里面无法使用process对象,通过研究,在vite里使

  • Vite+React搭建开发构建环境实践记录

    目录 前言 使用 create-vite 脚手架生成基础模板 eslint prettier react-router antd 别名 Less 与 CSS Module 总结 前言 使用 Vite 已经有两年了,期间使用它开发过单页面应用,也开发过浏览器扩展插件,对比日常工作中用到的 webpack 构建速度大幅提升,开发体验也好很多.虽然相比于 webpack 来说简单了很多,但是仍然有一些配置需要记录一下,以便之后可以快速搭建一个本地开发构建的环境. 使用 create-vite 脚手架生

  • 教你如何开发Vite3插件构建Electron开发环境

    目录 创建项目 创建主进程代码 开发环境 Vite 插件 渲染进程集成内置模块 设置 Vite 模块别名与模块解析钩子 总结 开发新版本 Vue 项目推荐你使用 Vite 脚手架构建开发环境,然而 Vite 脚手架更倾向于构建纯 Web 页面,而不是桌面应用,因此开发者要做很多额外的配置和开发工作才能把 Electron 引入到 Vue 项目中,这也是很多开发者都基于开源工具来构建 Electron+Vue 的开发环境的原因. 但这样做有两个问题:第一个是这些开源工具封装了很多技术细节,导致开发

  • vue3+vite中开发环境与生产环境全局变量配置指南

    目录 一.开发环境和生产环境 二.配置环境变量 三.使用全局变量 总结 一.开发环境和生产环境 开发环境:也就是编码时运行的环境,即我们使用npm run dev或者npm run serve运行项目到本地时,项目处于的环境. 生产环境:项目部署到服务器上后处于的环境,我们使用npm run build将项目打包以后,再运行项目,项目就运行在生产环境中了. 对于不同的环境,我们可以配置不同的环境变量,来实现开发和生产的兼容. 例如: 开发环境时,我们可以请求自己本地的接口(‘/api’ prox

  • vue使用vite配置跨域以及环境配置详解

    目录 如何配置跨域,代理域名 区分开发环境和生产环境,以及预发布环境 可以做什么事 补充:解决跨域常用方法 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 如何配置跨域,代理域名 不管使用什么脚手架,配置代理都是绕不开的话题,下面是vite的代理 server: { proxy: { '/api'

  • vue3+vite使用环境变量.env的一些配置情况详细说明

    目录 1.设置.env中的内容信息 注意vue3+vite 必须使用VITE开头的配置信息 否则无法获取 2.在 vite 中使用环境变量,可以用 import.meta.env,有四种环境变量,如下所示: 3.使用环境变量 4.配置env.d.ts文件,为环境变量增加智能提示 5.在package.json中配置模式 补充:Vue3的Env环境变量配置的应用 总结 在项目文件中新建文件.env .env.pro 两个文件其中.env 是默认设置 .env.pro 为正式环境设置 1.设置.en

  • Vite多环境配置项目高定制化能力详解

    目录 业务背景 多环境场景的业务形态 Vite多环境方案实现 多模式文件配置 自定义环境变量 Vite默认环境变量 通过插件透传环境变量 客户端环境差异定制 效果图 解决的业务场景思考 业务背景 近些年来,随着前端工程架构发展,使得前端项目中也能拥有如后端工程的模块能力.正所谓 “能力(越)越大(来),责任(越)越大(卷)”,现在的前端工程不仅仅要满足业务需求,还伴随更多复杂的环境适配问题,例如: api请求的域名会根据不同环境而不同: 线上环境和测试环境在打包策略有所不同「如线上要隔离sour

  • Vite结合whistle实现一劳永逸开发环境代理方案

    目录 开发环境面临的跨域问题 常用代理方案 Vite自带代理支持 whistle代理「推荐」 whistle 代理配置 1. 安装whistle 2. 启动whistle 3. 安装插件 4. Proxy SwitchyOmega配置 5. whistle rules配置 6. 开启代理开关 巧用 whistle whistle rules相关配置 Vite工具库设置 代理方案效果对比 开发环境面临的跨域问题 我们用webpack或vite等工具开发本地项目时,浏览器一般会输入的域名是:127.

  • Vite开发环境搭建详解

    目录 Vite初始化项目 集成Vue-Router 集成Vuex 集成Git提交验证 集成Eslint 配置alias ​Vite​​​现在可谓是炙手可热,可能很多小伙伴还没有使用过​​Vite​​​,但是我相信大多数小伙伴已经在使用​​Vite​​​了,因为是太香了有没有.可能在使用过程中很多东西​​Vite​​​不是配置好的,并不像​​Vue-cli​​配置的很周全,那么今天就说一下如何配置开发环境,其中主要涉及到的点有一下几个: TypeScript Vuex Vue-Router E2E

  • vite + react +typescript 环境搭建小白入门教程

    目录 前言 1. 使用 vite 创建 react 项目 1. npm / yarn 命令初始化 2. 输入项目名称 3. 选择框架 4. 选择 Js / Ts 5. 项目创建完成 6. 启动项目 2. 规范项目目录 3. 使用 react-router-dom 路由 1. 使用 npm / yarn 命令下载 2. 更改 react-router-dom 版本 3. 修改App.tsx文件 4. 配置 alias 别名 5. 配置 Ant Design 样式库 6. 配置axios与顶部加载进

  • TypeScript环境搭建的实现步骤

    目录 1. 安装TS环境 2. 安装 ts-node 3. 安装nodemon 4. Parcel打包支持浏览器运行TS文件 前提是已经装好了node.js,node.js安装图文教程 1. 安装TS环境 进入到要项目文件夹中,使用 npm init --yes 初始化(该命令在项目文件夹中生成 package.json) 安装 typescript (安装不成功,可能是权限不够) 全局安装:cnpm i typescript -g [建议] 本地安装:cnpm i typescript -D

  • Java运行环境搭建的图文教程

    1.Java运行环境搭建,对于初学者来说,主要下载安装jdk即可,windows操作系统再配合记事本,即可进行java程序开发.后续的学习以及工作中需要使用IDE工具进行开发,常用IDE工具是eclipse.myeclipse等. 2.jdk是啥?Java Development Kit,Java开发工具包.详情见百度百科.jdk9已经发布了,但是工作中常用的是jdk1.6版本.学习的话1.6,1.7都可以.没必要去下最新的版本. 3.jdk已经以后其他用到的工具建议都去官网下载.网上各种教程可

  • PHP服务端环境搭建的图文教程(分享)

    一.PHP服务端环境搭建 1.php 服务端环境 安装套件 xampp(apach+mysql+php解释器) F:\MyDoc文件(重要)\DL_学习\download重要资源\apache服务器组件 安装 此时进入xmapp面板显示成功运行 测试本地Apache服务器是否开启:浏览器中输入127.0.0.1 回车即可进入xmapp官网 4.修改浏览器中默认出现的dashboard文件夹 打开xmapp下htdocs文件夹下 index.php文件 配置文件中默认跳转到本文件夹 解决办法:将h

  • MyBatis-Plus集成Druid环境搭建的详细教程

    一.简介 Mybatis-Plus是一款 MyBatis 动态 sql 自动注入 crud 简化 增 删 改 查 操作中间件.启动加载 XML 配置时注入 mybatis 单表 动态 SQL 操作 ,为简化开发工作.提高生产率而生.Mybatis-Plus 启动注入非拦截实现.性能更优. 1.1.原理 1.2.特性 无侵入:Mybatis-Plus 在 Mybatis 的基础上进行扩展,只做增强不做改变,引入 Mybatis-Plus 不会对您现有的 Mybatis 构架产生任何影响,而且 MP

  • DVWA下载、安装、使用(漏洞测试环境搭建)的详细教程

    DVWA(Damn Vulnerable Web Application)是一个用来进行安全脆弱性鉴定的PHP/MySQL Web应用,旨在为安全专业人员测试自己的专业技能和工具提供合法的环境,帮助web开发者更好的理解web应用安全防范的过程. 一共有十个模块: 暴力(破解).命令行注入.跨站请求伪造.文件包含.文件上传.不安全的验证码.SQL注入.SQL盲注.弱会话ID.XSS漏洞(DOM型跨站脚本.反射型跨站脚本. 存储型跨站脚本) 环境搭建 由于是本地搭建真实web漏洞网站,我就以Win

  • 基于visual studio code + react 开发环境搭建过程

    开发环境 windows 开发工具 visual studio code node 安装和 npm windows 安装node 可以直接在 node官网直接下载直接当作普通软件安装即可. 安装完成可以在控制台中运行node测试是否安装成功 win + r 输入 cmd ,直接在终端输入node -v 输出版本号及已经成功安装. 目前新版本的node自带npm(npm 是随同 node 一起安装的包管理工具).这里安装好了 node并且测试安装成功之后,可以继续在控制台输入 npm -v 检查是

  • 使用Docker+jenkins+python3环境搭建超详细教程

    前言: 自动化写好后需要在服务器上每日定时运行遇到,这样的一个问题,Jenkins容器是在docker中安装的 ,然后从git上拉取代码 发现代码在jenkins容器的目录当中,运行的时候提示没有安装python环境还第三方库. 解决方法有3种: 第一种:启动jenkins容器时 将容器的目录挂载到宿主机目录上去执行(方法不能实现)Pass 第二种:在jenkins上创建本地节点,将代码拉取到本地 然后去运行本地项目(在本机上使用比较方便,但是局限性比较小) 第三种:重新封装jenkins镜像,

  • Vue新手指南之环境搭建及入门

    目录 初始Vue 搭建Vue开发环境 创建Vue实例 Vue模板语法 Vue数据绑定 el-data的两种写法 MVVM模型 Vue数据代理 Vue中的事件处理 总结 Vue官网:https://cn.vuejs.org 初始Vue 什么是Vue? 一套用于构建用户界面的渐进式JavaScript框架 Vue可以自底向上逐层的应用 简单应用:只需要一个轻量小巧的核心库 复杂使用:可以引入各式各样的Vue插件 Vue的特点: 1.组件化模式,提高代码复用率,更好维护代码 2.声明式编码:无需直接操

  • TypeScript环境搭建并且部署到VSCode的详细步骤

    目录 TypeScript环境搭建 第一步:下载淘宝镜像 第二步:下载TypeScript 部署到VSCode 先创建一个文件夹tsDemo, 修改tsconfig.json配置 可能会遇到的报错 前言:要想搭建TypeScript,那么就要有npm,要想有cnpm,那么就得有node环境.要是都有了的话,那么接下来,往下看. TypeScript环境搭建 第一步:下载淘宝镜像 先检查自己有没有成功安装npm 有npm还不行,还要下载cnpm,命令如下(直接复制粘贴): npm install

随机推荐