当前位置: 首页 > news >正文

vue3后台管理框架之基础配置

配置vite.config.js
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig(({ command, mode }) => {//const env = loadEnv(mode, process.cwd(), '') //获取环境变量return {// 打包devbase: './',// 开发环境server: {port: 5002,host: true, //'0.0.0.0'open: false,strictPort: true},//预览环境preview: {port: 5002,host: true, //'0.0.0.0'},plugins: [vue()]}})

配置别名

安装依赖

pnpm i path@0.12.7 @types/node@17.0.35 -D

path为node的路径模块 , @types/node为node的typescript 提示,如:__dirname

import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')
export default ({mode})=>{return{resolve: {alias: {'@/': `${pathSrc}/`,}}}
}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')
export default defineConfig(({ command, mode }) => {//const env = loadEnv(mode, process.cwd(), '') //获取环境变量return {base: './',server: {port: 5002,host: true, //'0.0.0.0'open: false,strictPort: true},//预览preview: {port: 5002,host: true, //'0.0.0.0'},resolve: {alias: {'@/': `${pathSrc}/`,}},plugins: [vue()]}
})

tsconfig.json

// tsconfig.json{"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录"paths": { //路径映射,相对于baseUrl"@/*": ["src/*"] }}}

配置部分文件

新建编辑器配置文件 .editorconfig

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

editorconfig 能规范我们编辑器的配置,如:utf-8,indent_size = 2 table缩进两个字符

pnpm i @vue/cli-service@5.0.8

安装了@vue/cli-service,在webstrom或idea中能帮我们识别"@"等,我们配置的符号,方便我们开发

新建 .npmrc

registry = https://registry.npmmirror.com

国内如果访问npm慢,可以使用,阿里源地址

多环境配置

在根目录新建配置文件 .env.serve-dev

#定义的配置文件必须要以VITE_开头
VITE_APP_ENV = 'dev'
VITE_APP_BASE_URL = 'https://github.jzfai.top/micro-service-api'
#image or oss address
VITE_APP_IMAGE_URL = 'https://github.jzfai.top/gofast-image'#VIT_APP_IMAGE_URL 打印的变量中读取不到
VIT_APP_IMAGE_URL = 'VIT_APP_IMAGE_URL'

设置配置文件到启动环境中

"scripts": {"dev": "vite --mode serve-dev"},

--mode 指定配置文件

环境配置中需要注意的两点:

1 在package.json的script中, 用 --model 进行指定.env变量文件

2.定义的配置文件必须要以VITE_开头,不然不会被vite中的文件变量收集

相关文章:

vue3后台管理框架之基础配置

配置vite.config.js import { defineConfig } from viteimport vue from vitejs/plugin-vueexport default defineConfig(({ command, mode }) > {//const env loadEnv(mode, process.cwd(), ) //获取环境变量return {// 打包devbase: ./,// 开发环境server: {port: 5002,…...

Easysearch压缩模式深度比较:ZSTD+source_reuse的优势分析

引言 在使用 Easysearch 时,如何在存储和查询性能之间找到平衡是一个常见的挑战。Easysearch 具备多种压缩模式,各有千秋。本文将重点探讨一种特别的压缩模式:zstd source_reuse,我们最近重新优化了 source_reuse,使得它在吞吐量…...

扩散模型的系统性学习(一):DDPM的学习

文章目录 一、学习的资料1.1 对于扩散模型的发展过程的综述1.2对论文中涉及的公式以及公式对应的代码的解读1.3github中对于各模型实现的代码1.4相关基础知识的学习 二、DDPM的学习2.1 DDPM总体知识的梳理2.2相关代码的解读2.2.1unet 代码块2.2.2高斯扩散代码块2.2.3 实验流程代…...

注意力屏蔽(Attention Masking)在Transformer中的作用 【gpt学习记录】

填充遮挡(Padding Masking): 未来遮挡(Future Masking):...

MyBatisPlus详解

前言: 📕作者简介:热爱编程的小七,致力于C、Java、Python等多编程语言,热爱编程和长板的运动少年! 📘相关专栏Java基础语法,JavaEE初阶,数据库,数据结构和算法系列等,大家有兴趣的可以看一看。 😇😇😇有兴趣的话关注博主一起学习,一起进步吧! 一、MyBatis…...

组合数的计算

C: 即从a个元素中选取b个元素的组合数。 LL C(int a, int b) {LL res 1;for (int i a, j 1; j < b; i --, j )res res * i / j;return res; } A: 表示从a个元素中选取b个元素进行排列的情况数。 LL P(int a, int b) {LL res 1;for (int i a; i > a - b; i--){res…...

linux之shell记录

shell属于一种很容易学习的程序设计语言&#xff0c;依赖于功能强大的命令可以编写提高开发效率的脚本。这里记录一下常用的shell相关的知识点。 持续更新中。。。 1、在linux或mac中查看使用的shell echo $SHELL /bin/bashshell是一种脚本语言&#xff0c;就会有解释器来执行…...

外卖大数据案例

一、环境要求 HadoopHiveSparkHBase 开发环境。 二、数据描述 meituan_waimai_meishi.csv 是某外卖平台的部分外卖 SPU&#xff08;Standard Product Unit &#xff0c; 标准产品单元&#xff09;数据&#xff0c;包含了外卖平台某地区一时间的外卖信息。具体字段说明如下&am…...

到底什么是5G-R?

近日&#xff0c;工信部向中国国家铁路集团有限公司&#xff08;以下简称“国铁集团”&#xff09;批复5G-R试验频率的消息&#xff0c;引起了行业内的广泛关注。 究竟什么是5G-R&#xff1f;为什么工信部会在此时批复5G-R的试验频率&#xff1f; 今天&#xff0c;小枣君就通过…...

uniapp 使用和引入 thorui

1. npm install thorui-uni 2. "easycom": { "autoscan": true, "custom": { "tui-(.*)": "thorui-uni/lib/thorui/tui-$1/tui-$1.vue" } }, 3....

vue3中ref和reactive的区别

原文地址 深入聊一聊vue3中的reactive()_vue3 reactive_忧郁的蛋~的博客-CSDN博客 ref和reactive的区别-CSDN博客 理解&#xff1a; 1.ref是定义简单类型 和单一的对象 2.reactive 定义复杂的类型 梳理文档&#xff1a; ref和reactive都是Vue.js 3.x版本中新增的响应式API&…...

文件路径操作

避开-转义字符 python文件路径导致的错误常常与“\”有关&#xff0c;因为在路径中的“\”常会被误认为转义字符。 所以在上述路径中&#xff0c;\table\name\rain中的\t,\n,\r都易被识别为转义字符。 解决的办法主要由以下三种&#xff1a; #1 前面加r表示不转义 pathr&quo…...

Java Cache 缓存方案详解及代码-Ehcache

一、Spring缓存概念 Spring从3.1开始定义了 org.springframework.cache.Cache 和 org.springframework.cache.CacheManager 接口来统一不同的缓存技术&#xff1b; 并支持使用 JCache&#xff08;JSR-107&#xff09; 注解简化我们开发。 常用的缓存实现有 RedisCache 、EhCach…...

JAVA设计模式-装饰者模式

一.概念 装饰器模式(Decorator Pattern)&#xff0c;动态地给一个对象添加一些额外的职责&#xff0c;就增加功能来说&#xff0c;装饰器模式比生成子类更灵活。 —-《大话设计模式》 允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其结构。这种类型的设计模式属…...

STM32F1简介

前言 本次学习使用的是STM32F1系列的芯片&#xff0c;72MHz的Cortex-M3内核&#xff1b; 名词解释 STM32是ST公司基于ARM Cortex-M内核开发的32位微控制器&#xff08;MCU&#xff09;&#xff1b; ARM Cortex-M内核是ARM公司设计的&#xff0c;程序指令的执行&#xff0c;…...

SpringBoot面试题6:Spring Boot 2.X 有什么新特性?与 1.X 有什么区别?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:Spring Boot 2.X 有什么新特性?与 1.X 有什么区别? Spring Boot是一种用于简化Spring应用程序开发的框架,它提供了自动配置、起步依赖和快速开…...

qt笔记之qml下拉标签组合框增加发送按钮发送标签内容

qt笔记之qml下拉标签组合框增加发送按钮发送标签内容 code review! 文章目录 qt笔记之qml下拉标签组合框增加发送按钮发送标签内容1.运行2.文件结构3.main.qml4.main.cc5.MyClass.h6.MyClass.cc7.CMakeLists.txt8.ComboBox.pro9.qml.qrc 1.运行 2.文件结构 3.main.qml 代码 …...

linux上构建任意版本的rocketmq多架构x86 arm镜像——筑梦之路

现状 目前市面上和官方均只有rocketmq x86架构下的docker镜像&#xff0c;而随着国产化和信创适配的需求越来越多&#xff0c;显然现有的x86架构下的docker镜像不能满足多样化的需求&#xff0c;因此我们需要根据官方发布的版本制作满足需求的多架构镜像&#xff0c;以在不同cp…...

Java8 新特性之Stream(五)-- Stream的3种创建方法

目录 1. 集合 创建Stream流 拓展: 2. 数组 创建Stream流 3. 静态方法 创建Stream流 1. 集合 创建Stream流 @...

Vue实现模糊查询搜索功能

第一步 先创建一个val变量 // 用户搜索内容 let val ref(""); 第二步&#xff1a;给input绑定v-model &#xff08;为了获取input框的值&#xff09; <input v-model"val" type"text" placeholder"请输入行业/公司/名称"/> 第…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...