create-weapp-vite 1.2.1 → 1.3.0

package/templates/vant/src/pages/index/index.ts

@@ -0,0 +1,57 @@
+import Dialog from '@vant/weapp/dialog/dialog'
+import { hello } from '@/utils/util'
+
+Page({
+  data: {
+    mode: 'light',
+    hello: {
+      title: 'Hello weapp-vite + Vant',
+      description: '基于 weapp-vite 与 Tailwind CSS，并预先集成了 Vant Weapp 组件库，助你快速搭建业务界面。',
+      docs: 'https://vite.icebreaker.top',
+      links: [
+        {
+          text: '复制文档链接',
+          url: 'https://vite.icebreaker.top',
+        },
+        {
+          text: 'Vant 组件手册',
+          url: 'https://vant-contrib.gitee.io/vant-weapp/#/home',
+          variant: 'ghost',
+        },
+      ],
+    },
+  },
+  switchMode() {
+    if (this.data.mode === 'light') {
+      this.setData({
+        mode: 'dark',
+      })
+    }
+    else {
+      this.setData({
+        mode: 'light',
+      })
+    }
+  },
+  async copy(e: WechatMiniprogram.BaseEvent) {
+    if (e.mark?.url) {
+      await wx.setClipboardData({
+        data: e.mark.url,
+      })
+      // eslint-disable-next-line no-console
+      console.log(`复制成功: ${e.mark.url}`)
+    }
+  },
+  showDialog() {
+    Dialog.alert({
+      title: '我来自Vant',
+      message: '我是Dialog',
+    }).then(() => {
+      // on close
+    })
+  },
+  onLoad() {
+    // eslint-disable-next-line no-console
+    console.log(hello())
+  },
+})

package/templates/vant/src/pages/index/index.wxml

@@ -0,0 +1,28 @@
+<view class="min-h-screen {{ mode === 'light'?'bg-gray-100 text-slate-800':'bg-gray-900 text-slate-200' }} transition-colors duration-500">
+  <view class="flex flex-col items-center pt-20 space-y-10">
+    <view class="flex space-x-8">
+      <view class="w-24 h-24 bg-[url(https://vite.icebreaker.top/logo.png)] bg-[length:100%_100%] bg-no-repeat"></view>
+      <view class="w-32 h-24 bg-[url(https://vite.icebreaker.top/tw-logo.png)] bg-[length:100%_100%] bg-no-repeat"></view>
+    </view>
+    <view class="bg-gradient-to-r from-green-400 to-sky-400 bg-clip-text text-xl font-extrabold text-transparent underline">
+      weapp-vite & weapp-tailwindcss
+    </view>
+    <HelloWorld
+      title="{{hello.title}}"
+      description="{{hello.description}}"
+      docs="{{hello.docs}}"
+      links="{{hello.links}}"
+    />
+    <view class="{{ mode === 'light' ? 'i-mdi-moon-waxing-crescent':'i-mdi-weather-sunny text-white' }} text-8xl" bind:tap="switchMode"></view>
+    <view class="underline" mark:url="https://vite.icebreaker.top" bind:tap="copy">
+      https://vite.icebreaker.top
+    </view>
+    <view class="underline" mark:url="https://tw.icebreaker.top" bind:tap="copy">
+      https://tw.icebreaker.top
+    </view>
+    <view>
+      <van-button type="default" @tap="showDialog">Vant 按钮</van-button>
+    </view>
+  </view>
+</view>
+<van-dialog id="van-dialog" />

package/templates/vant/src/sitemap.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://vite.icebreaker.top/sitemap.json",
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [
+    {
+      "action": "allow",
+      "page": "*"
+    }
+  ]
+}

package/templates/vant/src/theme.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://vite.icebreaker.top/theme.json",
+  "light": {},
+  "dark": {}
+}

package/templates/vant/src/utils/util.ts

@@ -0,0 +1,3 @@
+export function hello() {
+  return 'world'
+}

package/templates/vant/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="weapp-vite/client" />

package/templates/vant/tailwind.config.ts

@@ -0,0 +1,22 @@
+import type { Config } from 'tailwindcss'
+import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
+
+export default {
+  content: [
+    // 添加你需要提取的文件目录
+    'src/**/*.{wxml,js,ts}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    iconsPlugin({
+      collections: getIconCollections(['mdi']),
+    }),
+  ],
+  corePlugins: {
+    // 小程序不需要 preflight 和 container，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
+    preflight: false,
+    container: false,
+  },
+} satisfies Config

package/templates/vant/tsconfig.app.json

@@ -0,0 +1,60 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "jsx": "preserve",
+    "lib": [
+      "ES2023",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "moduleDetection": "force",
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@vant/weapp/*": [
+        "./node_modules/@vant/weapp/dist/*"
+      ]
+    },
+    "resolveJsonModule": true,
+    "types": [
+      "miniprogram-api-typings"
+    ],
+    "allowImportingTsExtensions": true,
+    "allowJs": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "noUncheckedSideEffectImports": true,
+    "erasableSyntaxOnly": true,
+    "skipLibCheck": true
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "weapp-vite/volar"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.mts",
+    "src/**/*.cts",
+    "src/**/*.vue",
+    "src/**/*.json",
+    "src/**/*.d.ts",
+    "types/**/*.d.ts",
+    "env.d.ts"
+  ]
+}

