diff --git a/README.es-ES.md b/README.es-ES.md new file mode 100644 index 0000000..db19b9d --- /dev/null +++ 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 + + + + + + + ``` +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]".