perf-优化多余的样式,使用unocss

src/assets/style/auxiliary.scss

@@ -1,75 +0,0 @@
-view,
-scroll-view,
-swiper,
-match-media,
-movable-area,
-movable-view,
-cover-view,
-cover-image,
-icon,
-text,
-rich-text,
-progress,
-button,
-checkboxe,
-ditor,
-form,
-input,
-label,
-picker,
-picker-view,
-radio,
-slider,
-switch,
-textarea,
-navigator,
-audio,
-camera,
-image,
-video,
-live-player,
-live-pusher,
-map,
-canvas,
-web-view,
-:before,
-:after {
-  box-sizing: border-box;
-}
-
-/* 隐藏scroll-view的滚动条 */
-::-webkit-scrollbar {
-  display: none;
-  width: 0 !important;
-  height: 0 !important;
-  -webkit-appearance: none;
-  background: transparent;
-}
-
-// 超出省略,最多5行
-@for $i from 1 through 5 {
-  .text-ellipsis-#{$i} {
-    // vue下，单行和多行显示省略号需要单独处理
-    @if $i == '1' {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    } @else {
-      display: -webkit-box !important;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: break-all;
-      -webkit-line-clamp: $i;
-      -webkit-box-orient: vertical !important;
-    }
-  }
-}
-
-// 历遍生成4个方向的底部安全区
-@each $d in top, right, bottom, left {
-  .safe-area-inset-#{$d} {
-    padding-#{$d}: 0 !important;
-    padding-#{$d}: constant(safe-area-inset-#{$d}) !important;
-    padding-#{$d}: env(safe-area-inset-#{$d}) !important;
-  }
-}

src/assets/style/flex.scss

@@ -1,34 +0,0 @@
-// flex布局
-
-$flex-directions: row, row-reverse, column, column-reverse;
-@each $v in $flex-directions {
-  .flex-#{$v} {
-    @include flex($v);
-  }
-}
-
-$justify-content: start, end, center, between, around, evenly;
-@each $v in $justify-content {
-  .justify-#{$v} {
-    @if ($v == 'start') {
-      justify-content: flex- + $v;
-    } @else if($v == 'start') {
-      justify-content: flex- + $v;
-    } @else {
-      justify-content: $v;
-    }
-  }
-}
-
-$align-items: start, end, center, baseline, stretch;
-@each $v in $align-items {
-  .items-#{$v} {
-    @if ($v == 'start') {
-      align-items: flex- + $v;
-    } @else if($v == 'start') {
-      align-items: flex- + $v;
-    } @else {
-      align-items: $v;
-    }
-  }
-}

src/assets/style/main.scss

@@ -1,3 +0,0 @@
-@import 'auxiliary';
-@import 'mixin';
-@import 'flex';

src/assets/style/mixin.scss

@@ -1,4 +0,0 @@
-@mixin flex($direction: row) {
-  display: flex;
-  flex-direction: $direction;
-}

src/components/BasicButton/index.vue

@@ -16,17 +16,17 @@
 
 <style lang="scss" scoped>
   .default-btn {
-    color: $uni-text-color-inverse;
+    color: #fff;
     border-width: 4rpx;
-    border-color: $nui-button-border-color;
+    border-color: #bfdbfe;
     border-style: solid;
-    border-radius: $uni-border-radius-base;
+    border-radius: 6rpx;
-    background-color: $nui-button-bg-color;
+    background-color: #60a5fa;
     padding: 12rpx 26rpx;
     display: inline-block;
-    font-size: $uni-font-size-sm;
+    font-size: 24rpx;
     &:hover {
-      background-color: $nui-button-bg-hover-color;
+      background-color: #3b82f6;
     }
   }
 </style>

src/main.ts

@@ -1,7 +1,6 @@
 import { createSSRApp } from 'vue';
 import App from './App.vue';
 import { setupStore } from '@/state';
