nativescript-web-adapter 0.1.1 → 0.1.3

package/core/composables/useFrame.ts

@@ -0,0 +1,25 @@
+import { Ref, ref } from 'vue';
+
+export interface FrameState {
+  stack: Ref<any[]>;
+  push: (page: any) => void;
+  pop: () => any;
+}
+
+export function useFrame(): FrameState {
+  const stack = ref<any[]>([]);
+  
+  function push(page: any) {
+    stack.value.push(page);
+  }
+  
+  function pop() {
+    return stack.value.pop();
+  }
+
+  return {
+    stack,
+    push,
+    pop
+  };
+}

package/core/composables/usePage.js

@@ -0,0 +1,8 @@
+import { ref } from 'vue';
+
+export function usePage() {
+  const isVisible = ref(true);
+  function show() { isVisible.value = true; }
+  function hide() { isVisible.value = false; }
+  return { isVisible, show, hide };
+}

package/core/composables/usePage.ts

@@ -0,0 +1,25 @@
+import { Ref, ref } from 'vue';
+
+export interface PageState {
+  isVisible: Ref<boolean>;
+  show: () => void;
+  hide: () => void;
+}
+
+export function usePage(): PageState {
+  const isVisible = ref(true);
+  
+  function show() {
+    isVisible.value = true;
+  }
+  
+  function hide() {
+    isVisible.value = false;
+  }
+
+  return {
+    isVisible,
+    show,
+    hide
+  };
+}

package/core/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/core/index.js

@@ -0,0 +1,4 @@
+import * as components from './components/index.js';
+import * as composables from './composables/index.js';
+
+export { components, composables };

package/core/index.ts

@@ -0,0 +1,85 @@
+// Explicitly collect components and composables into objects so consumers
+// can reference `core.components` and `core.composables` at runtime.
+import ActionBar from './components/ActionBar.vue';
+import Page from './components/Page.vue';
+import Frame from './components/Frame.vue';
+import StackLayout from './components/StackLayout.vue';
+import GridLayout from './components/GridLayout.vue';
+import FlexboxLayout from './components/FlexboxLayout.vue';
+import WrapLayout from './components/WrapLayout.vue';
+import ScrollView from './components/ScrollView.vue';
+import Label from './components/Label.vue';
+import Button from './components/Button.vue';
+import Image from './components/Image.vue';
+import HtmlView from './components/HtmlView.vue';
+import ImageCacheIt from './components/ImageCacheIt.vue';
+import TabView from './components/TabView.vue';
+import TabViewItem from './components/TabViewItem.vue';
+import RootLayout from './components/RootLayout.vue';
+import DockLayout from './components/DockLayout.vue';
+import AbsoluteLayout from './components/AbsoluteLayout.vue';
+import ActionItem from './components/ActionItem.vue';
+import NavigationButton from './components/NavigationButton.vue';
+import ActivityIndicator from './components/ActivityIndicator.vue';
+import DatePicker from './components/DatePicker.vue';
+import TimePicker from './components/TimePicker.vue';
+import ListPicker from './components/ListPicker.vue';
+import ListView from './components/ListView.vue';
+import Placeholder from './components/Placeholder.vue';
+import Progress from './components/Progress.vue';
+import SearchBar from './components/SearchBar.vue';
+import SegmentedBar from './components/SegmentedBar.vue';
+import SegmentedBarItem from './components/SegmentedBarItem.vue';
+import Slider from './components/Slider.vue';
+import SwitchComp from './components/Switch.vue';
+import TextField from './components/TextField.vue';
+import TextView from './components/TextView.vue';
+import WebView from './components/WebView.vue';
+
+export const components = {
+	ActionBar,
+	Page,
+	Frame,
+	StackLayout,
+	GridLayout,
+	FlexboxLayout,
+	WrapLayout,
+	ScrollView,
+	Label,
+	Button,
+	Image,
+	HtmlView,
+	ImageCacheIt,
+	TabView,
+	TabViewItem,
+  RootLayout,
+  DockLayout,
+  AbsoluteLayout,
+  ActionItem,
+  NavigationButton,
+  ActivityIndicator,
+  DatePicker,
+  TimePicker,
+  ListPicker,
+  ListView,
+  Placeholder,
+  Progress,
+  SearchBar,
+  SegmentedBar,
+  SegmentedBarItem,
+  Slider,
+  Switch: SwitchComp,
+  TextField,
+  TextView,
+  WebView,
+};
+
+import * as composablesNS from './composables';
+export const composables = composablesNS;
+
+// Re-export types for convenience
+export * from './types';
+
+// Also provide the original named exports for compatibility
+export { ActionBar, Page, Frame, StackLayout, GridLayout, FlexboxLayout, WrapLayout, ScrollView, Label, Button, Image, HtmlView, ImageCacheIt, TabView, TabViewItem };
+export { RootLayout, DockLayout, AbsoluteLayout, ActionItem, NavigationButton, ActivityIndicator, DatePicker, TimePicker, ListPicker, ListView, Placeholder, Progress, SearchBar, SegmentedBar, SegmentedBarItem, Slider, SwitchComp as Switch, TextField, TextView, WebView };

