chore: pug

config/index.ts

@@ -51,6 +51,16 @@ const config = {
           },
         },
       });
+      chain.merge({
+        module: {
+          rule: {
+            myloader: {
+              test: /\.pug$/,
+              loader: 'pug-plain-loader',
+            },
+          },
+        },
+      });
     },
     postcss: {
       pxtransform: {
@@ -89,6 +99,21 @@ const config = {
           resolvers: [NutUIResolver({ taro: true })],
         })
       );
+      chain.merge({
+        module: {
+          rule: {
+            pug: {
+              test: /\.pug$/,
+              use: [
+                {
+                  loader: 'pug-plain-loader',
+                  options: {},
+                },
+              ],
+            },
+          },
+        },
+      });
     },
     publicPath: '/',
     staticDirectory: 'static',

package.json

@@ -59,6 +59,7 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.8.0",
+		"@prettier/plugin-pug": "^1.15.2",
 		"@tarojs/cli": "3.6.23",
 		"@tarojs/taro-loader": "3.6.23",
 		"@tarojs/webpack5-runner": "3.6.23",
@@ -76,6 +77,8 @@
 		"eslint-plugin-vue": "^8.0.0",
 		"postcss": "^8.4.33",
 		"postcss-rem-to-responsive-pixel": "^6.0.1",
+		"pug": "^3.0.2",
+		"pug-plain-loader": "^1.1.0",
 		"style-loader": "1.3.0",
 		"stylelint": "9.3.0",
 		"tailwindcss": "^3.4.1",

src/pages/index/index.vue

-<template>
-  <view class="index text-gray-400">
-    <view>
-      <img src="" alt="" />
-    </view>
-    <view class="index text-gray-400"> {{ msg }} <Dongdong /> </view>
-    <view class="btn">
-      <nut-button type="primary" @click="handleClick('text', msg2, true)"
-        >点我</nut-button
-      >
-    </view>
-    <nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover" />
-  </view>
+<template lang="pug">
+view.index.text-gray-400
+  view
+    img(src='')
+  view.index.text-gray-400 {{ msg }}
+    Dongdong
+  view.btn
+    nut-button(type='primary', @click='handleClick("text", msg2, true)') 点我
+  nut-toast(:msg='msg2', v-model:visible='show', :type='type', :cover='cover')
 </template>
 
 <script>