feat: 🎸 1.新增脚本提交规范指令 2.模块组件命名，在浏览器可以容易找到组件调试 3. scss语言图片多语言

config/vite/plugins/styleImport.ts

@@ -3,7 +3,17 @@
  * @description 按需引入样式文件
  */
 
-import { createStyleImportPlugin, NutuiResolve } from 'vite-plugin-style-import';
+import { createStyleImportPlugin, Lib } from 'vite-plugin-style-import';
+
+function NutuiResolve(): Lib {
+  return {
+    libraryName: '@nutui/nutui',
+    libraryNameChangeCase: 'pascalCase',
+    resolveStyle: (name) => {
+      return `@nutui/nutui/dist/packages/${name.toLowerCase()}/index.scss`;
+    },
+  };
+}
 
 export const ConfigStyleImport = () => {
   return createStyleImportPlugin({

package.json

@@ -13,7 +13,8 @@
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged",
     "prepare": "husky install",
-    "deps": "yarn upgrade-interactive --latest"
+    "deps": "yarn upgrade-interactive --latest",
+    "commit": "git add . && git-cz"
   },
   "dependencies": {
     "@nutui/nutui": "^3.2.0",
@@ -45,6 +46,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.3.0",
+    "git-cz": "^4.9.0",
     "husky": "8.0.1",
     "lint-staged": "13.0.3",
     "mockjs": "^1.1.0",

src/layout/basic/index.vue

@@ -17,7 +17,7 @@
   </nut-tabbar>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="BasicLayoutPage">
   import { useRouter } from 'vue-router';
 
   const tabItem = [

src/styles/mixin.scss

@@ -0,0 +1,16 @@
+@mixin main-lang-bg($width, $height, $preUrl, $posUrl) {
+  width: $width;
+  height: $height;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  @include loop-lang-bg($preUrl, $posUrl);
+}
+// 背景图多语言
+@mixin loop-lang-bg($preUrl, $posUrl) {
+  $list: zh-cn, en-us;
+  @each $i in $list {
+    &.#{$i} {
+      background-image: url('#{$preUrl}/#{$i}/#{$posUrl}');
+    }
+  }
+}

src/views/demo/index.vue

@@ -30,11 +30,19 @@
       <nut-button type="success">成功按钮</nut-button>
     </div>
   </section>
+  <section>
+    <div :class="['btn-add', i18n.global.locale]"></div>
+  </section>
 </template>
 
-<script setup></script>
+<script setup name="DemoPage">
+  import { i18n } from '/@/i18n';
+  // import { useI18n } from 'vue-i18n';
+  // const { locale } = useI18n();
+</script>
 
 <style lang="scss" scoped>
+  @import '../../styles/mixin.scss';
   section {
     .title {
       margin-bottom: 40px;

src/views/home/index.vue

@@ -18,14 +18,15 @@
     <nut-button shape="square" size="small" type="default" @click="changeLang('en-us')">
       {{ $t('language.en') }}
     </nut-button>
+    <div :class="['btn-add', i18n.global.locale]"></div>
   </div>
   {{ getUserInfo }}
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="HomePage">
   import { computed } from 'vue';
   import { useUserStore } from '/@/store/modules/user';
-  import { setLang } from '/@/i18n';
+  import { setLang, i18n } from '/@/i18n';
 
   let cellList = ['vue3', 'vite', 'vue-router', 'axios', 'Pinia', 'vue-i18n', 'vue-jsx', 'vatlet/vant/nutUI'];
   const userStore = useUserStore();
@@ -39,6 +40,7 @@
   };
 </script>
 <style lang="scss">
+  @import '../../styles/mixin.scss';
   .header {
     display: flex;
     justify-content: center;
@@ -72,5 +74,9 @@
 
   .btn-wrap {
     margin: 20px;
+    display: flex;
+  }
+  .btn-add {
+    @include main-lang-bg(302px, 82px, '/@/assets/button', 'add.png');
   }
 </style>

src/views/list/index.vue

@@ -2,7 +2,7 @@
   <nut-card :img-url="state.imgUrl" :title="state.title" :price="state.price" :vip-price="state.vipPrice" :shop-name="state.shopName" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="ListPage">
   import { reactive } from 'vue';
 
   let state = reactive({

src/views/login/index.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="LoginPage">
   import router from '/@/router';
   import { reactive, ref } from 'vue';
   import { useUserStore } from '/@/store/modules/user';

src/views/member/index.vue

@@ -22,7 +22,7 @@
   </nut-grid>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MemberPage">
   // import { useUserStore } from '@/store/modules/user';
   import { useRouter } from 'vue-router';
 

yarn.lock

@@ -3699,6 +3699,11 @@ gifsicle@5.2.0, gifsicle@^5.0.0:
     execa "^5.0.0"
     logalot "^2.0.0"
 
+git-cz@^4.9.0:
+  version "4.9.0"
+  resolved "https://registry.npmmirror.com/git-cz/-/git-cz-4.9.0.tgz#c0604ff85b37046d51fd85e265040032c9617bf2"
+  integrity sha512-cSRL8IIOXU7UFLdbziCYqg8f8InwLwqHezkiRHNSph7oZqGv0togId1kMTfKil6gzK0VaSXeVBb4oDl0fQCHiw==
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"