使用vite创建Vue/React前端项目,配置@别名和Sass样式,又快又方便

Vite官方网站:Vite | 下一代的前端工具链 

Vite 并不是基于 Webpack 的,它有自己的开发服务器,利用浏览器中的原生 ES 模块。这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。Vite 采用 Rollup 进行构建,速度也更快。 

兼容性注意

Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

搭建一个 Vite 项目

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

根据提示,填写项目名称和使用的框架

然后进入项目里面,安装依赖项和启动项目,就可以正常打开项目了: 

配置环境变量

vite 提供了开发模式和生产模式,这里我们可以建立 4 个.env文件,一个通用配置和三种环境:开发、测试、生产。

env文件中的变量名建议以VITE_APP开头,和vue cli中的VUE_APP相同 ,用法也一致

.env文件 通用配置 用来配置一些公用的,栗子:网页的title VITE_APP_TITLE=hello

.env.dev文件 开发环境配置 以api url为例 VITE_APP_PROXY_URL=/api

.env.test文件 测试环境配置 以api url为例 VITE_APP_PROXY_URL=/api

.env.prod文件 测试环境配置 以api url为例 VITE_APP_PROXY_URL=/apiProd

在写api的时候可以这么使用

const baseUrl = import.meta.env.VITE_APP_PROXY_URL
export const getTabList = (params) => {return axios({method: 'post',url: baseUrl + 'QueryTabReq',data: params})
}

配置proxy代理

vite.config.js中配置server

proxy: {'/api': {target: 'http://10.0.40.200:8979',ws: false,changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}

配置@别名使用

如果path或者__dirname报红,需要安装支持@types/node到本地 npm i @types/node -D

在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: {host: "",proxy: {"api/": {target: "",ws:false,changeOrigin: true,rewrite: path=> path.replace(/^\/api/, '')}}}
})

配置了@别名之后去引入文件发现vcode没有智能提示,需要配置tsconfig.json:

