首页 前端知识 vite react typescript 环境搭建,小白入门级教程

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

2024-08-30 03:08:06 前端知识 前端哥 389 368 我要收藏

目录

    • 前言
  • 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 版本
      • 1. 通过 npm 命令降低版本
      • 2. 手动修改 package.json 文件,然后 npm install
    • 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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17178.html
评论
发布的文章

npm install 报错解决记录

2024-09-09 00:09:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!