Manual de instrucciones de Playground para construir la biblioteca de componentes OpenTiny

1 Antecedentes de conocimiento

1.1 marco Vue

Un marco progresivo, es fácil de aprender y usar, y tiene un rendimiento excelente. ¡Ocupa el primer lugar entre los tres mejores marcos front-end promovidos en China!

1.2 Biblioteca de componentes OpenTiny

Ha evolucionado dentro de Huawei durante 9 años y ha respaldado el desarrollo y la entrega de miles de proyectos. Su conjunto de API es compatible con los marcos Vue2 y Vue3. Tiene más de 100 componentes, 6 conjuntos de temas, admite capacidades de internacionalización y es compatible con Vite. y entornos webpack ¡Desarrollado y construido!
Es una nueva biblioteca de componentes de la interfaz de usuario de Vue aportada por HUAWEI CLOUD a la comunidad de código abierto en 2022. El código está alojado en GitHub: https://github.com/opentiny/tiny-vue. ¡Bienvenido a Star y emita!
El paquete de instalación se lanza En el almacén público de Npm y en el almacén central interno de Huawei, cumple con el acuerdo de código abierto del MIT, ¡y todos pueden instalarlo y usarlo libremente!
Documentación del sitio web oficial de la biblioteca de componentes Opentiny: https://opentiny.design/tiny-vue

Figura 1 Introducción a Opentiny

1.3 zona de juegos de la biblioteca de componentes

La aplicación Playground es en realidad una página de vista previa de componentes en tiempo real. Por ejemplo, el sitio web oficial de Vue proporciona la función de "Vue Playground", enlace: https://play.vuejs.org/ , que proporciona convenientemente un entorno Vue mínimo que ¡Permita que los usuarios intenten escribir un código Vue y vean los resultados de la vista previa en tiempo real!

Construir 2.png
Figura 2 Representaciones oficiales del área de juegos de Vue

Admite varios archivos, admite Import Map la introducción de scripts de componentes de terceros, admite la edición de código en tiempo real, la compilación en tiempo real, la vista previa y el uso compartido de código. El patio de recreo de la biblioteca de componentes es crear una página de aplicación, que puede obtener una vista previa de los componentes de una determinada biblioteca de componentes en tiempo real, ¡a través de la cual puede comprender y probar rápidamente cada componente!

Componente Playground oficial de código abierto de Vue: @vue/repl, documento de referencia: https://github.com/vuejs/repl#readme .

2 Orientación sobre cómo construir un área de juegos para la biblioteca de componentes OpenTiny

El contenido de hoy es: crear un campo de exploración para la biblioteca de componentes OpenTiny. Esta tarea requiere que esté familiarizado con el front-end y tenga experiencia en el desarrollo de proyectos de Vue. El renderizado terminado es el siguiente:

Construir 3.png
Figura 3 Diagrama esquemático de la tarea de desafío

Consulte los siguientes pasos para completar esta tarea:

2.1 Crear un nuevo proyecto e instalar paquetes dependientes

Instale nodejs 16+, vscode y otras herramientas de front-end, y luego use vite para crear un proyecto vue javascript.

npm create vite@latest

Luego instale los componentes Playground y las dependencias de los componentes opentiny/vue

npm install  @vue/repl @opentiny/vue@3

Y asegúrese de consultar la documentación de instalación de opentiny/vue, https://opentiny.design/tiny-vue/zh-CN/os-theme/docs/installation para configurar el proyecto.
En la actualidad, todo el mundo ya tiene un proyecto vue estándar.Después de la instalación de npm, puede ejecutar npm dev para iniciar y ver un proyecto de muestra de vue.

Construir 4.png
Figura 4 Página inicial del nuevo proyecto de Vue

2.2 Crea la estructura de la página e introduce las variables requeridas

A continuación, elimine HelloWorld.vue. En main.js, elimine la referencia style.css. ¡Solo completamos todas las funciones en App.vue! La estructura de la página de App.vue es la siguiente:

<script setup>
import {
      
       reactive } from 'vue';
import {
      
       Repl, ReplStore, File } from '@vue/repl'
import CodeMirror from '@vue/repl/codemirror-editor'
import '@vue/repl/dist/style.css'

import {
      
       Switch as TinySwitch, ButtonGroup as TinyButtonGroup, Select as TinySelect, Option as TinyOption, Modal } from '@opentiny/vue'
