refactor: 迁移UI框架 taro-ui-vue3 到 nutui

.eslintrc

@@ -1,3 +1,17 @@
 {
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser"
+  },
+  "globals": {
+    "defineProps": "readonly",
+    "defineEmits": "readonly",
+    "defineExpose": "readonly",
+    "withDefaults": "readonly"
+  },
+  "plugins": ["@typescript-eslint"],
   "extends": ["taro/vue3"]
 }

babel.config.js

@@ -6,5 +6,25 @@ module.exports = {
       framework: 'vue3',
       ts: true
     }]
-  ]
+  ],
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: '@nutui/nutui',
+        libraryDirectory: 'dist/packages/_es',
+        camel2DashComponentName: false,
+      },
+      'nutui3-vue',
+    ],
+    [
+      'import',
+      {
+        libraryName: '@nutui/nutui-taro',
+        libraryDirectory: 'dist/packages/_es',
+        camel2DashComponentName: false,
+      },
+      'nutui3-taro',
+    ],
+  ],
 }

config/index.js

@@ -21,7 +21,7 @@ const config = {
             pxtransform: {
                 enable: true,
                 config: {
-
+                    selectorBlackList: [/nut-/],
                 }
             },
             url: {
@@ -55,7 +55,8 @@ const config = {
                 }
             }
         }
-    }
+    },
+    plugins: ['@tarojs/plugin-html'],
 }
 
 module.exports = function(merge) {

package.json

@@ -36,22 +36,24 @@
     "author": "",
     "dependencies": {
         "@babel/runtime": "^7.7.7",
+        "@nutui/nutui-taro": "^3.1.11",
         "@tarojs/components": "3.3.11",
         "@tarojs/runtime": "3.3.11",
         "@tarojs/taro": "3.3.11",
         "hairline": "^1.0.0",
-        "taro-ui-vue3": "^1.0.0-alpha.21",
         "vue": "^3.0.0"
     },
     "devDependencies": {
         "@babel/core": "^7.8.0",
         "@tarojs/mini-runner": "3.3.11",
+        "@tarojs/plugin-html": "3.3.11",
         "@tarojs/plugin-less": "^2.2.10",
         "@tarojs/webpack-runner": "3.3.11",
         "@types/webpack-env": "^1.13.6",
         "@typescript-eslint/eslint-plugin": "^4.15.1",
         "@typescript-eslint/parser": "^4.15.1",
         "@vue/compiler-sfc": "^3.0.0",
+        "babel-plugin-import": "^1.13.3",
         "babel-preset-taro": "3.3.11",
         "eslint": "^6.8.0",
         "eslint-config-taro": "3.3.11",

src/app.config.ts

@@ -34,14 +34,5 @@ export default {
       "text": "我的"
     }]
   },
-  "quickMenu": {
-    "share": true,
-    "favorite": true,
-    "sendToDesktop": true
-  },
   "debug": false,
-  "pageAlias": {
-    "index": "pages/index/index",
-    "me": "pages/me/index"
-  }
 }

src/app.ts

@@ -7,13 +7,18 @@
  * @FilePath: /mp-bbhj/src/app.ts
  */
 import { createApp } from 'vue'
-import { createUI } from 'taro-ui-vue3'
-import { NavBar, Contact, ListContent, ShowArticle, ListRescueCard } from './components/index'
+import {
+  Icon,
+  SearchBar,
+  Cell,
+  CellGroup,
+  Button,
+  Collapse,
+  CollapseItem,
+} from '@nutui/nutui-taro'
 import { mpAutoUpdate } from  './common/utils.js'
+import "@nutui/nutui-taro/dist/style.css";
 import './app.less'
