Convención de nomenclatura de código de desarrollo front-end

Nota: Los siguientes son los materiales y especificaciones utilizados en el desarrollo real. Se mantienen aquí y continuarán mejorando el contenido. Al mismo tiempo, ¡bienvenido a agregar!

1. Convenciones de desarrollo y nomenclatura

• acuerdo

  • El archivo debe agregar una explicación de encabezado para resumir las funciones principales del archivo actual
  • Si la interfaz de usuario o el contenido del mismo contenido se usa más de 2 veces, debe empaquetarse en un componente
  • Si los datos temporales son demasiado largos, debe crear un nuevo js para colocar los datos temporales, como data.js de la página actual
  • Asegúrese de realizar la verificación de eslint antes de enviar el código y elimine la salida de la consola usted mismo para mantener el código limpio.
  • El proyecto adopta la forma de carga diferida, agregue elemento, eachrt y otros valores de exportación dependientes usted mismo
  • El diseño del proyecto debe usar el diseño flexible como el principal método de escritura tanto como sea posible, y usar menos o tratar de no usar métodos de posicionamiento absolutos y otros.
  • Use las operaciones avanzadas de ES tanto como sea posible al codificar, como filtrar, reducir, algunas, todas

• Controlar mostrar y ocultar comenzar con show como: showOpenDialog

• El juicio condicional comienza con is, como: si es un administrador isAdmin | si es Open o no

• Los eventos comienzan con identificador, como @cambiar @input y otros eventos, excepto @click

• El formulario termina con formulario, como tagForm

• La matriz comienza con una lista, como listTag

• La colección de objetos comienza con obj, como objTag

• v-for loop, está prohibido nombrar el elemento y el índice, debe nombrarse como la abreviatura del contenido del bucle actual, como: tagItem, tagIndex

• Un campo separado, comenzando con curr tanto como sea posible, como: búsqueda actual currSearch | entrada activa actual currActive

• Para variables temporales en funciones de método, intente comenzar con temp, como: tempName | tempListValue

• Al hacer referencia a un componente, use una ruta absoluta, como: @/components/xxx.vue para facilitar la importación de otras páginas

• Enrutador de enrutamiento

  • Está prohibido usar mayúsculas en el naming y usar minúsculas de manera uniforme. En caso de múltiples significados, sepárelos con guiones bajos, como: applist | app_list
  • El encabezado del título debe agregar el título del encabezado del título
  • La importación de la página debe usar el componente de formulario de carga diferida () => importar ('xxx.vue')

• Al usar el gráfico Echart, primero debe escribirse como un componente y luego introducirse en una página específica, lo cual es conveniente para uso múltiple y código limpio.

• operación CSS

  El objetivo general es acercarse a la atomización con alta reutilización. Puede referirse a Tailwindcss

  • La cantidad comúnmente utilizada se escribe en base.css, como margin-left: 5px se escribe como ml5
  • El estilo se puede escribir primero en el componente; si se usa en varios lugares, debe escribirse en el archivo público

2. Extensión del complemento VsCode

• Etiqueta de cierre automático Agregar automáticamente etiquetas de cierre
• Etiqueta de cambio de nombre automático Cambiar el nombre de las etiquetas automáticamente
• Autocompletado de rutas de Path Intellisense
• vscode-icons vscode icono
• Chino VsCode Chino
• Easy Sass Menos extensión
• Formato de estilo Sass Lint
• Soporte html css
• Especificación del código Eslint
• Descripción del comentario de generación de encabezado KoroFileHeader
• Embellecimiento de código más bonito
• Vetur vue | Soporte de sintaxis Volar
• EditorConfig para la configuración del editor unificado de VsCode

3. Conocimiento de reserva requerido de front-end

Los que no están marcados son las pilas de tecnología utilizadas por los proyectos existentes.

开发框架
  Vue3.x  Vue2.x  （以V3为主）
  React16 React17 （暂时先了解，后续可能会用）

工程化
  Webpack4+ Webpack5+
  Vite2.x

Ui框架
  ElementUi 和 ElementPlus2.x  (饿了么团队)
  AntDesign (阿里)

图表
  Echarts5 (百度)
  阿里G系列 F系列

Css语法糖
   sass
   less

开发规范
   Eslint
   Prettier

包管理工具
  npm
  yarn

前端微服务框架
  qiankun(阿里)
  MircoApp(京东)  (还在内测中，先简单了解一下)

跨端开发
   Uniapp
   Flutter3.x （可作为兴趣学习，待对多端支持更完美后则启用）

Node (学习了解)
   express
   koa2

文档中心
  vuePress

4. El concepto de lenguaje de diseño de estilo familiar (no implementado)

concepto:

• El posicionamiento de la marca es la base y el núcleo, que puede ayudar a las empresas a comprender mejor el mercado y a sí mismas, y profundizar la conciencia y el reconocimiento de la marca por parte de los usuarios.
• Las marcas específicas se distinguen por tipo. Los productos que enfatizan el profesionalismo deben ser relativamente conservadores, mientras que los productos de Internet puros (productos individuales) resaltan las características del producto.

Ejemplo:

• El lenguaje Q de Tencent establece tres objetivos básicos: experiencia unificada, expresión genética y bondad social

ventaja:

• Consistencia visual de la interfaz de usuario
• singularidad del diseño
• Mejorar la eficiencia
• Unificación multiplataforma
• continuidad del software

Implementar:

• Empaquetado secundario basado en elementos o componentes, como botón, formulario, fuente, etc., para reducir el diseño repetitivo

开发框架
  Vue3.x  Vue2.x
  React16   React17
  Angular

工程化
  Webpack4+
  Vite2.x

Ui框架
  ElementUi (饿了么团队)
  AntDesign (阿里)

图表
  Echarts5 (百度)
  阿里G系列 F系列

Css语法糖
   sass
   less

$black:#fff

.test ww{
    
    
 color: $black
}

开发规范
   Eslint
   Prettier
 
包管理工具
  npm
  yarn

前端微服务框架
  singspa
  qiankun(阿里)
  MircoApp(京东) - 内测中

跨端开发
   Uniapp
   Flutter
  
Node
   express
   koa2

文档中心
  vuePress