import {
      
       IconShare as TinyIconShare } from "@opentiny/vue-icon"

// 将在此处补充逻辑代码

</script>

<template>

<div>将在此处补充模板代码</div>
 
</template>

<style>
 * {
      
        box-sizing: border-box;}
.header {
      
      
  height: 36px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: solid 1px #e1e1e1;
}
.vue-repl {
      
        height: calc(100vh - 36px - 16px) !important;}
.header > div {
      
        vertical-align: middle;}
.title {
      
        font-size: 20px;}
.ml20 {
      
        margin-left: 20px;}
</style>

2.3 Desarrollar funciones superiores

La plantilla de la aplicación se divide en partes superior e inferior, la parte superior es el logotipo del título y un conjunto de funciones de selección y botones para compartir. La siguiente parte es un <Repl>componente. Desarrollemos primero la función top, su <template>código es el siguiente:

<div class="header">
    <div class="title">
      <img src="./assets/opentiny-logo.svg" /> <span>OpenTiny Vue 演练场</span>
    </div>
    <div>
      <span class="ml20">
        显示编译输出: <tiny-switch v-model="state.showCompileOutput" />
      </span>
      <span class="ml20">
        显示ImportMap: <tiny-switch v-model="state.showImportMap" />
      </span>
      <span class="ml20">
        布局方向: <tiny-button-group :data="state.layoutOptions" v-model="state.layout"></tiny-button-group>
      </span>
      <span class="ml20">
        版本: <tiny-select v-model="state.selectVersion" style="width:150px">
          <tiny-option v-for="item in state.versions" :key="item.value" :label="'opentiny/vue@' + item.value"
            :value="item.value">
          </tiny-option>
        </tiny-select>
      </span>
      <icon-share style="font-size: 16px;margin:0 20px; cursor: pointer;" />
    </div>
  </div>

Se ha enlazado un conjunto de datos y métodos en la plantilla. A continuación, debemos agregar estos contenidos a <script>la sección.

const iconShare = TinyIconShare()

const state = reactive({
    
    
  // repl 属性
  showCompileOutput: true,
  showImportMap: true,
  layout: 'horizon',
  layoutOptions: [{
    
     value: 'horizon', text: "水平" }, {
    
     value: 'vertical', text: "垂直" }],
  // 版本切换
  versions: [{
    
     value: "3.8.0" }, {
    
     value: "3.8.1" }, {
    
     value: "3.8.2" }, {
    
     value: "3.8.3" }, {
    
     value: "3.8.4" }],
  selectVersion: "3.8.4"
})

En este punto, deberíamos poder obtener la siguiente aplicación: el interruptor de visualización superior y la dirección del diseño están vinculados a 3 variables, ¡pero las funciones de selección de versión y uso compartido aún no se han desarrollado!

Construir 5.png
Representaciones de la función superior de la Figura 5

★ ¡Después de este paso, hemos aprendido cómo usar los componentes de @opentiny/vue fácilmente!

2.4 Desarrollar `<Repl>`componentes para realizar una vista previa del script

Primero, en la plantilla, introduzca la etiqueta Repl y vincule las 3 variables anteriores y la variable ReplStore. Agregue las siguientes etiquetas debajo de la estructura del encabezado:

  <Repl :store="store" :editor="CodeMirror" :show-compile-output="state.showCompileOutput" :show-import-map="state.showImportMap"
    :previewOptions="state.previewOptions" :clear-console="false" :layout="state.layout"></Repl>

La variable store y state.previewOptions se usan aquí, así que en <script>la sección, agregue estas 2 variables:

// repl组件需要store管理状态
const store = new ReplStore({
    
    
  showOutput: true,
  outputMode: "preview"
});

const state = reactive({
    
    
  // 加入这一句
    previewOptions: {
    
     headHTML: '' },
})

En este punto, obtenemos un prototipo de un patio de recreo que se puede vincular: escribe el código a la derecha, la vista previa en tiempo real a la izquierda, opera las funciones en la parte superior y el área responde. La interfaz es la siguiente:

Construir 6.png

Representaciones de componentes de la Figura 6

★ ¡Después de este paso, hemos aprendido a usar los componentes!

2.5 Realizar cambio de versión

