Vant es una biblioteca de componentes móviles de código abierto desarrollada por el equipo front-end de Youzan. Se abrió en 2017 y se ha mantenido durante 5 años. Vant lleva todos los negocios principales de Youzan internamente y atiende a más de 100 000 desarrolladores externamente. Es una de las principales bibliotecas de componentes móviles de la industria.
Aquí está la dirección de la versión del applet vant, haga clic para ingresar directamente para navegar por la vant
Paso 1: Después de crear el subprograma, abra el directorio raíz para crear un nuevo proyecto
Paso 2: Ejecute el proyecto actual a través de cmd
Paso 3: Inicialice el proyecto actual
命令：npm init
Estado de inicialización completada:
En este momento, se encontrarán dos archivos de configuración más en la carpeta
Paso 4: Descargue el paquete vant
Ingrese el comando en el directorio raíz del proyecto actual para descargar
el comando de descarga npm: npm i @vant/weapp - S -
comando de descarga de producción cnpm: cnpm i @vant/weapp -S --production
generará el paquete de dependencia node_modules después de la descarga
Paso 5: Instale
el comando de descarga miniprogram npm: npm i miniprogram-sm-crypto --production
Comando de descarga cnpm: cnpm i miniprogram-sm-crypto --production
Paso 6: Modificar la configuración (importante aquí, no omitir)
①: elimine la línea de código "style": "v2" en app.json (la razón es que la nueva versión del applet ha agregado muchos estilos a los componentes básicos, que son difíciles de sobrescribir, y si no está cerrado , los estilos de algunos componentes se confundirán) ②:
Uso Para proyectos creados por las herramientas de desarrollo de WeChat, el valor predeterminado de miniprogramRoot es miniprogram, y el paquete.json está fuera de él, por lo que la compilación npm no puede funcionar correctamente. Debe agregar manualmente la siguiente configuración en project.config.json para que las herramientas de desarrollo puedan indexar correctamente la ubicación de la que depende npm
{
...
"setting": {
...
"packNpmManually": flase,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
Paso 7: Cree la herramienta npm
Abra la herramienta para desarrolladores de WeChat, mueva el mouse a la columna de la herramienta, busque y cree Npm y haga clic en
Paso 8: Use el componente
para configurar la furgoneta aquí y está bien Aquí le sugerimos que lo use bajo diferentes páginas de desarrollo El archivo json se puede introducir a pedido.
Por ejemplo: necesito usar el botón botón en la página de índice. Puedo importar el botón en el archivo json y
usar el estilo en index.wxml
de la siguiente manera
Luego, puede ingresar la importación a pedido y usar de acuerdo con las diferentes API de funciones.
PD: recuerde a todos, después de crear un nuevo proyecto, ingrese a la herramienta de desarrollo de WeChat, algunas versiones predeterminadas usarán la versión anterior e informarán un error, recuerde cambiar a la nueva versión para el desarrollo
Abra las herramientas para desarrolladores de WeChat - "Detalles -" Configuración local - "Biblioteca básica de depuración (seleccione)
