aliarmo · webbrain-one · Aug 6, 2026
diff --git a/README.es-ES.md b/README.es-ES.md
@@ -0,0 +1,108 @@
+
+
+## Conversión de sintaxis de plantillas Vue a sintaxis de mini programa
+Este compilador convierte la sintaxis de plantillas de Vue a la sintaxis de plantillas de mini programa, permitiéndote escribir mini programas utilizando la sintaxis de Vue.
+Por ejemplo: v-for se convierte en wx:for, y @click.stop="handler" se transforma en catchtap="handler"
+Al compilar y monitorear todos los archivos .vue del proyecto, genera los archivos .js、.wxml、.wxss、.json necesarios para el mini programa en el mismo directorio que los archivos .vue.
+Nota: **El código JavaScript dentro de script debe escribirse siguiendo las convenciones del mini programa, ya que no se incluye el runtime de Vue**
+
+## ¿Por qué se creó este compilador?
+1. Marcos como mpvue incorporan el runtime de Vue, lo que los hace pesados y muy intrusivos. Además, la capa lógica de los mini programas ya es similar a la de Vue, cumpliendo básicamente con las necesidades de desarrollo.
+2. Simplicidad: solo realiza la compilación. Basta con saber escribir plantillas de Vue.
+
+## Uso 1: Iniciar un nuevo proyecto
+1. npm i mini-vue-sugar -g
+2. sugar i o sugar init   // Generará un proyecto de mini programa por defecto llamado miniapp. También puedes especificar un nombre: sugar i my-project
+3. cd miniapp
+4. Escribe la plantilla, el JS y el estilo dentro de un archivo .vue, por ejemplo:
+    ```vue
+    <template>
+        <div>
+            <span v-for="(list,index) in lists" :key="index">{{list.title}}</span>
+
+            <p v-if="type==1"></p>
+            <p v-else-if="type==2"></p>
+            <p v-else></p>
+
+            <span v-show="isTrue></span>
+
+            <div class="header" :class="{active:isActive}">
+                <div>{{username}}</div>
+            </div>
+
+            <div :data-name="username" @click="onClick">
+                <div>{{password}}</div>
+            </div>
+
+            <TestComps @test="onTest">
+                <template v-slot>
+                    <div>我是默认slot</div>
+                </template>
+                <template #header>
+                    <div>我是header slot</div>
+                </template>
+            </TestComps>
+        </div>
+    </template>
+
+    <script>
+        import TestComps from './test.vue'    // **引入自定义组件，会自动生成json文件的usingComponents配置**
+        import TestComps from '/component/test1/test1.vue'
+
+        let app=getApp()
+        import utils from '../modules/utils'   // 引入模块js
+
+        // **注意js的写法还是按小程序的写法来写，编译器只做模板编译，不改变运行时**，除引入的自定义组件会被用于生成.json文件外，
+        // 其他的都不会变
+        Compoennt({
+            data() {
+                return {
+                username: "aliarmo",
+                password: "123"
+                };
+            }
+        });
+    </script>
+
+    <style>
+        .box {
+            color: #123123;
+            font-size: 12px;
+            width: 100px;
+            height: 200px;
+            margin: 20px;
+        }
+        .content {
+            display: inline-block;
+            padding: 12px;
+        }
+    </style>
+
+    ```
+5. sugar    // Compilará y monitoreará todos los archivos .vue, generando finalmente los archivos .js、.wxml、.wxss、.json necesarios para el mini programa en el mismo directorio que los .vue
+
+## Uso 2: Integrar en un proyecto existente
+1. npm i mini-vue-sugar -g
+2. Cambia al directorio del proyecto existente y ejecuta sugar
+3. Crea un nuevo archivo .vue, escribe la plantilla y la lógica de negocio. Al guardar, notarás que se generan automáticamente los archivos .js、.wxml、.wxss、.json necesarios para el mini programa
+
+## Principio de funcionamiento
+1. Lee secuencialmente cada archivo .vue y luego analiza template, script y style dentro del archivo.
+2. Para template, transforma las directivas y los bindings de eventos, y finalmente transforma los elementos para generar el archivo .wxml. Si ya existe un .wxml, lo sobrescribirá.
+3. Para script, analiza los componentes importados y genera el archivo de configuración .json necesario para el mini programa. Si ya existe un .json, realizará una fusión. Elimina el código de importación de componentes y genera el archivo .js. Si ya existe un archivo JS, lo sobrescribirá. Nota: **La sintaxis restante del script debe seguir las convenciones del mini programa, ya que no se incluye el runtime de Vue**
+4. Para style, genera directamente el archivo .wxss. Si ya existe un .wxss, lo sobrescribirá.
+5. Monitorea los cambios en los archivos .vue y repite los pasos 1-4.
+
+## Diferencias importantes
+1. v-bind:class="classObject"                // Ten en cuenta la diferencia: en la plataforma de mini programas, classObject se interpreta como una cadena con los nombres de clase específicos.
+2. v-bind:style="styleObject"                // Ten en cuenta la diferencia: en la plataforma de mini programas, styleObject se interpreta como una cadena con las propiedades de estilo específicas.
+3. El módulo script de los archivos .vue debe escribirse siguiendo las convenciones del mini programa, ya que no se incluye el runtime de Vue. Los componentes aún se importan mediante import; el compilador analizará los componentes importados y generará automáticamente la configuración usingComponents en el archivo .json.
+
+## Consejos
+1. Algunos podrían haber notado que el archivo .vue no es necesario al publicar el proyecto. ¿Se enviará este archivo? No hay de qué preocuparse, los archivos .vue no se empaquetarán ni se subirán mediante el IDE del mini programa.
+
+## Lista de tareas pendientes (TODO)
+1. Mejorar el formato de la plantilla de mini programa generada; actualmente quedan muchos espacios y saltos de línea.
+2. Añadir implementaciones para v-model y otros en el JS generado. Si lo necesitas, abre un issue y lo consideraré; aún hay mucho margen de mejora aquí.
+3. Convertir nombres de estilos de camelCase a separados por guiones (marginTop a margin-top).
+4. Considerar agregar soporte para v-bind:class="[activeClass, errorClass]".