Cambiar de versión es cambiar la secuencia de comandos importMap a la que hace referencia el componente repl para lograr una @opentiny/vueversión cambiada dinámicamente. ¡Actualmente ha lanzado 5 versiones, incluidas 3.8.0 ~ 3.8.4! En <script>, agregue el siguiente script:

const createImportMap = (version) => {
    
    
  return {
    
    
    imports: {
    
    
      "@opentiny/vue": `https://unpkg.com/@opentiny/vue@${
      
      version}/runtime/tiny-vue.mjs`,
      "@opentiny/vue-icon": `https://unpkg.com/@opentiny/vue@${
      
      version}/runtime/tiny-vue-icon.mjs`,
      "@opentiny/vue-locale": `https://unpkg.com/@opentiny/vue@${
      
      version}/runtime/tiny-vue-locale.mjs`,
      "@opentiny/vue-common": `https://unpkg.com/@opentiny/vue@${
      
      version}/runtime/tiny-vue-common.mjs`
    }
  }
};

function versionChange(version) {
    
    
  const importMap = createImportMap(version)
  store.setImportMap(importMap);
  state.previewOptions.headHTML = `<link rel="stylesheet" href="https://unpkg.com/@opentiny/vue-theme@${
      
      version}/index.css">`
}

Escribimos la función versionChange y la vinculamos al evento de cambio de la plantilla anterior, de modo que después de los cambios del menú desplegable, ¡la tienda recibirá una notificación para establecer una nueva dirección de mapa de importación!
Ahora, después de cambiar la versión, puede ver a través de la herramienta de desarrollo que solicitará de inmediato cada paquete de secuencias de comandos en tiempo de ejecución de la versión correspondiente de @opentiny/vue.

★ ¡Después de este paso, hemos aprendido el enlace de eventos del componente Tiny-Select y la configuración de la variable importMap de la tienda!

2.6 Darse cuenta de compartir código

El componente Repl admite código compartido. Su principio es: el objeto de almacenamiento serializa el estado interno en codificación base64 y lo coloca en el hash de la URL para compartirlo con otros. Cuando se carga la página, si encuentra que el hash tiene contenido, sabrá que este es el estado de la tienda, páselo a la tienda y la tienda lo deserializará internamente.
Cuando compartimos la aplicación, necesitamos registrar el número de versión de la biblioteca de componentes y el estado de la tienda, por lo que planeamos usar hash para guardar la versión y el valor base64 al mismo tiempo: 3.8.4|eNqIVV9p…

const hash = location.hash.slice(1)
// shareData数组如果有2项，则表明是分享链接，否则是非分享页面
const shareData = hash.split('|')

const store = new ReplStore({
    
    
  // 添加下面一行
  serializedState: shareData.length == 2 ? shareData[1] : '',
  showOutput: true,
  outputMode: "preview"
});

const state = reactive({
    
    
  // 修改下面这一行
  selectVersion: shareData.length == 2 ? shareData[0] : "3.8.4"
})

// 分享链接和非分享链接的逻辑不同，此处判断一下
if (shareData.length == 2) {
    
    
  versionChange(shareData[0])
} else {
    
    
  versionChange('3.8.4')
}

// 生成分享链接
function share() {
    
    
  const hash = store.serialize().slice(1)
  const shareUrl = location.origin + '#' + state.selectVersion + '|' + hash

  navigator.clipboard.writeText(shareUrl);
  Modal.alert(`已复制分享链接`, '分享成功')
}

Vincule la función de compartir al evento de clic del icono de compartir en la plantilla, de modo que al hacer clic en el icono se copie el enlace al portapapeles y luego se abra una nueva pestaña para acceder al enlace de compartir.
En la nueva página abierta en el enlace compartido, el hash actual tiene una cadena muy larga, por lo que shareData se analiza en el valor serializado de la versión y la tienda, por lo que el contenido de shareData[1] se asigna a la tienda, y esto se logra La función de compartir está habilitada, ¡prueba a ver si funciona!

★ ¡Después de este paso, hemos aprendido el diseño de la función de compartir y la serialización de la tienda!

2.7 Probar la biblioteca de componentes @opentiny/vue

El siguiente es un ejemplo del uso de la biblioteca de componentes @opentiny/vue, cópielo en la ventana de la aplicación y modifique el script para verificar que la función sea correcta. Haga clic en el botón compartir y copie a otras pestañas para ver si el contenido se comparte.

