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

VUE - 实战 2

vue 项目 tailwindcss 安装

安装

命令

npm install -D tailwindcss@3 postcss autoprefixer

现在 版本4.1 和vue集成有问题,所有用3

2 初始化配置文件:

npx tailwindcss init -p

3 修改 tailwind.config.js 配置:

/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

4 建 Tailwind 样式文件

src/styles 目录下创建 tailwind.css 文件:

@tailwind base;
@tailwind components;
@tailwind utilities;

main.js (或 main.ts) 中导入刚才创建的 CSS 文件:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/tailwind.css'  // 引入 TailwindcreateApp(App).mount('#app')

设置HTML的基准值REM和xl,sm,base等的大小

https://tailwindcss.com/docs/font-size 版本4

https://tailwind-v3.nodejs.cn/docs/font-size 版本3

手机端,根据浏览器的宽度,设置字体大小

1 根据 (浏览器可视窗口宽度/10),设置 html 的 fontsize,最大不能过40

export const useREM = () => {const MAX_FONT_SIZE = 40document.addEventListener('DOMContentLoaded', function () {// 拿到html的const html = document.querySelector('html')// 拿到窗口的宽度除以10let fontsize = windowWidth.value / 10fontsize = fontsize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontsize// 设置html的字体大小html.style.fontSize = fontsize + 'px'})}

2 导入main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import '@/styles/index.scss'
import { useREM } from '@/utils/flexble.js'
import router from '@/routers/index.js'const app = createApp(App)
app.use(createPinia())
app.use(router)
useREM()app.mount('#app')

3 tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {fontSize: {xs: ['0.375rem', '0.5rem'],sm: ['0.5rem', '0.625rem'],base: ['0.625rem', '0.75rem'],lg: ['0.75rem', '0.875rem'],xl: ['0.875rem', '1.125rem'],},},},plugins: [],
}

设置自定义的样式

例如:shadow-white-l

/** @type {import('tailwindcss').Config} */
export default {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {fontSize: {xs: ['0.375rem', '0.5rem'],sm: ['0.5rem', '0.625rem'],base: ['0.625rem', '0.75rem'],lg: ['0.75rem', '0.875rem'],xl: ['0.875rem', '1.125rem'],},},boxShadow: {'white-l': '-10px 0 10px white',},},plugins: [],
}

vite 设置

resolve.alias 软连接 - 路径别名

  • 类型:Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>

将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象,或一个 { find, replacement, customResolver } 的数组。

当使用文件系统路径的别名时,请始终使用绝对路径。相对路径的别名值会原封不动地被使用,因此无法被正常解析。

更高级的自定义解析方法可以通过 插件 实现。

https://cn.vitejs.dev/config/shared-options.html#resolve-alias