-// import '@/assets/style/main.scss';
 import 'uno.css';
 
 export function createApp() {

src/uni.scss

@@ -1,81 +1,66 @@
-/**
+view,
- * 这里是uni-app内置的常用样式变量
+scroll-view,
- *
+swiper,
- * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+match-media,
- * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+movable-area,
- *
+movable-view,
- */
+cover-view,
+cover-image,
+icon,
+text,
+rich-text,
+progress,
+button,
+checkboxe,
+ditor,
+form,
+input,
+label,
+picker,
+picker-view,
+radio,
+slider,
+switch,
+textarea,
+navigator,
+audio,
+camera,
+image,
+video,
+live-player,
+live-pusher,
+map,
+canvas,
+web-view,
+:before,
+:after {
+  box-sizing: border-box;
+}
 
-/**
+/* 隐藏scroll-view的滚动条 */
- * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+::-webkit-scrollbar {
- *
+  display: none;
- * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+  width: 0 !important;
- */
+  height: 0 !important;
+  -webkit-appearance: none;
+  background: transparent;
+}
 
-/* 颜色变量 */
+// 超出省略,最多5行
-
+@for $i from 1 through 5 {
-/* 行为相关颜色 */
+  .text-ellipsis-#{$i} {
-$uni-color-primary: #007aff;
+    // vue下，单行和多行显示省略号需要单独处理
-$uni-color-success: #4cd964;
+    @if $i == '1' {
-$uni-color-warning: #f0ad4e;
+      overflow: hidden;
-$uni-color-error: #dd524d;
+      white-space: nowrap;
-
+      text-overflow: ellipsis;
-/* 文字基本颜色 */
+    } @else {
-$uni-text-color: #333; //基本色
+      display: -webkit-box !important;
-$uni-text-color-inverse: #fff; //反色
+      overflow: hidden;
-$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
+      text-overflow: ellipsis;
-$uni-text-color-placeholder: #808080;
+      word-break: break-all;
-$uni-text-color-disable: #c0c0c0;
+      -webkit-line-clamp: $i;
-
+      -webkit-box-orient: vertical !important;
-/* 背景颜色 */
+    }
-$uni-bg-color: #ffffff;
+  }
-$uni-bg-color-grey: #f8f8f8;
+}
-$uni-bg-color-hover: #f1f1f1; //点击状态颜色
-$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色
-
-/* 边框颜色 */
-$uni-border-color: #c8c7cc;
-
-/* 尺寸变量 */
-
-/* 文字尺寸 */
-$uni-font-size-sm: 24rpx;
-$uni-font-size-base: 28rpx;
-$uni-font-size-lg: 32rpx;
-
-/* 图片尺寸 */
-$uni-img-size-sm: 40rpx;
-$uni-img-size-base: 52rpx;
-$uni-img-size-lg: 80rpx;
-
-/* Border Radius */
-$uni-border-radius-sm: 4rpx;
-$uni-border-radius-base: 6rpx;
-$uni-border-radius-lg: 12rpx;
-$uni-border-radius-circle: 50%;
-
-/* 水平间距 */
-$uni-spacing-row-sm: 10px;
-$uni-spacing-row-base: 20rpx;
-$uni-spacing-row-lg: 30rpx;
-
-/* 垂直间距 */
-$uni-spacing-col-sm: 8rpx;
-$uni-spacing-col-base: 16rpx;
-$uni-spacing-col-lg: 24rpx;
-
-/* 透明度 */
-$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
-
-/* 文章场景相关 */
-$uni-color-title: #2c405a; // 文章标题颜色
-$uni-font-size-title: 40rpx;
-$uni-color-subtitle: #555555; // 二级标题颜色
-$uni-font-size-subtitle: 36rpx;
-$uni-color-paragraph: #3f536e; // 文章段落颜色
-$uni-font-size-paragraph: 30rpx;
-
-/* 按钮相关 */
-$nui-button-bg-color: #60a5fa;
-$nui-button-bg-hover-color: #3b82f6;
-$nui-button-border-color: #bfdbfe;

unocss.config.js

@@ -1,5 +1,7 @@
-/*
+/**
- * https://zhuanlan.zhihu.com/p/569976147
+ * unocss defineConfig
+ * @link unocss: https://github.com/unocss/unocss
+ * @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
  * */
 
 import { defineConfig, presetAttributify, presetIcons } from 'unocss';
@@ -24,7 +26,7 @@ const transformRules = {
   ',': '-r222-',
 };
 
-const prefix = `un:`;
+const prefix = `un-`;
 
 export default defineConfig({
   presets: [
@@ -44,7 +46,7 @@ export default defineConfig({
   shortcuts: [
     {
       'border-base': 'border border-gray-500_10',
-      center: 'flex justify-center items-center',
+      'un-center': 'un-flex un-justify-center un-items-center',
     },
   ],
   theme: {},