使用vue3+ts+vite从零开始搭建bolg(二)

二、全局变量

2.1element-ui集成

pnpm i element-plus
pnpm i element-plus @element-plus/icons-vue

main.ts配置文件

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//@ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'app.use(ElementPlus, {locale: zhCn,
})

2.2src别名配置

vite.config.ts文档中配置

import path from 'path'export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve('./src'),},},
})

tsconfig.ts配置

 "compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", "DOM.Iterable"],"skipLibCheck": true,"baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录"paths": {//路径映射,相对于baseUrl"@/*": ["src/*"]},

2.3项目环境变量配置

.env.development文件

# 变量必须以VITE_为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = 'ts_blog'
VITE_APP_BASE_API = '/api'
VITE_SERVE = '服务器地址'

.env.production文件

NODE_ENV = 'production'
VITE_APP_TITLE = 'ts_blog'
VITE_APP_BASE_API = '/api'
VITE_SERVE = '服务器地址'

.env.test文件

NODE_ENV = 'test'
VITE_APP_TITLE = 'ts_blog'
VITE_APP_BASE_API = '/api'

package.json中的scripts配置项

"build:test": "vue-tsc && vite build --mode test",
"build:pro": "vue-tsc && vite build --mode production"

2.4svg图标配置

svg:用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看

pnpm i vite-plugin-svg-icons -D

vite.config.ts配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'plugins: [vue(),createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[dir]-[name]',}),],

新建component文件夹在src下,建立如图文件

SvgIcon的index.vue文件

<template><svg :style="{ width, height }"><use :xlink:href="prefix + name" :fill="color"></use></svg>
</template><script lang="ts" setup>
defineProps({prefix: {type: String,default: '#icon-',},name: String,color: {type: String,default: 'black',},width: {type: String,default: '16px',},height: {type: String,default: '16px',},
})
</script><style scoped></style>

main.ts

//svg
import 'virtual:svg-icons-register'
import globalComponent from '@/components'app.use(globalComponent)

component中的index.ts,注册全局组件

import SvgIcon from './SvgIcon/index.vue'const allglobalComponent: any = { SvgIcon }export default {install(app: any) {Object.keys(allglobalComponent).forEach((key) => {app.component(key, allglobalComponent[key])})},
}

2.5集成sass

在src下建立styles文件夹,和如图文件

reset.scss

/*** ENGINE* v0.2 | 20150615* License: none (public domain)*/*,
*:after,
*:before {box-sizing: border-box;outline: none;
}html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {font: inherit;font-size: 100%;margin: 0;padding: 0;vertical-align: baseline;border: 0;
}article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {display: block;
}body {line-height: 1;
}ol,
ul {list-style: none;
}blockquote,
q {quotes: none;&:before,&:after {content: '';content: none;}
}sub,
sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;
}
sup {top: -0.5em;
}
sub {bottom: -0.25em;
}table {border-spacing: 0;border-collapse: collapse;
}input,
textarea,
button {font-family: inhert;font-size: inherit;color: inherit;
}select {text-indent: 0.01px;text-overflow: '';border: 0;border-radius: 0;-webkit-appearance: none;-moz-appearance: none;
}
select::-ms-expand {display: none;
}code,
pre {font-family: monospace, monospace;font-size: 1em;
}

index.scss

@import './reset.scss';

vite.config.ts

css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "./src/styles/variable.scss";',},},},

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

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

相关文章

浅说深度优先搜索(中)——回溯

写在最前 相信在你们不懈的努力之下&#xff0c;基本的递归一定可以写出来了&#xff0c;那么我们现在就来看看递归的升级版——回溯怎么写吧&#xff01; 简说回溯 递归是一种特别重要的解题策略。大部分题目需要找到最优解&#xff0c;而这个求解过程可能存在一定的规律性…

UE5(基础动作)多人游戏制作蹲伏

1.创建输入操作&#xff0c;IA_Crouch 在输入映射中添加 IA_Crouch,在触发器中创建两个索引&#xff0c;已按下已松开来创建蹲伏输入。 蹲伏操作必须要勾选角色-角色移动-crouch勾选可蹲伏否则你的人物无法真正蹲下。 为蹲伏创建函数&#xff0c;创建布尔来判断是否蹲伏。 通过…

CodeGemma初探

什么是 CodeGemma CodeGemma是一系列强大而轻量级的模型的集合&#xff0c;可以执行各种编码任务&#xff0c;包括填充中间代码补全、代码生成、自然语言理解、数学推理和指令跟随。 版本&#xff1a; instruct&#xff1a;7B, 这个版本专门针对自然语言到代码聊天和指令跟随…

day83 AJAX

1什么是AJAX AJAX语法 AJAX Asynchronous JavaScript and XML 异步js和XML 实现页面某一部份更新&#xff0c;无需服务器转发或重定向 1 $.ajax() 语法: $.ajax( { "url" : "url&qu…

数据库主从复制

一、主从复制概述 1、介绍&#xff1a; 主从复制是指将主数据库的 DDL 和 DML 操作写入到二进制日志中&#xff0c;将二进制日志传送到从库服务器&#xff0c;然后在从库上对这些日志重新执行&#xff08;重做&#xff09;&#xff0c;从而使得从库和主库的数据保持同步。 M…

百面算法工程师 | 分类网络总结

欢迎大家订阅我的专栏一起学习共同进步&#xff0c;主要针对25届应届毕业生 祝大家早日拿到offer&#xff01; lets go http://t.csdnimg.cn/dfcH3 目录 4. 经典分类网络与发展 4.1 AlexNet 4.2 VGGNet 4.3 GoogLeNet Inception 4.4 ResNet 4.5 DenseNet 4.6 MobileN…