import { fileURLToPath, URL } from 'node:url'
// import { join } from 'node:path'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/
export default defineConfig({plugins: [vue(), vueDevTools()],resolve: {alias: {// '@': join(__dirname, 'src'),'@': fileURLToPath(new URL('./src', import.meta.url)),},},
})

跨域问题 server.proxy

https://cn.vitejs.dev/config/server-options.html#server-proxy

import { fileURLToPath, URL } from 'node:url'
// import { join } from 'node:path'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/
export default defineConfig({plugins: [vue(), vueDevTools()],resolve: {alias: {// '@': join(__dirname, 'src'),'@': fileURLToPath(new URL('./src', import.meta.url)),},},//代理配置server: {proxy: {// 代理所有 /api 的请求'/api': {//代理请求后的地址target: 'https://xxxxxxxxxxx/',//跨域changeOrigin: true,},},},
})

区分开发和生产环境

在 vite 中提供了 .env 文件,该文件为环境变量文件,默认提供了四种文件格式:

.env # 所有情况下都会加载.env.local # 所有情况下都会加载,但会被 git 忽略.env.[mode] # 只在指定模式下加载.env.[mode].local # 只在指定模式下加载,但会被 git 忽略

其中有一种 .env.[mode] 的格式可以在不同模式下加载不同内容,这不正是我们想要的吗?

默认只有 VITE_ 为前缀的变量才会被 vite 处理

//文件 .env.development

# 开发环境
VITE_BASE_API='/api'

//文件 .env.production

# 生产环境
VITE_BASE_API='/prod-api'

request.js

import axios from 'axios'//console.log(import.meta.env.VITE_BASE_API)// 创建axios实例
const service = axios.create({timeout: 10000, // 请求超时时间baseURL: import.meta.env.VITE_BASE_API
})

处理SVG图标

image

1 安装vite-plugin-svg-icons插件

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

2 配置 vite

import { fileURLToPath, URL } from 'node:url'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
// import { join } from 'node:path'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),createSvgIconsPlugin({// 指定需要缓存的图标文件夹// iconDirs: [path.resolve(fileURLToPath(new URL('./src/assets/icons', import.meta.url)))],iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// 指定symbolId格式symbolId: 'icon-[dir]-[name]',}),],resolve: {alias: {// '@': join(__dirname, 'src'),'@': fileURLToPath(new URL('./src', import.meta.url)),},},//代理配置server: {proxy: {// 代理所有 /api 的请求'/api': {//代理请求后的地址target: 'https://XXXXXXXXXXXXXX/',//跨域changeOrigin: true,},},},
})

3 创建svg组件

src\libs\svg-icons\index.vue

<template><svgclass="svg-icon"aria-hidden="true":width="size":height="size"><use :xlink:href="`#icon-${name}`" :fill="color" :class="fillClass"></use></svg>
</template><script setup>
import { defineProps } from 'vue'defineProps({// 图标名称(对应svg的id)name: {type: String,required: true},// 图标大小size: {type: [Number, String],default: 24},//svg 图标颜色color:{type: String,},//tailwind 填充类fillClass:{type: String,},
})
</script><style scoped>
</style>

4 导出插件

src\libs\index.js

import SvgIcon from './svg-icons/index.vue'export default{//当你在 Vue 应用中使用 app.use(插件) 时,Vue 会自动调用这个 install 方法install(app) {app.component('svg-icon', SvgIcon) //这行代码将 SvgIcon 组件注册为全局组件,组件的标签名为 svg-icon}
}

https://cn.vuejs.org/guide/reusability/plugins

一个插件可以是一个拥有 install() 方法的对象,也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数:

const myPlugin = {install(app, options) {// 配置此应用}
}

插件没有严格定义的使用范围,但是插件发挥作用的常见场景主要包括以下几种:

  1. 通过 app.component()app.directive() 注册一到多个全局组件或自定义指令。
  2. 通过 app.provide() 使一个资源可被注入进整个应用。
  3. app.config.globalProperties 中添加一些全局实例属性或方法
  4. 一个可能上述三种都包含了的功能库 (例如 vue-router)。

5 导入 mian.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import '@/styles/index.scss'
import { useREM } from '@/utils/flexble.js'
import router from '@/routers/index.js'
import 'virtual:svg-icons-register' // 引入SVG注册脚本
import libs from '@/libs'const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(libs)
useREM()app.mount('#app')

6 可以使用了

<svg-icon class="w-1.5 h-1.5" name="hamburger" size="24" />
http://www.hskmm.com/?act=detail&tid=23137

相关文章:

  • QBXT2025S刷题 Day1
  • 2025多校冲刺CSP模拟赛1(螳臂复活祭)
  • mobvista三月之旅(In Peking)
  • 大学生HTML期末大作业——HTML+CSS+JavaScript购物商城(草莓) - 指南
  • P6782 [Ynoi2008] rplexq
  • AT_agc040_b [AGC040B] Two Contests
  • AT_arc084_b [ABC077D] Small Multiple 题目分析
  • 287. 寻找重复数
  • 福州市 2025 国庆集训 Day2 前三题题解
  • 2025 年马赛克厂家 TOP 企业品牌推荐排行榜,陶瓷,游泳池,喷墨,冰裂,拼花,防滑,复古,家装马赛克推荐这十家公司!
  • oppoR9m刷Linux系统: 手动备份系统与基带IMEI/NVRAM/QCN
  • 原来你是这样的claude code aciton:没想象中好
  • 实用指南:【Python】正则表达式
  • FlareOn1 -- 5get_it
  • 2025 年阀门厂家 TOP 企业品牌推荐排行榜,管道阀门,气动,调节,电动执行器,生产,电磁,不锈钢,进口,耐高温阀门推荐这十家公司
  • 深入解析:Ceph 分布式存储学习笔记(二):池管理、认证和授权管理与集群配置(下)
  • tcp与udp 协议 - 摘星
  • 赛前训练4 extra 字典树
  • CF1450E Capitalism
  • 二分图最大匹配 匈牙利算法
  • 2025 年脱硫剂厂家 TOP 企业品牌推荐排行榜,氧化铁,羟基氧化铁,常温氧化铁,沼气,天然气,煤气,煤层气,液化气,二氧化碳,氨气脱硫剂公司推荐
  • 2025 年砝码厂家 TOP 企业品牌推荐排行榜,不锈钢,标准,校准,天平,无磁,锁型,蓬莱,铸铁,定制,单双钩砝码公司推荐!
  • Java 在Word 文档中添加批注:高效文档协作的利器 - 指南
  • 2025雨棚生产厂家 TOP 企业品牌推荐排行榜,西安,陕西,西北推拉雨棚,推拉,移动,活动,户外,电动伸缩雨棚推荐这十家公司!
  • 关于整除分块
  • 2025 年木工机械设备厂家 TOP 企业品牌推荐排行榜,深度剖析木工机械设备推荐这十家公司!
  • Python语言自动玩游戏的消消乐游戏程序代码3QZQ
  • Python语言自动玩游戏的数字拼图游戏程序代码ZXQMQZQ
  • 如何找出集合的两个子集使得和相等?
  • Python语言自动玩游戏的俄罗斯方块游戏程序代码QZQ