create-young-proj 0.1.1 → 0.3.0

package/template-vue-mobile/README.md

@@ -0,0 +1,71 @@
+# h5 模板
+
+## 用户代码片段(页面模板)
+
+模板 | 触发关键字
+--- | ---
+基础页面 | `base`
+
+## **Docker 部署**
+
+- 同一份代码，可以根据运行时的环境变量决定具体表现
+- `node` 服务：
+  - 托管前端静态资源
+  - 根据环境变量读取对应的配置文件，并以接口的形式暴露给前端
+  - 跨域接口代理
+
+环境变量
+
+```sh
+# 部署环境 dev | test | online
+DEPLOY_ENV=dev
+# DEPLOY_ENV=test
+# DEPLOY_ENV=online
+# node 服务监听的端口号
+LISTEN_PORT=3000
+```
+
+### 本地开发
+
+**确保上述的环境变量存在**
+
+启动服务端程序 `yarn dev:server`
+
+启动客户端程序 `yarn dev`
+
+### 打包预览
+
+`yarn build`
+
+**确保上述的环境变量存在！！！**
+
+`node boot.mjs`
+
+### 配置文件
+
+存放于 `config` 目录下的 `.${env}rc` 文件，`env` 为对应的环境标识
+
+## 常规部署
+
+- `nginx` 托管前端静态资源
+- 每次打包时读取环境变量，打包完成之后不可变
+- 使用 `nginx` 代理跨域
+
+环境变量
+
+```sh
+# 设置静态部署
+VITE_USE_DEFAULT_DEPLOY_METHOD=true
+# 其他的环境变量，根据环境区分
+VITE_TITLE=标题名称
+```
+
+### 本地开发
+
+**确保上述的环境变量存在**，然后 `yarn dev` 即可
+
+### 打包预览
+
+`yarn build`
+
+`yarn preview`

package/template-vue-mobile/_env

@@ -0,0 +1,6 @@
+# 部署环境 dev | test | online
+DEPLOY_ENV=dev
+# DEPLOY_ENV=test
+# DEPLOY_ENV=online
+# node 服务监听的端口号
+LISTEN_PORT=3003

package/template-vue-mobile/_gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+!.vscode/*.code-snippets
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.nitro
+.output

package/template-vue-mobile/boot.mjs

@@ -0,0 +1,16 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-09-16 11:48:05
+ * @LastEditTime: 2022-12-29 16:21:59
+ * @Description:
+ */
+(async () => {
+  const env = process.env.DEPLOY_ENV;
+  const listenPort = process.env.LISTEN_PORT || 3003;
+  console.log('当前环境：', env);
+  console.log('服务监听端口：', listenPort);
+
+  process.env.NITRO_PORT = listenPort;
+
+  await import('./.output/server/index.mjs');
+})();

package/template-vue-mobile/build/custom-plugin.ts

@@ -0,0 +1,30 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-01-10 14:43:13
+ * @LastEditTime: 2023-01-10 15:11:44
+ * @Description:
+ */
+import { networkInterfaces } from 'node:os';
+
+const virtualModuleId = 'virtual:local-server';
+const ips = networkInterfaces();
+export const localServer = `http://${ips['eth0'][0].address}:3000`;
+
+/**
+ * 获取本机 ip 地址，拼接开发时的服务地址
+ */
+export const serverPlugin = () => {
+  return {
+    name: 'local-server',
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return virtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === virtualModuleId) {
+        return `export const server = '${localServer}';`;
+      }
+    },
+  };
+};

package/template-vue-mobile/build/index.ts

@@ -0,0 +1,7 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-01-10 14:46:42
+ * @LastEditTime: 2023-01-10 14:46:43
+ * @Description:
+ */
+export * from './plugins';

package/template-vue-mobile/build/plugins.ts

@@ -0,0 +1,68 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-01-10 14:26:01
+ * @LastEditTime: 2023-01-13 15:54:55
+ * @Description:
+ */
+import type { PluginOption } from 'vite';
+import { serverPlugin } from './custom-plugin';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import legacy from '@vitejs/plugin-legacy';
+import Unocss from 'unocss/vite';
+// 自动导入
+import AutoImport from 'unplugin-auto-import/vite';
+import AutoComopnents from 'unplugin-vue-components/vite';
+import { VantResolver } from 'unplugin-vue-components/resolvers';
+// 自动路由及布局
+import Pages from 'vite-plugin-pages';
+import Layouts from 'vite-plugin-vue-layouts';
+
+export { localServer } from './custom-plugin';
+
+export const usePlugins = () => {
+  return [
+    serverPlugin(),
+    vue(),
+    vueJsx(),
+    Pages({
+      extensions: ['vue', 'tsx'],
+      dirs: 'src/views',
+      exclude: ['**/components/*.{vue,tsx}', '_*'],
+    }),
+    Layouts({ defaultLayout: 'default' }),
+    AutoComopnents({
+      dirs: ['src/components'],
+      dts: './src/auto-components.d.ts',
+      extensions: ['vue', 'tsx'],
+      resolvers: [VantResolver()],
+    }),
+    AutoImport({
+      dts: './src/auto-imports.d.ts',
+      imports: [
+        'vue',
+        'vue-router',
+        '@vueuse/core',
+        'pinia',
+        {
+          vant: [
+            'showToast',
+            'showLoadingToast',
+            'showFailToast',
+            'showSuccessToast',
+            'showDialog',
+            'showConfirmDialog',
+            'showImagePreview',
+            'showNotify',
+          ],
+        },
+      ],
+    }),
+    Unocss(),
+    // 不生成同名 polyfill 文件，打包速度翻倍
+    // 如果出现兼容问题，可以删除此配置
+    legacy({
+      // renderLegacyChunks: false
+    }),
+  ] as PluginOption[];
+};

