mirror of
https://github.com/xiangshu233/vue3-vant4-mobile.git
synced 2025-04-06 03:57:47 +08:00
refactor: ♻️ 移除 windicss 改用 unocss
This commit is contained in:
xiangshu233
parent
031c7b20e5
commit
ad77095e72
@ -2,7 +2,7 @@ import type { PluginOption } from 'vite';
|
||||
import Components from 'unplugin-vue-components/vite';
|
||||
import { VantResolver } from 'unplugin-vue-components/resolvers';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import WindiCSS from 'vite-plugin-windicss';
|
||||
import UnoCSS from 'unocss/vite';
|
||||
|
||||
import { configHtmlPlugin } from './html';
|
||||
import { configMockPlugin } from './mock';
|
||||
@ -36,7 +36,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock:
|
||||
];
|
||||
|
||||
// vite-plugin-windicss
|
||||
vitePlugins.push(WindiCSS());
|
||||
vitePlugins.push(UnoCSS());
|
||||
|
||||
// 加载 html 插件 vite-plugin-html
|
||||
vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
|
||||
|
||||
@ -55,6 +55,8 @@
|
||||
"@typescript-eslint/parser": "^6.16.0",
|
||||
"@vitejs/plugin-vue": "^5.0.0",
|
||||
"@vue/eslint-config-typescript": "^12.0.0",
|
||||
"@unocss/transformer-directives": "^0.58.4",
|
||||
"@unocss/transformer-variant-group": "^0.58.4",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"cross-env": "^7.0.3",
|
||||
"cz-git": "^1.8.0",
|
||||
@ -86,6 +88,7 @@
|
||||
"stylelint-config-standard": "^27.0.0",
|
||||
"stylelint-order": "^5.0.0",
|
||||
"typescript": "^5.3.3",
|
||||
"unocss": "^0.58.5",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^5.0.10",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
|
||||
794
pnpm-lock.yaml
generated
794
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -16,9 +16,8 @@
|
||||
<component v-else :is="Component" :key="route.fullPath" />
|
||||
</template>
|
||||
</routerView>
|
||||
<van-tabbar route class="tabbar">
|
||||
<van-tabbar route fixed placeholder>
|
||||
<van-tabbar-item
|
||||
fixed
|
||||
replace
|
||||
v-for="menu in getMenus"
|
||||
:key="menu.name"
|
||||
@ -52,9 +51,4 @@
|
||||
const getShowHeader = computed(() => !currentRoute.meta.hiddenHeader);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tabbar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less"></style>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import 'virtual:windi.css';
|
||||
import 'virtual:uno.css';
|
||||
import 'vant/es/toast/style';
|
||||
import 'vant/es/dialog/style';
|
||||
// Register icon sprite
|
||||
|
||||
@ -14,9 +14,9 @@
|
||||
<span
|
||||
h="70px"
|
||||
w="70px"
|
||||
items-center
|
||||
border="2 rounded-md border-white"
|
||||
flex="~"
|
||||
align="items-center"
|
||||
justify="center"
|
||||
v-for="(item, index) in designStore.appThemeList"
|
||||
:key="index"
|
||||
|
||||
64
uno.config.ts
Normal file
64
uno.config.ts
Normal file
@ -0,0 +1,64 @@
|
||||
// uno.config.ts
|
||||
import {
|
||||
defineConfig,
|
||||
presetAttributify,
|
||||
presetIcons,
|
||||
presetTypography,
|
||||
presetUno,
|
||||
presetWebFonts,
|
||||
} from 'unocss';
|
||||
|
||||
import transformerVariantGroup from '@unocss/transformer-variant-group';
|
||||
import transformerDirectives from '@unocss/transformer-directives';
|
||||
|
||||
export default defineConfig({
|
||||
// ...UnoCSS options
|
||||
presets: [
|
||||
// 此预设尝试提供流行的实用程序优先框架的通用超集，包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等
|
||||
presetUno(),
|
||||
|
||||
// 图标预设: https://unocss.dev/presets/icons
|
||||
presetIcons({
|
||||
extraProperties: {
|
||||
display: 'inline-block',
|
||||
'vertical-align': 'middle',
|
||||
// ...
|
||||
},
|
||||
}),
|
||||
|
||||
// 属性模式(在 class 属性过多的情况下优先使用属性模式，否则将会变得难以维护)
|
||||
// https://unocss.dev/presets/attributify#attributify-mode
|
||||
presetAttributify(),
|
||||
|
||||
// https://unocss.dev/presets/typography#usage
|
||||
presetTypography(),
|
||||
|
||||
// 网络字体预设：https://unocss.dev/presets/web-fonts
|
||||
presetWebFonts({
|
||||
// 默认字体提供商 https://unocss.dev/presets/web-fonts#providers
|
||||
provider: 'google',
|
||||
// https://unocss.dev/presets/web-fonts#example
|
||||
fonts: {
|
||||
mono: ['Fira Code'],
|
||||
},
|
||||
}),
|
||||
],
|
||||
transformers: [
|
||||
// 启用 Windi CSS for UnoCSS 的变体组功能(就是简写，具体看链接): https://unocss.dev/transformers/variant-group#usage
|
||||
transformerVariantGroup(),
|
||||
// 在样式类里你也可以写原子化 css 具体看链接: https://unocss.dev/transformers/directives#usage
|
||||
// Unknown at rule @apply: https://github.com/unocss/unocss/issues/2401
|
||||
transformerDirectives(),
|
||||
],
|
||||
|
||||
// 一些实用的自定义组合
|
||||
shortcuts: {
|
||||
'm-0-auto': 'm-0 ma', // margin: 0 auto
|
||||
'wh-full': 'w-full h-full', // width: 100%, height: 100%
|
||||
'flex-center': 'flex justify-center items-center', // flex布局居中
|
||||
'flex-x-center': 'flex justify-center', // flex布局：主轴居中
|
||||
'flex-y-center': 'flex items-center', // flex布局：交叉轴居中
|
||||
'text-overflow': 'overflow-hidden whitespace-nowrap text-ellipsis', // 文本溢出显示省略号
|
||||
'text-break': 'whitespace-normal break-all break-words', // 文本溢出换行
|
||||
},
|
||||
});
|
||||
@ -1,78 +0,0 @@
|
||||
import { defineConfig } from 'vite-plugin-windicss';
|
||||
|
||||
export default defineConfig({
|
||||
darkMode: 'class',
|
||||
attributify: true,
|
||||
plugins: [createEnterPlugin()],
|
||||
theme: {
|
||||
extend: {
|
||||
textColor: {
|
||||
darkBlue: '#243658',
|
||||
garyWhite: '#f5f5f5',
|
||||
},
|
||||
zIndex: {
|
||||
'-1': '-1',
|
||||
},
|
||||
colors: {
|
||||
primary: '#5d9dfe',
|
||||
},
|
||||
screens: {
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px',
|
||||
'2xl': '1600px',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Used for animation when the element is displayed.
|
||||
* @param maxOutput The larger the maxOutput output, the larger the generated css volume.
|
||||
*/
|
||||
function createEnterPlugin(maxOutput = 10) {
|
||||
const createCss = (index: number, d = 'x') => {
|
||||
const upd = d.toUpperCase();
|
||||
return {
|
||||
[`*> .enter-${d}:nth-child(${index})`]: {
|
||||
transform: `translate${upd}(50px)`,
|
||||
},
|
||||
[`*> .-enter-${d}:nth-child(${index})`]: {
|
||||
transform: `translate${upd}(-50px)`,
|
||||
},
|
||||
[`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
|
||||
'z-index': `${10 - index}`,
|
||||
opacity: '0',
|
||||
animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
|
||||
'animation-fill-mode': 'forwards',
|
||||
'animation-delay': `${(index * 1) / 10}s`,
|
||||
},
|
||||
};
|
||||
};
|
||||
const handler = ({ addBase }) => {
|
||||
const addRawCss = {};
|
||||
for (let index = 1; index < maxOutput; index++) {
|
||||
Object.assign(addRawCss, {
|
||||
...createCss(index, 'x'),
|
||||
...createCss(index, 'y'),
|
||||
});
|
||||
}
|
||||
addBase({
|
||||
...addRawCss,
|
||||
[`@keyframes enter-x-animation`]: {
|
||||
to: {
|
||||
opacity: '1',
|
||||
transform: 'translateX(0)',
|
||||
},
|
||||
},
|
||||
[`@keyframes enter-y-animation`]: {
|
||||
to: {
|
||||
opacity: '1',
|
||||
transform: 'translateY(0)',
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
return { handler };
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user