vue3项目+TypeScript前端项目 ———— elemnet-plus,svg图标配置,sass,mock数据

一.集成element-plus

官网地址

  1. 安装

pnpm install element-plus

  1. 引入
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')
  1. 全局配置国际化的配置
    引入组件默认显示的就英文
    在这里插入图片描述
    需要在main.ts改下国际化的配置
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'app.use(ElementPlus, {locale: zhCn,
})

但直接打包pnpm run build打包的时候会报错
在这里插入图片描述
这里加一行注释,忽略类型

//@ts-ignore忽略当前文件ts类型的检测否则有红色提示(打包会失败)
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  1. 使用图标需要安装,然后引入图标才能显示
    pnpm install @element-plus/icons-vue
<template><div><el-button type="danger" :icon="Delete" circle /></div>
</template>
<script setup lang="ts">
import {Delete
} from '@element-plus/icons-vue'
</script>

二.src别名的配置

vite.config.ts

  1. 引入path
  2. 相对路径别名配置,使用 @ 代替 src
// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({plugins: [vue()],resolve: {alias: {"@": path.resolve("./src") // 相对路径别名配置,使用 @ 代替 src}}
})

TypeScript 编译配置
tsconfig.json文件里面的 compilerOptions对象里面

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

三.SVG图标配置

1. 安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

2.在vite.config.ts中配置插件

①在vite.config.ts中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {return {plugins: [createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]',}),],}
}

②入口文件导入

//svg插件需要配置代码
import 'virtual:svg-icons-register'

③svg文件统一放在assets / icons 文件夹下面
在这里插入图片描述

3.去阿里巴巴矢量图库“复制svg”

在这里插入图片描述

4.使用

4-1.第一种使用方法:直接在页面使用

<template><div><!-- 调整大小 --><svg style="width: 100px;height: 100px;"><!-- 修改颜色 --><use xlink:href="#icon-home" fill="red"></use></svg></div>
</template>
<script setup lang="ts">
</script><style scoped lang="scss">
</style>

可以显示
在这里插入图片描述

注意:有时候设置fill颜色改变不了,是因为有些svg 中path下会有fill属性
解决的方法很多:
最简单的就是手动进行 把该fill属性 删除

4-2 第二种使用方法:封装成组件

①在src/components目录下创建一个SvgIcon组件:

<template><!-- svg:图标外层容器节点,内部需要与use标签结合使用 --><svg :style="{ width, height }"><!-- xlink:href执行用哪一个图标,属性值务必#icon-图标名字 --><!-- use标签fill属性可以设置图标的颜色 --><use :xlink:href="prefix + name" :fill="color"></use></svg>
</template><script setup lang="ts">
//接受父组件传递过来的参数
defineProps({//xlink:href属性值前缀prefix: {type: String,default: '#icon-'},//提供使用的图标名字name: String,//接受父组件传递颜色color: {type: String,default: ''},//接受父组件传递过来的图标的宽度width: {type: String,default: '16px'},//接受父组件传递过来的图标的高度height: {type: String,default: '16px'}
})
</script><style scoped></style>

②调用组件:

<template><div><SvgIcon prefix="#icon-home" color="green" width="100px" height="100px"/></div></template>
<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
</script>

也可以显示
在这里插入图片描述

4-3 第三种使用方法:注册全局组件,并安装自定义插件

①在src/components文件夹目录下创建一个index.ts文件:用于注册components文件夹内部全部全局组件!!!

app.component()​
如果同时传递一个组件名字符串及其定义,则注册一个全局组件;如果只传递一个名字,则会返回用该名字注册的组件 (如果存在的话)。

//引入项目中全部的全局组件
import SvgIcon from './SvgIcon/index.vue';
import Pagination from './Pagination/index.vue'
//全局对象
const allGloablComponent: any = { SvgIcon, Pagination};
//对外暴露插件对象
export default {//务必叫做install方法install(app: any) {//注册项目全部的全局组件Object.keys(allGloablComponent).forEach((key: string) => {//注册为全局组件app.component(key, allGloablComponent[key]);})}
}

②在入口文件引入main.ts文件,通过app.use方法安装自定义插件

app.use()​
安装一个插件。

//引入自定义插件对象:注册整个项目全局组件
import gloablComponent from './components/index';
//安装自定义插件
app.use(gloablComponent);

③这样的话,使用的时候,直接用即可,不需要在每个组件单独引入

<template><div><SvgIcon prefix="#icon-home" color="pink" width="100px" height="100px"/><Pagination /></div></template>
<script setup lang="ts">
// import SvgIcon from '@/components/SvgIcon/index.vue'
</script>

也可以显示
在这里插入图片描述

四.集成sass

我们目前在组件内部已经可以使用scss样式,因为在配置styleLint工具的时候,项目当中已经安装过sass sass-loader,因此我们再组件内可以使用scss语法!!!

①需要加上lang="scss"

<style scoped lang="scss"></style>

②添加全局的样式

1)在src/styles目录下创建一个reset.scss,用于清除默认样式