package/templates/vant/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "files": []
+}

package/templates/vant/tsconfig.node.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": [
+      "ES2023"
+    ],
+    "moduleDetection": "force",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ],
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "noUncheckedSideEffectImports": true,
+    "erasableSyntaxOnly": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.*.ts",
+    "*.config.ts",
+    "config/**/*.ts",
+    "scripts/**/*.ts"
+  ]
+}

package/templates/vant/vite.config.ts

@@ -0,0 +1,41 @@
+import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
+import { VantResolver } from 'weapp-vite/auto-import-components/resolvers'
+import { defineConfig } from 'weapp-vite/config'
+
+export default defineConfig({
+  weapp: {
+    srcRoot: 'src',
+    autoImportComponents: {
+      resolvers: [VantResolver()],
+    },
+    // pnpm g 生成的格式
+    // https://vite.icebreaker.top/guide/generate.html
+    generate: {
+      extensions: {
+        js: 'ts',
+        wxss: 'scss',
+      },
+      dirs: {
+        component: 'src/components',
+        page: 'src/pages',
+      },
+      // 假如你想让默认生成的组件命名为 HelloWorld/index 而不是 HelloWorld/HelloWorld 可以下列选项
+      // filenames: {
+      //   component: 'index',
+      //   page: 'index',
+      // },
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        silenceDeprecations: ['legacy-js-api', 'import'],
+      },
+    },
+  },
+  plugins: [
+    UnifiedViteWeappTailwindcssPlugin({
+      rem2rpx: true,
+    }),
+  ],
+})

package/templates/wevu/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/templates/wevu/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "tailwindCSS.includeLanguages": {
+    "wxml": "html"
+  }
+}

package/templates/wevu/README.md

@@ -0,0 +1,29 @@
+# weapp-vite-wevu-template
+
+`weapp-vite` + `wevu`（Vue SFC）模板
+
+## 使用方式
+
+### 开发
+
+- `pnpm dev`
+
+- `pnpm dev --open` 可以打包并直接启动微信开发者工具
+
+### 推荐写法
+
+- 页面/组件优先使用 Vue `<script setup>`（编译宏）写法
+- 配置使用 `<json>` 自定义块
+
+### 构建
+
+`pnpm build`
+
+### 打开微信开发者工具
+
+`pnpm open`
+
+## 文档地址
+
+0. `weapp-vite`: https://vite.icebreaker.top/
+1. `wevu`: https://vite.icebreaker.top/wevu/

package/templates/wevu/auto-import-components.json

@@ -0,0 +1 @@
+{}

package/templates/wevu/gitignore

@@ -0,0 +1,35 @@
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+dist
+vite.config.ts.timestamp-*.mjs
+dist-web

package/templates/wevu/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "weapp-vite-wevu-template",
+  "type": "module",
+  "version": "1.0.0",
+  "private": true,
+  "description": "weapp-vite + wevu (Vue SFC) 模板",
+  "author": "ice breaker <1324318532@qq.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/weapp-vite/weapp-vite.git",
+    "directory": "templates/weapp-vite-wevu-template"
+  },
+  "bugs": {
+    "url": "https://github.com/weapp-vite/weapp-vite/issues"
+  },
+  "keywords": [],
+  "scripts": {
+    "dev": "weapp-vite dev",
+    "dev:open": "weapp-vite dev -o",
+    "build": "weapp-vite build",
+    "open": "weapp-vite open"
+  },
+  "devDependencies": {
+    "miniprogram-api-typings": "^4.1.2",
+    "typescript": "^5.9.3",
+    "weapp-vite": "workspace:*",
+    "wevu": "workspace:*"
+  }
+}

package/templates/wevu/project.config.json

@@ -0,0 +1,43 @@
+{
+  "description": "项目配置文件",
+  "miniprogramRoot": "dist/",
+  "compileType": "miniprogram",
+  "setting": {
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "coverView": false,
+    "postcss": false,
+    "minified": false,
+    "enhance": false,
+    "showShadowRootInWxmlPanel": false,
+    "packNpmRelationList": [
+      {
+        "packageJsonPath": "./package.json",
+        "miniprogramNpmDistDir": "./dist"
+      }
+    ],
+    "ignoreUploadUnusedFiles": true,
+    "compileHotReLoad": false,
+    "skylineRenderEnable": true,
+    "packNpmManually": true,
+    "es6": true,
+    "minifyWXML": true
+  },
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {},
+  "srcMiniprogramRoot": "dist/",
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  },
+  "libVersion": "2.32.3",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "appid": "wx6ffee4673b257014"
+}

package/templates/wevu/project.private.config.json

