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图标
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) {// 配置此应用} }插件没有严格定义的使用范围，但是插件发挥作用的常见场景主要包括以下几种：
- 通过
app.component()和app.directive()注册一到多个全局组件或自定义指令。- 通过
app.provide()使一个资源可被注入进整个应用。- 向
app.config.globalProperties中添加一些全局实例属性或方法- 一个可能上述三种都包含了的功能库 (例如 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" />