那如何找reset.scss文件呢?

  1. 百度搜索npm,进入npm 官网
  2. 在npm官网搜索reset.scss
  3. 找到code直接拷贝下来就可以了
    在这里插入图片描述

2)在src/styles目录下创建一个index.scss

用于引入上面1)的 模板全局样式,相当于引入这个styles文件夹所有的scss文件,通过这个文件抛出来

@import reset.scss

3)在main.ts文件中引入上面2)index.scss

//引入模板的全局样式
import '@/styles/index.scss'

③引入全局变量$.

但是你会发现在src/styles/index.scss全局样式文件中没有办法使用 变量 . 因此需要给项目中引入全局变量 变量.因此需要给项目中引入全局变量 变量.因此需要给项目中引入全局变量.

1)在style/variable.scss创建一个variable.scss文件!

$color:pink;
$bg:green;

然后再styles/index.scss文件里面引入variable.scss

2)在vite.config.ts文件配置如下:

export default defineConfig((config) => {//scss全局变量配置css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "./src/styles/variable.scss";',},},},
}

@import "./src/styles/variable.less";后面的;不要忘记,不然会报错!

3)组件内直接使用变量

<style lang="scss">
div {h1 {color: $color;background: $bg;}
}
</style>

在这里插入图片描述

五.mock数据

https://www.npmjs.com/package/vite-plugin-mock

1. 安装依赖

pnpm install -D vite-plugin-mock mockjs

2.在 vite.config.js 配置文件启用插件