{"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"lib": ["ES2020", "DOM", "DOM.Iterable"],"module": "ESNext","skipLibCheck": true,/* Bundler mode */"moduleResolution": "Node","allowSyntheticDefaultImports": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"baseUrl": "./","paths": {"@": ["src"],"@/*": ["src/*"]}},"include": ["src"],"references": [{ "path": "./tsconfig.node.json" }]
}

配置sass使用 

直接安装sass即可:

yarn add -D sass

然后写个scss文件试试:

效果出来了:

配置Antd组件库

安装组件库,然后导入样式,然后使用

npm install antd --save

 或者

yarn add antd

在main.ts中导入样式:

然后在组件中使用: 

效果展示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/86787.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react-virtualized可视化区域渲染的使用

介绍 github地址:https://github.com/bvaughn/react-virtualized 实例网址:react-virtualized如果体积太大,可以参考用react-window。 使用 安装: yarn add react-virtualized。在项目入口文件index.js中导入样式文件&#xff…

10. Docker Swarm(一)

目录 1、前言 2、Docker Swarm体系架构 2.1、简单介绍 2.2、体系架构 3、简单使用 3.1、环境准备 3.2、初始化master节点 3.3、建立worker节点 3.4、查看集群的节点信息 3.5、部署应用 3.5.1、创建Dockerfile文件 3.5.2、构建镜像 3.5.3、将镜像上传到Docker仓库 …

宋浩概率论笔记(四)数字特征

本帖更新数字特征,包含期望、方差、相关系数等,要点在于记忆性质中的各种公式,遇到题目时能迅速利用已知条件计算答案。

ArcGIS Pro字段操作代码汇总

属性表是GIS数据的重要组成部分,有了属性表才可以进行分析和分类配色等操作,这里为大家介绍一下ArcGIS Pro中字段操作的相关代码,希望能对你有所帮助。 关键词搜索 打开属性表,点击按属性选择,如下图所示。 点击按属…

【loadbalancer】还在用Ribbon?试试Spring自带的LoadBalancer吧

Spring Cloud LoadBalancer是Spring Cloud官方自己提供的客户端负载均衡器, 用来替代Ribbon。 Spring官方提供了两种客户端都可以使用loadbalancer: RestTemplate:Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程…

Linux使用gdb调试多文件的C程序

【例】通过vi创建两个.c文件main.c和add.c: 一步编译main.c和add.c文件,并加入调试信息: 1. 在被调函数中加断点时,在执行主函数时,会自动进入被调函数 (1)进入gdb,跟踪main程序&am…

Matlab绘制圆形(rectangle函数、viscircles函数和圆的参数方程)

基于matlab绘制圆形 一、rectangle函数 对于绘制圆心坐标为(x,y)半径为r的圆形,函数为: x0; y0; r1; rectangle(Position, [x-r,y-r,2*r,2*r], Curvature, [1 1],EdgeColor, r); axis equalEdgeColor表示颜色 二、…

【Ubuntu】安装docker,docker compose 以及部署一个docker应用

大家好!在过去,已经分享了很多有关通过Docker部署应用的内容。今天,我将为大家详细介绍如何在Ubuntu系统上部署最新的Docker平台。 Docker是什么 Docker是一个开源的容器化平台,它允许您将应用程序及其所有依赖项打包到称为容器…

以http_proxy和ajp_proxy方式整合apache和tomcat(动静分离)

注意:http_proxy和ajp_proxy的稳定性不如mod_jk 一.http_proxy方式 1.下载mod_proxy_html.x86_64 2.在apache下创建http_proxy.conf文件(或者直接写到conf/httpd.conf文件最后) 3.查看server.xml文件 到tomcat的安装目录下的conf/serve…

ThinkPHP成考学员管理平台

有需要请加文章底部Q哦 可远程调试 ThinkPHP成考学员管理平台 一 介绍 成考学员管理平台基于FastAdmin框架开发,数据库mysql,是一款针对学员,教师,专业,课程,成绩,学费等信息管理的系统&#…

大数据Flink(五十八):Flink on Yarn的三种部署方式介绍

文章目录 Flink on Yarn的三种部署方式介绍 一、​​​​​​​Session模式

分享Python技术下AutojsPro7云控代码

引言 有图有真相,那短视频就更是真相了。下面是三大语言的短视频。 Java源码版云控示例: Java源码版云控示例在线视频 Net源码版云控示例: Net源码版云控示例在线视频亚丁号-知识付费平台 支付后可见 扫码付费可见 Python源码版云控示例…

Redis内网主从节点搭建

Redis内网主从节点搭建 1、文件上传2、服务安装3、服务启动4、配置主从复制 1、文件上传 内网环境手动上传gcc-c、redis.tar文件 2、服务安装 # 解压 unzip gcc-c.zip unzip gcc_rpm.zip tar -zxvf redis-6.2.13.tar.gz# 安装 cd gcc_rpm/ rpm -ivh *.rpm --nodeps --force…

【深度学习注意力机制系列】—— ECANet注意力机制(附pytorch实现)

ECANet(Efficient Channel Attention Network)是一种用于图像处理任务的神经网络架构,它在保持高效性的同时,有效地捕捉图像中的通道间关系,从而提升了特征表示的能力。ECANet通过引入通道注意力机制,以及在…

【脚踢数据结构】深入理解栈

(꒪ꇴ꒪ ),Hello我是祐言QAQ我的博客主页:C/C语言,Linux基础,ARM开发板,软件配置等领域博主🌍快上🚘,一起学习,让我们成为一个强大的攻城狮!送给自己和读者的一句鸡汤🤔&…

【BI系统】选型常见问题解答二

本文主要总结BI系统选型过程中遇见的常见问题,并针对性做出回答,希望能为即将选型,或正在选型BI系统的企业用户们提供一个快速了解通道。 有针对金蝶云星空的BI方案吗?能起到怎样的作用? 答:奥威BI系统拥…

小内存嵌入式设备软件的差分升级设计(学习)

摘要 提出一种改进HDiffPatch算法并在复旦微单片机上实现小内存差分升级的方案,即使用单片机内的Flash空间替代算法占用的RAM空间,从而减少算法对单片机RAM空间的需求,以满足小内存微处理器的差分升级,同时对算法内存分配释放函数…

关于pycharm安装出现的interpreter field is empty,无法创建项目存储位置

关于pycharm安装出现的interpreter field is empty(解释器为空) 关于pycharm安装出现的interpreter field is empty,无法创建项目存储的位置。如图: 我之前安装的时候一直老是有这个提示,后来才发现是因为没安装这个p…

干货满满的Python知识,学会这些你也能成为大牛

目录 1. 爬取网站数据 2. 数据清洗与处理 3. 数据可视化 4. 机器学习模型训练 5. 深度学习模型训练 6. 总结 1. 爬取网站数据 在我们的Python中呢,使用爬虫可以轻松地获取网站的数据。可以使用urllib、requests、BeautifulSoup等库进行数据爬取和处理。以下是…