package/template-vue-mobile/config/.devrc

@@ -0,0 +1,2 @@
+VITE_TITLE = Mobile-dev
+VITE_ENABLE_VCONSOLE = true

package/template-vue-mobile/config/.onlinerc

@@ -0,0 +1 @@
+VITE_TITLE = Mobile-online

package/template-vue-mobile/config/.testrc

@@ -0,0 +1 @@
+VITE_TITLE = Mobile-test

package/template-vue-mobile/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta id="viewportMeta" name="viewport"
+    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover">
+  <title>Vite + Vue + TS</title>
+  <script>
+    // hack globalThis
+    this.globalThis || (this.globalThis = this);
+    window.onerror = function (e) {
+      console.log(e);
+      window.alert('您的浏览器版本过低，请尝试使用其他浏览器或将浏览器升级至最新版本后重试！');
+    }
+  </script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

package/template-vue-mobile/nitro.config.ts

@@ -0,0 +1,19 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-12-28 11:59:56
+ * @LastEditTime: 2022-12-28 12:18:46
+ * @Description:
+ */
+import { defineNitroConfig } from 'nitropack';
+
+export default defineNitroConfig({
+  /**
+   * 托管前端静态资源
+   */
+  serveStatic: 'node',
+  publicAssets: [
+    {
+      dir: 'dist',
+    },
+  ],
+});

package/template-vue-mobile/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "vue3_vant",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "dev:server": "nitropack dev",
+    "build": "vite build && nitropack build",
+    "preview": "vite preview --host",
+    "format": "rome format . --write",
+    "release": "changelogen && bumpp --no-push"
+  },
+  "dependencies": {
+    "@bluesyoung/http": "0.1.3",
+    "@bluesyoung/utils": "0.0.3",
+    "@vueuse/core": "^9.12.0",
+    "core-js": "^3.27.2",
+    "pinia": "^2.0.29",
+    "regenerator-runtime": "^0.13.10",
+    "vant": "^4.0.9",
+    "vconsole": "^3.15.0",
+    "vue": "^3.2.41",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@iconify/json": "^2.2.14",
+    "@types/node": "16",
+    "@unocss/reset": "^0.49.1",
+    "@vitejs/plugin-legacy": "^3.0.2",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "bumpp": "^8.2.1",
+    "c12": "^1.1.0",
+    "changelogen": "^0.4.1",
+    "less": "^4.1.3",
+    "nitropack": "^2.1.1",
+    "rome": "^11.0.0",
+    "terser": "^5.16.2",
+    "typescript": "^4.9.5",
+    "unocss": "^0.49.1",
+    "unplugin-auto-import": "^0.13.0",
+    "unplugin-vue-components": "^0.23.0",
+    "vite": "^4.0.4",
+    "vite-plugin-pages": "^0.28.0",
+    "vite-plugin-vue-layouts": "^0.7.0"
+  }
+}

package/template-vue-mobile/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template-vue-mobile/rome.json

@@ -0,0 +1,24 @@
+{
+  "formatter": {
+    "ignore": [
+      "*.d.ts",
+      "index.html",
+      "yarn.lock",
+      "*.json",
+      "README.md",
+      "Dockerfile",
+      "dist/**/*"
+    ],
+    "indentStyle": "space",
+    "indentSize": 2,
+    "lineWidth": 100
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "linter": {
+    "enabled": false
+  }
+}

package/template-vue-mobile/routes/[...all].ts

@@ -0,0 +1,11 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-01-14 16:55:47
+ * @LastEditTime: 2023-02-01 12:16:57
+ * @Description:
+ */
+export default eventHandler(async (event) => {
+  return {
+    hello: 'world',
+  };
+});

package/template-vue-mobile/routes/get/env.ts

@@ -0,0 +1,25 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-11-18 10:55:50
+ * @LastEditTime: 2023-02-01 12:17:15
+ * @Description:
+ */
+
+/**
+ * 存储前端需要的环境变量
+ */
+const envObj: any = {};
+
+export default eventHandler(async (event) => {
+  if (Object.keys(envObj).length === 0) {
+    for (const key in process.env) {
+      if (Object.prototype.hasOwnProperty.call(process.env, key) && key.startsWith('VITE_')) {
+        envObj[key] = process.env[key];
+      }
+    }
+  }
+
+  event.node.res.setHeader('Access-Control-Allow-Origin', '*');
+
+  return envObj as ImportMetaEnv;
+});

package/template-vue-mobile/src/App.vue

@@ -0,0 +1,29 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-12-03 15:57:40
+ * @LastEditTime: 2023-02-01 12:00:31
+ * @Description:
+-->
+<template>
+  <div>
+    <!-- 初始化 -->
+    <Init />
+    <!-- 页面 -->
+    <RouterView />
+  </div>
+</template>
+<style>
+:root {
+  --van-nav-bar-background: #0083CE !important;
+  --van-nav-bar-title-text-color: #FFFFFF !important;
+  --van-nav-bar-icon-color: #fff !important;
+  --van-grid-item-text-color: #111 !important;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  background: #F7F8FA;
+}
+</style>

package/template-vue-mobile/src/auto-components.d.ts

@@ -0,0 +1,24 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    Init: typeof import('./components/Init.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    VanButton: typeof import('vant/es')['Button']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanCheckbox: typeof import('vant/es')['Checkbox']
+    VanField: typeof import('vant/es')['Field']
+    VanForm: typeof import('vant/es')['Form']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanNavBar: typeof import('vant/es')['NavBar']
+    VanPopup: typeof import('vant/es')['Popup']
+    VanTabbar: typeof import('vant/es')['Tabbar']
+    VanTabbarItem: typeof import('vant/es')['TabbarItem']
+  }
+}