C#中的浅拷贝(Shallow Copy)和深拷贝(Deep Copy),深拷贝的集中实现方式,浅拷贝深拷贝的案例

C#中的浅拷贝&#xff08;Shallow Copy&#xff09;和深拷贝&#xff08;Deep Copy&#xff09; 拷贝就是创建一个对象&#xff0c;这个对象有着原始对象数据&#xff08;属性和字段&#xff09;的一份精确拷贝&#xff08;只针对Object和Array这样的引用数据类型&#xff09;…

截断堆积柱状图

本教程原文链接&#xff1a;截断堆积柱状图绘制教程 欢迎大家转载&#xff01;&#xff01;&#xff01;&#xff01; 本期教程 写在前面 堆积柱状图是柱状图的常见类型之一&#xff0c;也是平时使用概率较高的图形之一。我们前期发布了很多个柱状图的绘制教程&#xff0c;若你…

【工厂模式】简单工厂模式-简单例子

目录 一、简单介绍 二、未使用工厂模式之前 三、简单工厂模式 初始 优化 总结 一、简单介绍 工厂模式是一种软件设计模式&#xff0c;用于创建对象的方法。在工厂模式中&#xff0c;创建对象的逻辑被封装在一个单独的类中&#xff0c;该类负责根据特定条件或参数创建合适…

windows下使用命令uvicorn启动fastapi程序有乱码,方框形状奇怪字符

问题简述 执行命令uvicorn main:app --reload后出现的问题如图所示 这个问题非常容易解决&#xff01; 原因是windows控制台 默认未开启 ANSI颜色的支持 那么我们只需要开启就可以了 轻松解决 1 按下winR 打开运行 2 输入regedit 点击确定编辑注册表 3 新建值 值的名称为…

vue3组件封装系列-表单请求

我们在开发一些后台管理系统时&#xff0c;总是会写很多的列表查询页面&#xff0c;如果不封装组件&#xff0c;就会无限的复制粘贴&#xff0c;而且页面很冗余&#xff0c;正常情况下&#xff0c;我们都是要把组件进行二次封装&#xff0c;来达到我们想要效果。这里我分享一下…

《中学科技》是什么级别的刊物?如何投稿?

《中学科技》是什么级别的刊物&#xff1f;如何投稿&#xff1f; 《中学科技》创刊于1976年&#xff0c;由上海世纪出版&#xff08;集团&#xff09;有限公司主管&#xff0c;上海科技教育出版社有限公司主办的省级学术期刊&#xff0c;《中学科技》以传播科技知识、启迪智慧…

Centos安装软件失败There are no enabled repos.

这个错出现的原因可能是&#xff1a;没有先安装wget源&#xff0c;就把源给备份了 解决方案&#xff1a; 下载对应版本repo文件, 放入/etc/yum.repos.d/里&#xff0c;下载地址&#xff1a;CentOS镜像使用帮助 查看自己CentOS的版本&#xff0c;下载对应的repo文件&#xff…

spring boot中的标注@Component、@Service等

让我告诉你什么叫水货。 一、水货横行 一直以来&#xff0c;我对Spring Boot项目中的标注&#xff0c;像Component啦、Service啦、Configuration啦&#xff0c;甚至Autowired啦&#xff0c;等等&#xff0c;都似懂非懂。Autowired与Resource有什么区别也不清楚。 个中原因&a…

LearnOpenGL(三)之GLSL

一、GLSL 着色器是使用一种叫GLSL的类C语言写成的。 着色器的开头总是要声明版本&#xff0c;接着是输入和输出变量、uniform 和main函数。每个着色器的入口点都是main函数&#xff0c;在这个函数中 我们处理所有的输入变量&#xff0c;并将结果输出到输出变量中。 二、数据…

2-Embedding例子:简单NN网络、迁移学习例子(glove语料预训练)

一、简单例子&#xff1a;构造简单NN网络生成Embedding 1、pytorch例子 2、tensorflow例子 # 1导入模块 import tensorflow as tf from tensorflow.keras.models import Sequential from tensorflow.keras.layers import Embedding import numpy as np# 2构建语料库 corpus[[…

Linux命令接着学习

which命令&#xff0c;找到各种命令程序所处在的位置 语法&#xff1a;which查找的命令 那么对于我们想查找其他类型文件所在的位置&#xff0c;我们可以用到find命令 find命令 选项为-name&#xff0c;表示按照文件名进行查找 find命令中通配符 find命令和前面rm命令一样&…

MT3023 歌词中找单词

1.暴力 10/12 #include <bits/stdc.h> using namespace std; int n; string a[10005]; int main() {cin >> n;for (int i 0; i < n; i)cin >> a[i];string ll;cin >> ll;for (int i 0; i < n; i){string u a[i];int num 0;int j 0;for (in…

解线性方程组——追赶法解三对角方程组 | 北太天元

一、问题描述 对于线性方程组 A x b , A ( b 1 c 1 a 2 b 2 c 2 ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ a n − 1 b n − 1 c n − 1 a n b n ) , b ( f 1 f 2 ⋮ f n ) Axb,\quad A\begin{pmatrix}b_1&c_1&&&&\\a_2&b_2&c_2&&&\\&\ddots&\d…

CentOS 7安装、卸载MySQL数据库(一)

说明&#xff1a;本文介绍如何在CentOS 7操作系统下使用yum方式安装MySQL数据库&#xff0c;及卸载&#xff1b; 安装 Step1&#xff1a;卸载mariadb 敲下面的命令&#xff0c;查看系统mariadb软件包 rpm -qa|grep mariadb跳出mariadb软件包信息后&#xff0c;敲下面的命令…