package/core/types.ts

@@ -0,0 +1,12 @@
+import type { DefineComponent } from 'vue';
+import type { FrameState } from './composables/useFrame';
+import type { PageState } from './composables/usePage';
+import type { ActionBarState } from './composables/useActionBar';
+
+// 重新导出Vue组件类型
+export type ActionBarComponent = DefineComponent;
+export type PageComponent = DefineComponent;
+export type FrameComponent = DefineComponent;
+
+// 重新导出composables类型
+export type { FrameState, PageState, ActionBarState };

package/dist/nativescript-web-adapter.es.js

@@ -0,0 +1,83 @@
+import { defineComponent as r, createElementBlock as s, openBlock as c, renderSlot as a, ref as u } from "vue";
+const f = { class: "ns-actionbar" }, p = /* @__PURE__ */ r({
+  name: "ActionBar",
+  __name: "ActionBar",
+  setup(e) {
+    return (t, o) => (c(), s("header", f, [
+      a(t.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), _ = (e, t) => {
+  const o = e.__vccOpts || e;
+  for (const [n, d] of t)
+    o[n] = d;
+  return o;
+}, m = /* @__PURE__ */ _(p, [["__scopeId", "data-v-f29dfd84"]]), v = { class: "ns-page" }, b = /* @__PURE__ */ r({
+  name: "Page",
+  __name: "Page",
+  setup(e) {
+    return (t, o) => (c(), s("div", v, [
+      a(t.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), g = /* @__PURE__ */ _(b, [["__scopeId", "data-v-87719fa5"]]), h = { class: "ns-frame" }, $ = /* @__PURE__ */ r({
+  name: "Frame",
+  __name: "Frame",
+  setup(e) {
+    return (t, o) => (c(), s("div", h, [
+      a(t.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), O = /* @__PURE__ */ _($, [["__scopeId", "data-v-a66356e7"]]), i = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ActionBar: m,
+  Frame: O,
+  Page: g
+}, Symbol.toStringTag, { value: "Module" }));
+function P() {
+  const e = u("");
+  function t(o) {
+    e.value = o;
+  }
+  return { title: e, setTitle: t };
+}
+function j() {
+  const e = u(!0);
+  function t() {
+    e.value = !0;
+  }
+  function o() {
+    e.value = !1;
+  }
+  return { isVisible: e, show: t, hide: o };
+}
+function y() {
+  const e = u([]);
+  function t(n) {
+    e.value.push(n);
+  }
+  function o() {
+    return e.value.pop();
+  }
+  return { stack: e, push: t, pop: o };
+}
+const l = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  useActionBar: P,
+  useFrame: y,
+  usePage: j
+}, Symbol.toStringTag, { value: "Module" })), x = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  components: i,
+  composables: l
+}, Symbol.toStringTag, { value: "Module" })), B = {
+  install(e) {
+    Object.entries(i || {}).forEach(([t, o]) => {
+      e.component(t, o);
+    }), e.config.globalProperties.$ns = l || {};
+  }
+};
+export {
+  x as core,
+  B as default
+};

package/dist/nativescript-web-adapter.umd.js

@@ -0,0 +1 @@
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.NativeScriptWebAdapter={},r.Vue))})(this,function(r,e){"use strict";const l={class:"ns-actionbar"},_=e.defineComponent({name:"ActionBar",__name:"ActionBar",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("header",l,[e.renderSlot(n.$slots,"default",{},void 0,!0)]))}}),c=(t,n)=>{const o=t.__vccOpts||t;for(const[s,$]of n)o[s]=$;return o},u=c(_,[["__scopeId","data-v-f29dfd84"]]),d={class:"ns-page"},f=c(e.defineComponent({name:"Page",__name:"Page",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("div",d,[e.renderSlot(n.$slots,"default",{},void 0,!0)]))}}),[["__scopeId","data-v-87719fa5"]]),p={class:"ns-frame"},a=Object.freeze(Object.defineProperty({__proto__:null,ActionBar:u,Frame:c(e.defineComponent({name:"Frame",__name:"Frame",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(n.$slots,"default",{},void 0,!0)]))}}),[["__scopeId","data-v-a66356e7"]]),Page:f},Symbol.toStringTag,{value:"Module"}));function m(){const t=e.ref("");function n(o){t.value=o}return{title:t,setTitle:n}}function b(){const t=e.ref(!0);function n(){t.value=!0}function o(){t.value=!1}return{isVisible:t,show:n,hide:o}}function g(){const t=e.ref([]);function n(s){t.value.push(s)}function o(){return t.value.pop()}return{stack:t,push:n,pop:o}}const i=Object.freeze(Object.defineProperty({__proto__:null,useActionBar:m,useFrame:g,usePage:b},Symbol.toStringTag,{value:"Module"})),h=Object.freeze(Object.defineProperty({__proto__:null,components:a,composables:i},Symbol.toStringTag,{value:"Module"})),S={install(t){Object.entries(a||{}).forEach(([n,o])=>{t.component(n,o)}),t.config.globalProperties.$ns=i||{}}};r.core=h,r.default=S,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -0,0 +1 @@
+.ns-actionbar[data-v-f29dfd84]{background:#1f1140;color:#fff;padding:12px}.ns-page[data-v-87719fa5]{top:0;left:0;position:absolute;width:100%;min-height:100%;padding:0}

package/package.json

@@ -1,59 +1,47 @@
 {
   "name": "nativescript-web-adapter",
-  "version": "0.1.1",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ponzS/NativeScript-for-web.git"
-  },
-  "bugs": {
-    "url": "https://github.com/ponzS/NativeScript-for-web/issues"
-  },
-  "homepage": "https://github.com/ponzS/NativeScript-for-web#readme",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "description": "Web adapter for NativeScript UI components (Vue 3)",
-  "license": "MIT",
+  "version": "0.1.3",
+  "description": "Web adapter for NativeScript applications",
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
+  "main": "./dist/nativescript-web-adapter.umd.js",
+  "module": "./dist/nativescript-web-adapter.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/types/index.d.ts"
-    },
-    "./vue": {
-      "import": "./dist/vue.js",
-      "require": "./dist/vue.cjs",
-      "types": "./dist/types/vue.d.ts"
-    },
-    "./core": {
-      "import": "./dist/core.js",
-      "require": "./dist/core.cjs",
-      "types": "./dist/types/core/index.d.ts"
+      "import": "./dist/nativescript-web-adapter.es.js",
+      "require": "./dist/nativescript-web-adapter.umd.js",
+      "types": "./dist/index.d.ts"
     }
   },
   "scripts": {
-    "build": "rimraf dist && rollup -c",
-    "types": "tsc -p tsconfig.json",
-    "test": "vitest run",
-    "dev": "vitest",
-    "prepare": "npm run build && npm run types",
-    "prepublishOnly": "npm run build && npm run types"
+    "create:web": "node tools/create-web-platform.cjs",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build"
   },