<script setup>
import {
      
       reactive } from "vue"
import {
      
       Button as TinyButton, Alert as TinyAlert, Numeric as TinyNumeric, Slider as TinySlider, Select as TinySelect, Option as TinyOption, Modal } from "@opentiny/vue"

const state = reactive({
      
      
  value: 42,
  selectValue: "",
  options: [
    {
      
       value: '选项1', label: '黄金糕' },
    {
      
       value: '选项2', label: '双皮奶' },
    {
      
       value: '选项3', label: '蚵仔煎' },
    {
      
       value: '选项4', label: '龙须面' },
    {
      
       value: '选项5', label: '北京烤鸭' }
  ],
})

function showValue() {
      
      
  Modal.alert(`当前值: ${ 
        state.value} \n 当前下拉框值: ${ 
        state.selectValue}`, '标题')
}
</script>
<template>
  <div class="mb20">Alert 演示</div>
  <div class="mb20">
    <tiny-alert description="type 为默认值 success"></tiny-alert>
    <tiny-alert type="error" description="type 为 error"></tiny-alert>
    <tiny-alert type="info" description="type 为 info"></tiny-alert>
    <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
  </div>
  <div class="mb20">组件 演示</div>
  <div class="mb20">
    <tiny-numeric v-model="state.value"></tiny-numeric>
    <tiny-slider v-model="state.value"></tiny-slider>
    下拉选择框：<tiny-select v-model="state.selectValue" placeholder="请选择">
      <tiny-option v-for="item in state.options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
    </tiny-select>
  </div>
  <div>
    <tiny-button @click="showValue">显示当前值</tiny-button>
  </div>
</template>

<style>
div .tiny-select {
      
      
  width: 200px;
}

.mb20 {
      
      
  margin-bottom: 20px;
}
</style>

Acerca de OpenTiny

OpenTiny es una solución de biblioteca de componentes de nivel empresarial producida por HUAWEI CLOUD. Se adapta a múltiples terminales, como PC/móviles, cubre pilas multitecnología Vue2/Vue3/Angular y tiene mejoras de eficiencia como sistema de configuración de temas/plantilla de fondo medio Línea de comando /CLI Herramientas que ayudan a los desarrolladores a desarrollar aplicaciones web de manera eficiente.

Aspectos destacados principales:

跨端跨框架: Al usar la arquitectura de diseño de componentes sin procesamiento Renderless, un conjunto de códigos admite Vue2/Vue3, PC/móvil al mismo tiempo, y admite la personalización de la lógica a nivel de función y el reemplazo completo de la plantilla, con buena flexibilidad y sólidas capacidades de desarrollo secundario.
组件丰富: Hay más de 80 componentes en el lado de la PC y más de 30 componentes en el lado móvil, incluidos los componentes de alta frecuencia Table, Tree, Select, etc., con desplazamiento virtual incorporado para garantizar una experiencia fluida en escenarios de big data. Además de los componentes comunes en la industria, también proporcionamos algunos componentes de características únicas, como: divisor de panel dividido, cuadro de entrada de dirección IP de dirección IP, calendario de calendario, recorte de imagen recortada, etc.
配置式组件: El componente admite métodos de plantilla y configuración, adecuados para plataformas de código bajo. Actualmente, el equipo ha integrado OpenTiny en la plataforma interna de código bajo y ha realizado muchas optimizaciones para plataformas de código bajo.
周边生态齐全: proporciona una biblioteca de componentes TinyNG basada en Angular + TypeScript, una plantilla de fondo medio TinyPro con más de 10 funciones prácticas y más de 20 páginas típicas, una herramienta de ingeniería TinyCLI que cubre todo el proceso de desarrollo front-end y una poderosa plataforma de configuración de temas en línea Tema pequeño

Contáctenos:

Número público oficial:OpenTiny
Sitio web oficial de OpenTiny : opentiny.design/
Repositorio de código OpenTiny : github.com/opentiny/
Biblioteca de componentes de Vue : github.com/opentiny/ti… (Bienvenida Estrella)
Biblioteca de componentes de Angluar : github.com/opentiny/ng (Welcome Star)
Herramienta CLI : github.com/opentiny/ti… (Estrella de bienvenida)