import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {return {plugins: [vue(),viteMockServe({//只在开发环境运行localEnabled: command === 'serve',}),],}
}

3.mock数据

在根目录创建mock文件夹:去创建我们需要mock数据与接口!!!
在mock文件夹内部创建一个user.ts文件

//createUserList:次函数执行会返回一个数组,数组里面包含两个用户信息
function createUserList() {return [{userId: 1,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'admin',password: '111111',desc: '平台管理员',roles: ['平台管理员'],buttons: ['cuser.detail'],routes: ['home'],token: 'Admin Token',},{userId: 2,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'system',password: '111111',desc: '系统管理员',roles: ['系统管理员'],buttons: ['cuser.detail', 'cuser.user'],routes: ['home'],token: 'System Token',},]
}
//对外暴露一个数组:数组里面包含两个接口
//登录假的接口
//获取用户信息的假的接口
export default [// 用户登录接口{url: '/api/user/login',//请求地址method: 'post',//请求方式response: ({ body }) => {//获取请求体携带过来的用户名与密码const { username, password } = body;//调用获取用户信息函数,用于判断是否有此用户const checkUser = createUserList().find((item) => item.username === username && item.password === password,)//没有用户返回失败信息if (!checkUser) {return { code: 201, data: { message: '账号或者密码不正确' } }}//如果有返回成功信息const { token } = checkUserreturn { code: 200, data: { token } }},},// 获取用户信息{url: '/api/user/info',method: 'get',response: (request) => {//获取请求头携带tokenconst token = request.headers.token;//查看用户信息是否包含有次token用户const checkUser = createUserList().find((item) => item.token === token)//没有返回失败的信息if (!checkUser) {return { code: 201, data: { message: '获取用户信息失败' } }}//如果有返回成功信息return { code: 200, data: { checkUser } }},},
]

4.安装axios

最后通过axios测试接口!!!

pnpm install axios

5.在main.ts里面临时测试下

//测试假接口能否使用
axios({url:'/api/user/login',method:'post',data:{username: 'admin',password: '111111',}
})

是可以拿到数据的
在这里插入图片描述

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

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

相关文章

JAVA基础面试题(第十三篇)线程并发死锁等!

线程死锁并发 1. 线程和进程有什么区别&#xff1f; 线程具有许多传统进程所具有的特征&#xff0c;故又称为轻型进程(Light—Weight Process)或进程元&#xff1b;而把传统的进程称为重型进程(Heavy—Weight Process)&#xff0c;它相当于只有一个线程的任务。在引入了线程的…

JetLinks物联网平台初步使用——TCP接入

基于上一篇&#xff0c;完整的搭建了前后端整个系统&#xff0c;可以在windows 7完美的运行使用。 目录 1、创建网络组件 2、创建协议管理 3、创建网关 ​4、创建产品 ​5、创建设备 6、模拟对接 1、创建网络组件 进入平台后&#xff08;用户名密码都是admin&#xff…

GRPC服务使用

目标&#xff1a; 1.什么是GRPC服务&#xff1f; 2.安卓客户端怎么不熟GRPC服务&#xff1f; 3.怎么生成GRPC的java类&#xff1f; 一、什么是GRPC服务&#xff1f; GRPC 一开始由 google 开发&#xff0c;是一款语言中立、平台中立、开源的远程过程调用(RPC)系统。 支持长…

Android Webview加载pdf文件无法缩放问题

WebView设置开启页面缩放&#xff1a; settings webView.getSettings(); settings.setSupportZoom(true); settings.setJavaScriptEnabled(true); settings.setUseWideViewPort(true); settings.setLoadWithOverviewMode(true); settings.setBuiltInZoomControls(true); sett…

Matlab 2023b学习笔记1——界面认识

下载安装好Matlab后&#xff0c;可以看到如下界面&#xff1a; 可以看到&#xff0c;这时只有命令行窗口。我们在上方工具栏中选择“布局”—— “默认”&#xff0c;即可看到左右两边多出来了“当前文件夹”与“工作区”两栏。 一、当前文件夹界面 这个界面显示的是当前目录下…

常见应用流量特征分析

目录 1.sqlmap 1.常规GET请求 2.通过--os-shell写入shell 3.post请求 2.蚁剑 编码加密后 3.冰蝎 冰蝎_v4.1 冰蝎3.2.1 4.菜刀 5.哥斯拉 1.sqlmap 1.常规GET请求 使用的是sqli-labs的less7 &#xff08;1&#xff09;User-Agent由很明显的sqlmap的标志&#xff0c;展…

二叉数之插入操作

首先是题目 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和要插入树中的值 value &#xff0c;将值插入二叉搜索树。 返回插入后二叉搜索树的根节点。 输入数据 保证 &#xff0c;新值和原始二叉搜索树中的任意节点值都不同。 注意&#xff0c;可能存在多种有效…

佩戴安全头盔监测识别摄像机

佩戴安全头盔是重要的安全措施&#xff0c;尤其在工地、建筑工程和工业生产等领域&#xff0c;安全头盔的佩戴对于工人的生命安全至关重要。为了更好地管理和监控佩戴安全头盔的情况&#xff0c;监测识别摄像机成为了一项重要的工具。监测识别摄像机可以通过智能技术监测并记录…

小程序-滚动触底-页面列表数据无限加载

// index/index.vue <template> <!-- 自定义导航栏 --> <CustomNavbar /> <scroll-view scrolltolower"onScrolltolower" scroll-y class"scroll-view"> <!-- 猜你喜欢 --> <Guess ref"guessRef" /> </s…

vue koa post 请求代理失败问题总结

场景是在使用 koa 写接口时&#xff0c;客户端发送 post 请求&#xff0c;服务端会报下面这个错误&#xff0c;导致接口未能访问成功&#xff1a; 前端接口一直 Pending 状态&#xff0c; 解决方案&#xff1a;走的是本地 mock 数据&#xff0c;未访问服务端的接口 总结&#x…

.NET调用阿里云人脸核身服务端 (ExecuteServerSideVerification)简易流程保姆级教学

需要注意的是&#xff0c;以下内容仅限基础调用 功能说明 该功能是输入核验人的姓名和身份证以及人脸照片&#xff0c;去阿里库里面匹配&#xff0c;3个信息是否一致&#xff0c;一致则验证通过&#xff0c;需要注意的是&#xff0c;人脸有遮挡&#xff0c;或者刘海&#xff0…

「项目」负载均衡在线OJ(ONLINE_JUDGE)系统

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

作家百度百科怎么做出来的 怎么创建作家百科词条才能通过

创建作家百度百科词条需要遵循一定的步骤&#xff0c;并注意一些关键点&#xff0c;以确保词条能够顺利通过审核。以下是伯乐网络传媒pouquan根据经验结果得出的详细指导&#xff1a; 准备工作 注册百度账号&#xff1a;在创建任何百度百科词条之前&#xff0c;您需要先注册一…

Llama模型家族之使用 Supervised Fine-Tuning(SFT)微调预训练Llama 3 语言模型(一) LLaMA-Factory简介

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

docker 指定jdk11镜像执行jar

dockerfile :下载jdk11 并将上传的jar 放入jdk11容器/root&#xff0c;改名为app.jar vi dockerfile 。。。。内容见下图 # 构建jdk11镜像 docker build -t demo . # 也可以通过jdk11镜像&#xff08;前提有jdk11镜像&#xff09;外挂载目录方式运行jar docker run --name d…

AI大模型应用开发实践:4.基于 Chat Completions API 实现外部函数调用

基于 Chat Completions API 实现外部函数调用 2023年6月20日,OpenAI 官方在 Chat Completions API 原有的三种不同角色设定(System, Assistant, User)基础上,新增了 Function Calling 功能。 详见OpenAI Blog functions 是 Chat Completion API 中的可选参数,用于提供…

军工单位如何做到安全跨网文件交换与导出的

在现代信息化战争中&#xff0c;军工单位在信息安全方面的需求尤为突出。跨网文件交换与导出作为军工单位日常运营的重要环节&#xff0c;面临着网络带宽限制、数据安全风险、合规性要求和传输稳定性等挑战。下面&#xff0c;我们将从以下几个方面探讨军工单位如何实现安全、高…

《Effective Objective-C 2.0》读书笔记——协议与分类

目录 第四章&#xff1a;协议与分类第23条&#xff1a;通过委托与数据源协议进行对象间通信第24条&#xff1a;将类的实现代码分散到便于管理的数个分类之中第25条&#xff1a;总是为第三方类的分类名称加前缀第26条&#xff1a;勿在分类中声明属性第27条&#xff1a;使用“cla…

匝间冲击耐压试验仪产品介绍及工作原理

产品简介 武汉凯迪正大KD2684S匝间冲击耐压试验仪适用于电机、变压器、电器线圈等这些由漆包线绕制的产品。因漆包线的绝缘涂敷层本身存在着质量问题&#xff0c;以及在绕线、嵌线、刮线、接头端部整形、绝缘浸漆、装配等工序工艺中不慎而引起绝缘层的损伤等&#xff0c;都会造…

Docker Compose使用

Docker-Compose是什么 docker建议我们每一个容器中只运行一个服务,因为doker容器本身占用资源极少&#xff0c;所以最好是将每个服务单独分割开来&#xff0c;但是这样我们又面临了一个问题&#xff1a; 如果我需要同时部署好多个服务&#xff0c;难道要每个服务单独写Docker…