-// import 'taro-ui-vue3/dist/style/index.scss'
-
-
 
 const App = createApp({
   onShow(options) {
@@ -23,13 +28,13 @@ const App = createApp({
   // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
 })
 
-const tuv3 = createUI()
-App.use(tuv3)
-
-App.component(NavBar.name, NavBar)
-App.component(Contact.name, Contact)
-App.component(ListContent.name, ListContent)
-App.component(ListRescueCard.name, ListRescueCard)
-App.component(ShowArticle.name, ShowArticle)
+App
+  .use(Icon)
+  .use(SearchBar)
+  .use(Cell)
+  .use(CellGroup)
+  .use(Button)
+  .use(Collapse)
+  .use(CollapseItem)
 
 export default App

src/components/Contact.vue

@@ -1,20 +1,15 @@
 <template>
-  <AtButton class="connect" @click="handleOpenCustomerServiceChat">
+  <button class="connect" @tap="handleOpenCustomerServiceChat">
     <view class="text">微信客服</view>
-  </AtButton>
+  </button>
 </template>
 
-
 <script>
 import { computed, defineComponent, PropType, toRefs } from "vue";
-import { AtButton } from "taro-ui-vue3";
 import Taro from "@tarojs/taro";
 
 export default defineComponent({
   name: "Contact",
-  components: {
-    AtButton,
-  },
   methods: {
     handleOpenCustomerServiceChat() {
       Taro.openCustomerServiceChat({

src/components/ContentItem.vue

@@ -0,0 +1,130 @@
+<template>
+  <view class="article_list_item" @tap="jumpToDetail">
+    <view
+      class="article_detail"
+    >
+      <view class="artclie_text_msg">
+        <view class="article_author">
+          <view class="nickname">{{ item.nickname }}</view>
+        </view>
+        <view class="article_title"> {{ item.title }}</view>
+        <view>
+          <view> <text style="color:red;">失踪时间：</text> {{item.missed_at}}</view>
+          <view> <text style="color:red;">失踪地点：</text> {{item.missed_address}}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { navigateTo } from "@tarojs/taro";
+import { toRefs } from "vue"
+
+const props = defineProps(['item'])
+const { item } = toRefs(props)
+
+function jumpToDetail() {
+  navigateTo({
+		url: `/pages/article/detail/index?id=${item.value.id}`
+	})
+}
+</script>
+
+<style lang="less">
+.ellipsis {
+  display: -webkit-box;
+
+  overflow: hidden;
+
+  text-overflow: ellipsis;
+
+  word-wrap: break-word;
+
+  white-space: normal !important;
+  word-break: break-all;
+
+  -webkit-line-clamp: 2;
+
+  -webkit-box-orient: vertical;
+}
+.article_list_item {
+  box-sizing: border-box;
+  background: #fff;
+  // margin-bottom: 20rpx;
+  .article_detail {
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #f5f6f6;
+    padding: 20rpx 40rpx;
+    .artclie_text_msg {
+      flex: 1;
+    }
+    .article_author {
+      display: flex;
+      align-items: center;
+      padding-bottom: 16rpx;
+      .img {
+        height: 40rpx;
+        width: 40rpx;
+        border-radius: 50%;
+      }
+      .nickname {
+        font-size: 24rpx;
+        color: rgba(102, 102, 102, 1);
+        margin-left: 11rpx;
+      }
+    }
+    .article_title {
+      font-size: 36rpx;
+      color: #333333;
+      .ellipsis;
+    }
+    .article_description {
+      color: #999999;
+      font-size: 28rpx;
+      .ellipsis;
+    }
+     .detail-btn{
+         border:none;
+         background: none;
+         color: #313BD1;
+         width :3rem;
+         float: right;
+       }
+  }
+  .img_cover {
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: 4px;
+    display: inline-block;
+    margin-left: 40rpx;
+  }
+  .article_other {
+    display: flex;
+    color: #999999;
+    font-size: 28rpx;
+    height: 88rpx;
+    align-items: center;
+    view {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .img {
+      height: 28rpx;
+      width: 30rpx;
+      margin-right: 10rpx;
+    }
+    .acticle_comments {
+      .img {
+        width: 35rpx;
+      }
+    }
+  }
+}
+</style>