Red de conocimiento informático - Problemas con los teléfonos móviles - ¿Cuál es la estructura estándar de un proyecto vue?

¿Cuál es la estructura estándar de un proyecto vue?

Por ejemplo, el archivo descargado mediante el comando npminstall

src es el directorio donde se almacena el código fuente del proyecto, es decir, se almacena el código escrito por el desarrollador

se utiliza estático para almacenar recursos estáticos

index.p>

package.html es la página de inicio y la página de entrada del proyecto, y también es la única página HTML de todo el proyecto

package.json define todas las dependencias del proyecto

package.html es la página de inicio y la página de entrada del proyecto, y también es la única página HTML de todo el proyecto

package.json define todas las dependencias del proyecto

definición de package.json Todas las dependencias del proyecto. json define todas las dependencias del proyecto, incluidas las dependencias de desarrollo y las dependencias de lanzamiento.

Para los desarrolladores, el 99,99% del trabajo se realizará en src, que contiene los siguientes directorios:

Los activos El directorio de componentes se usa para almacenar activos.

El directorio de componentes se usa para almacenar componentes. El directorio de componentes se utiliza para almacenar componentes (páginas reutilizables y no independientes). Por supuesto, los desarrolladores también pueden crear páginas completas directamente en los componentes.

Se recomienda almacenar componentes dentro de componentes y crear una carpeta de páginas separada para páginas completas.

El directorio del enrutador almacena archivos js de enrutamiento

App.vue es un componente de Vue y el primer componente de Vue en el proyecto

main.js es el mismo que main El método es equivalente al método Java, que es el punto de entrada de todo el proyecto

El contenido de main.js es el siguiente:

main.js es un componente de Vue y el primer Vue en los componentes del proyecto. El contenido de js es el siguiente:

En main.js, primero importe el objeto Vue

Importe App.vue y asígnele el nombre App

Importe el enrutador , tenga en cuenta que el nombre de archivo predeterminado de la ruta en el directorio del enrutador es index.js, puede omitirlo

Después de que todo se haya importado correctamente, cree un objeto Vue y configure el nodo para que Vue lo procese. a "#app", "#app" se refiere al div predefinido en el archivo index.html

Configure el enrutador como un objeto vue. Aquí se muestra una forma simplificada de escritura. enrutador: enrutador. Si la clave / Los valores son exactamente iguales y también se pueden abreviar.

Declarar una aplicación de componente El componente de la aplicación se ha importado al proyecto desde el principio, pero los componentes importados directamente no se pueden utilizar directamente y deben declararse.

La plantilla define la plantilla de página y representa el contenido del componente de la aplicación en el div "#app".

Por lo tanto, se puede adivinar que el efecto de página que se ve después de que el proyecto se inicia con éxito está definido en App.vue.

App.vue es un componente de vue que contiene tres partes: 1. Plantilla de página (plantilla); 2. Estilo de página (estilo)

La plantilla de página define los elementos HTML de la página. Aquí se definen dos, uno es una imagen y el otro es una vista del enrutador. /p>

Los scripts de página se utilizan principalmente para inicializar los datos de la página actual, procesar eventos, etc.

El estilo de página consiste en realizar operaciones de embellecimiento de la página en los elementos HTML de la plantilla

Lo que debe complementarse es la vista del enrutador, aquí se refiere a mostrar la ubicación de la página de enrutamiento, que puede entenderse simplemente como un marcador de posición. El contenido mostrado por este marcador de posición se determinará en función de la dirección URL específica actual.

Para contenido de visualización específico, consulte la tabla de enrutamiento, es decir, el archivo router/index.js, que es el siguiente:

En este archivo, el objeto Vue, el objeto Router y el componente HelloWorld son los primeros. importado.

Cree un objeto Enrutador y defina la tabla de enrutamiento

La tabla de enrutamiento se define aquí. Cuando la ruta es /, el componente correspondiente es HelloWorld, es decir, cuando la dirección del navegador es /, el componente HelloWorld se mostrará en la posición de vista del enrutador.