@@ -0,0 +1,8 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "weapp-vite-wevu-template",
+  "setting": {
+    "compileHotReLoad": true
+  },
+  "libVersion": "3.13.0"
+}

package/templates/wevu/src/app.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onHide, onLaunch, onShow } from 'wevu'
+
+defineAppJson({
+  pages: [
+    'pages/index/index',
+  ],
+  window: {
+    navigationBarTitleText: 'Wepp-Vite + WeVU Template',
+    navigationBarBackgroundColor: '#4c6ef5',
+    navigationBarTextStyle: 'white',
+  },
+  style: 'v2',
+  componentFramework: 'glass-easel',
+  sitemapLocation: 'sitemap.json',
+})
+
+onShow(() => {
+  console.log('[weapp-vite-wevu-template] app show')
+})
+
+onHide(() => {
+  console.log('[weapp-vite-wevu-template] app hide')
+})
+
+onLaunch(() => {
+  console.log('[weapp-vite-wevu-template] app launch')
+})
+</script>
+
+<style>
+page {
+  color: #1c1c3c;
+  background: #f6f7fb;
+}
+</style>

package/templates/wevu/src/components/HelloWorld/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    subtitle?: string
+  }>(),
+  {
+    title: 'Hello WeVU',
+    subtitle: '',
+  },
+)
+</script>
+
+<template>
+  <view class="header">
+    <text class="title">
+      {{ props.title }}
+    </text>
+    <text v-if="props.subtitle" class="subtitle">
+      {{ props.subtitle }}
+    </text>
+  </view>
+</template>
+
+<style>
+.header {
+  padding: 24rpx;
+  background: linear-gradient(135deg, #4c6ef5, #7048e8);
+  border-radius: 24rpx;
+}
+
+.title {
+  display: block;
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #fff;
+}
+
+.subtitle {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 26rpx;
+  color: rgb(255 255 255 / 85%);
+}
+</style>

package/templates/wevu/src/pages/index/index.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'wevu'
+
+import HelloWorld from '@/components/HelloWorld/index.vue'
+
+definePageJson({
+  navigationBarTitleText: '首页',
+})
+
+const count = ref(0)
+const message = ref('Hello WeVU!')
+const todos = ref([
+  '用 Vue SFC 写页面/组件',
+  '用 wevu API（ref/computed/watch）写逻辑',
+  '用 v-for / v-if / @tap / v-model 写模板',
+])
+
+const doubled = computed(() => count.value * 2)
+
+function increment() {
+  count.value += 1
+}
+
+function reset() {
+  count.value = 0
+}
+
+watch(count, (newValue, oldValue) => {
+  console.log(`[wevu] count changed: ${oldValue} -> ${newValue}`)
+})
+</script>
+
+<template>
+  <view class="page">
+    <HelloWorld :title="message" :subtitle="`count=${count}, doubled=${doubled}`" />
+
+    <view class="card">
+      <view class="row">
+        <text class="label">
+          当前计数：{{ count }}
+        </text>
+        <text class="label">
+          双倍：{{ doubled }}
+        </text>
+      </view>
+
+      <view class="row actions">
+        <button class="btn primary" @tap="increment">
+          +1
+        </button>
+        <button class="btn danger" @tap="reset">
+          重置
+        </button>
+      </view>
+
+      <view class="row">
+        <text class="label">
+          文本双向绑定：
+        </text>
+      </view>
+      <input v-model="message" class="input" placeholder="输入标题…">
+
+      <view class="row">
+        <text class="label">
+          Checklist
+        </text>
+      </view>
+      <view class="todo">
+        <view v-for="(todo, index) in todos" :key="index" class="todo-item">
+          <text>• {{ todo }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style>
+.page {
+  box-sizing: border-box;
+  padding: 48rpx 32rpx 64rpx;
+}
+
+.card {
+  padding: 32rpx;
+  margin-top: 24rpx;
+  background: #fff;
+  border-radius: 24rpx;
+  box-shadow: 0 12rpx 32rpx rgb(44 44 84 / 10%);
+}
+
+.row {
+  display: flex;
+  gap: 16rpx;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16rpx;
+}
+
+.label {
+  font-size: 30rpx;
+  color: #1c1c3c;
+}
+
+.actions {
+  margin: 24rpx 0;
+}
+
+.btn {
+  flex: 1;
+  line-height: 96rpx;
+  color: #fff;
+  border-radius: 16rpx;
+}
+
+.btn.primary {
+  background: #4c6ef5;
+}
+
+.btn.danger {
+  background: #f03e3e;
+}
+
+.input {
+  box-sizing: border-box;
+  height: 88rpx;
+  padding: 0 24rpx;
+  margin: 0 0 24rpx;
+  background: #fff;
+  border: 2rpx solid #e9ecef;
+  border-radius: 16rpx;
+}
+
+.todo-item {
+  margin-bottom: 12rpx;
+  font-size: 26rpx;
+  color: #4f4f7a;
+}
+</style>