-  "peerDependencies": {
-    "vue": "^3.4.0"
+  "bin": {
+    "ns-web": "./tools/cli.cjs"
+  },
+  "files": [
+    "dist",
+    "tools",
+    "templates",
+    "core"
+  ],
+  "dependencies": {
+    "vue": "^3.4.0",
+    "commander": "^11.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^11.1.6",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.22.0",
-    "rollup-plugin-dts": "^6.0.2",
-    "tslib": "^2.6.3",
-    "typescript": "~5.9.0",
-    "vitest": "^2.0.5"
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0",
+    "vue-tsc": "^1.8.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
   }
 }

package/tools/cli.cjs

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+const { program } = require('commander');
+const { createWebPlatform } = require('./create-web-platform.cjs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+program
+  .name('ns-web')
+  .description('CLI工具用于创建和管理NativeScript应用的web平台')
+  .version('1.0.0');
+
+program
+  .command('init')
+  .description('为NativeScript项目初始化web平台支持')
+  .action(async () => {
+    await createWebPlatform();
+  });
+
+program
+  .command('build')
+  .description('生成web平台并在 platforms/web 内构建')
+  .option('--skip-install', '跳过依赖安装')
+  .action(async (opts) => {
+    await createWebPlatform();
+    const webDir = path.join(process.cwd(), 'platforms', 'web');
+    if (!opts.skipInstall) {
+      execSync('npm install', { stdio: 'inherit', cwd: webDir });
+    }
+    execSync('npm run build', { stdio: 'inherit', cwd: webDir });
+  });
+
+program
+  .command('dev')
+  .description('生成web平台并在 platforms/web 内启动开发服务器')
+  .option('--skip-install', '跳过依赖安装')
+  .action(async (opts) => {
+    await createWebPlatform();
+    const webDir = path.join(process.cwd(), 'platforms', 'web');
+    if (!opts.skipInstall) {
+      execSync('npm install', { stdio: 'inherit', cwd: webDir });
+    }
+    execSync('npm run dev', { stdio: 'inherit', cwd: webDir });
+  });
+
+program.parse();

package/tools/create-web-platform.cjs

@@ -0,0 +1,76 @@
+console.log('[web-adapter] create-web-platform.cjs 脚本已启动');
+const fs = require('fs');
+const path = require('path');
+
+// 模块入口（全部实现下沉到 modules/*）
+const copy = require('./modules/copy.cjs');
+const transform = require('./modules/transform.cjs');
+const routerGen = require('./modules/router.cjs');
+const appPatch = require('./modules/appPatch.cjs');
+const templates = require('./modules/templates.cjs');
+
+function createWebPlatform(options = {}) {
+  const adapterDir = path.resolve(__dirname, '..');
+  // 当作为 node_modules 使用时，项目根应为当前工作目录
+  const projectRoot = options.projectRoot ? path.resolve(options.projectRoot) : process.cwd();
+  const platformsDir = path.join(projectRoot, 'platforms');
+  const webDir = path.join(platformsDir, 'web');
+  const srcDir = path.join(projectRoot, 'src');
+
+  console.log('[web-adapter] 项目根目录:', projectRoot);
+  console.log('[web-adapter] platforms 目录:', platformsDir);
+  console.log('[web-adapter] web 目录:', webDir);
+  console.log('[web-adapter] src 目录:', srcDir);
+
+  try {
+    if (!fs.existsSync(webDir)) {
+      fs.mkdirSync(webDir, { recursive: true });
+      console.log('[web-adapter] 已创建 web 目录');
+    } else {
+      console.log('[web-adapter] web 目录已存在');
+    }
+
+    // 1) 复制源码（仅脚本层转换，保留模板标签）
+    copy.copySourceFiles(srcDir, path.join(webDir, 'src'), transform.transformContent);
+    console.log('[web-adapter] 已复制 src 源代码');
+
+    // 2) 复制适配器 web 组件与 composables
+    const adapterComponentsDir = path.join(adapterDir, 'core', 'components');
+    const targetComponentsDir = path.join(webDir, 'src', 'components', 'websfc');
+    copy.copyAdapterComponents(adapterComponentsDir, targetComponentsDir);
+    console.log('[web-adapter] 已复制适配器组件到 websfc');
+
+    const adapterComposablesDir = path.join(adapterDir, 'core', 'composables');
+    const targetComposablesDir = path.join(webDir, 'src', 'composables', 'websfc');
+    copy.copyAdapterComposables(adapterComposablesDir, targetComposablesDir);
+    console.log('[web-adapter] 已复制适配器 composables 到 websfc');
+
+    // 3) 写入 web 项目模板（index.html、package.json、vite.config、postcss、tailwind、App.vue）
+    templates.createWebPlatformFiles(webDir);
+    console.log('[web-adapter] 已生成 web 平台模板与配置');
+
+    // 4) 生成路由（根据 pages 目录）
+    const routerDirPath = path.join(webDir, 'src', 'router');
+    if (!fs.existsSync(routerDirPath)) {
+      fs.mkdirSync(routerDirPath, { recursive: true });
+    }
+    const routerContent = routerGen.buildRouterFromPages(webDir);
+    fs.writeFileSync(path.join(routerDirPath, 'index.ts'), routerContent, 'utf8');
+    console.log('[web-adapter] 已创建路由配置');
+
+    // 5) 修补 app.ts：注册所有 Web 适配组件并挂载应用
+    appPatch.patchAppForWeb(webDir);
+    console.log('[web-adapter] 正在安装依赖项...');
+
+    // 如需安装依赖，可在此调用（默认跳过以加快生成速度）
+    // installDependencies(webDir);
+  } catch (err) {
+    console.error('[web-adapter] 生成 web 平台时出错:', err);
+  }
+}
+
+module.exports = { createWebPlatform };
+
+if (require.main === module) {
+  createWebPlatform();
+}

package/tools/create-web-platform.js

@@ -0,0 +1,196 @@
+// 文件扩展名应为 .cjs 以兼容 CommonJS require
+
+const fs = require('fs');
+const path = require('path');
+
+// CommonJS export will be set at the end of the file
+function createWebPlatform(options = {}) {
+  const cwd = process.cwd();
+  const platformsDir = path.join(cwd, 'platforms');
+  const webDir = path.join(platformsDir, 'web');
+  const srcDir = path.join(cwd, 'src');
+  
+  // 确保platforms/web目录存在
+  if (!fs.existsSync(webDir)) {
+    fs.mkdirSync(webDir, { recursive: true });
+  }
+
+  // 复制源代码到web平台
+  copySourceFiles(srcDir, path.join(webDir, 'src'));
+  // 复制适配器的 composables 到 web 项目的 src/composables/websfc
+  try {
+    const adapterComposablesDir = path.join(__dirname, '..', 'core', 'composables');
+    const targetComposablesDir = path.join(webDir, 'src', 'composables', 'websfc');
+    copyAdapterDir(adapterComposablesDir, targetComposablesDir);
+  } catch (err) {
+    console.warn('[web-adapter] 复制适配器 composables 失败:', err);
+  }
+  
+  // 创建web平台特定的文件
+  createWebPlatformFiles(webDir);
+  
+  // 安装依赖
+  installDependencies(webDir);
+}
+
+function copyAdapterDir(srcDir, destDir) {
+  if (!fs.existsSync(srcDir)) {
+    // no composables to copy
+    return;
+  }
+  if (!fs.existsSync(destDir)) {
+    fs.mkdirSync(destDir, { recursive: true });
+  }
+  const entries = fs.readdirSync(srcDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path.join(srcDir, entry.name);
+    const destPath = path.join(destDir, entry.name);
+    if (entry.isDirectory()) {
+      copyAdapterDir(srcPath, destPath);
+    } else {
+      try {
+        fs.copyFileSync(srcPath, destPath);
+      } catch (err) {
+        console.error('[web-adapter] 复制文件失败:', srcPath, err);
+      }
+    }
+  }
+}
+
+function copySourceFiles(src, dest) {
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copySourceFiles(srcPath, destPath);
+    } else {
+      // 转换并复制文件
+      let content = fs.readFileSync(srcPath, 'utf8');
+      content = transformContent(content);
+      fs.writeFileSync(destPath, content);
+    }
+  }
+}
+
+function transformContent(content) {
+  // 将nativescript特定的导入替换为web版本
+  content = content.replace(/from\s+['"](nativescript-vue)['"]/g, "from 'vue'");
+  content = content.replace(/from\s+['"]([@]nativescript\/core)['"]/g, "from 'nativescript-web-adapter'");
+  
+  // 移除registerElement调用
+  content = content.replace(/registerElement\([^)]+\);?\n?/g, '// registerElement removed for web\n');
+  
+  // 移除平台特定代码
+  if (content.includes('__ANDROID__') || content.includes('Application.launchEvent')) {
+    content = content.replace(/Application\.on[\s\S]*?}\);/g, '');
+  }
+  
+  return content;
+}
+
+function createWebPlatformFiles(webDir) {
+  // 创建index.html
+  const indexHtml = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NS Vue Web</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/app.ts"></script>
+  </body>
+</html>`;
+
+  fs.writeFileSync(path.join(webDir, 'index.html'), indexHtml);
+
+  // 创建web平台的package.json
+  const packageJson = {
+    name: "ns-vue-web-platform",
+    private: true,
+    scripts: {
+      dev: "vite",
+      build: "vite build"
+    },
+    dependencies: {
+      "vue": "^3.4.0",
+      "nativescript-web-adapter": "file:../../nativescript-web-adapter"
+    },
+    devDependencies: {
+      "@vitejs/plugin-vue": "^5.0.0",
+      "typescript": "^5.0.0",
+      "vite": "^5.0.0",
+      "autoprefixer": "^10.4.16",
+      "postcss": "^8.4.31",
+      "tailwindcss": "^3.4.0"
+    }
+  };
+
+  fs.writeFileSync(
+    path.join(webDir, 'package.json'),
+    JSON.stringify(packageJson, null, 2)
+  );
+
+  // 创建vite.config.ts（设置 dev server 端口为 3005，避免冲突）
+  const viteConfig = `import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@nativescript/core': 'nativescript-web-adapter'
+    }
+  },
+  server: {
+    port: 3005,
+    strictPort: true
+  }
+});`;
+
+  fs.writeFileSync(path.join(webDir, 'vite.config.ts'), viteConfig);
+
+  // 创建postcss.config.js
+  const postcssConfig = `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};`;
+
+  fs.writeFileSync(path.join(webDir, 'postcss.config.js'), postcssConfig);
+
+  // 创建tailwind.config.js
+  const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};`;
+
+  fs.writeFileSync(path.join(webDir, 'tailwind.config.js'), tailwindConfig);
+}
+
+function installDependencies(webDir) {
+  const { execSync } = require('child_process');
+  execSync('npm install', { cwd: webDir, stdio: 'inherit' });
+}
+
+module.exports = {
+  createWebPlatform
+};