[Vue Family Bucket · Vue CLI (4)] Análisis detallado de la estructura de directorios del proyecto Vue

Análisis de directorio de nivel 1 del prefacio

Después de usar la herramienta Vue CLI 4.0 para crear un nuevo proyecto, su estructura de directorio de primer nivel más básica suele ser así:

vue-demo
├── dist  //项目构建后的输出目录
├── node_modules
├── public
├── src
├── tests  //选装：测试模块
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
├── ...

• dist—— El directorio de salida predeterminado una vez creado y empaquetado el proyecto. Ver detalles ->
• node_modules—— Archivos de dependencia del proyecto, incluidas muchas dependencias básicas y dependencias instaladas por usted mismo. Ver detalles ->
• public—— El archivo de entrada principal para almacenar recursos y proyectos públicos index.html. Ver detalles ->
• src—— Carpeta principal del proyecto: incluye el código fuente del proyecto, varios recursos estáticos, etc. Es el directorio de trabajo clave que desarrollamos. Ver detalles ->
• test—— Carpeta opcional solo si está instalado el módulo de prueba (Unit Testing / E2E Testing). Ver detalles ->
• .gitignore—— Directorios de archivos que deben ignorarse cuando se carga Git; ver detalles ->
• package-lock.json —— Documentos utilizados para la gestión de versiones;
• package.json —— El archivo de información de configuración básica del proyecto, incluidos varios complementos, dependencias y la configuración detallada de algunas dependencias (si elige guardarlo en este archivo);
• README.md—— El archivo de descripción del proyecto. Ver detalles ->
• ...—— Algunos archivos independientes que dependen de la información de configuración. Ver detalles ->
  

Uno. Dist

La carpeta dist no existe al principio en el proyecto recién creado. Solo se creará después de ejecutar el comando de compilación (compilación) una vez. Por lo general, su estructura de directorio interno es:

vue-demo
├── dist  //项目构建后的输出目录
│   └── css
│   └── img
│   └── js
│   └── index.html  // 项目主入口文件
│   └── ...  // 其他公共资源

Esta es la estructura de directorios de la etapa de desarrollo nativo con la que estamos familiarizados antes. También es un tipo de archivo que el navegador puede reconocer directamente . Sin embargo, los proyectos desarrollados por frameworks como Vue.js que estamos usando actualmente no son reconocidos por el navegador, por lo que necesitamos compilar y empaquetar este paso para convertirlos en los archivos requeridos por el entorno de producción real (navegador).

npm run build

El nombre de la carpeta del directorio se puede configurar libremente. Por ejemplo, modifique directamente en Vue UI:

Para el uso específico de Vue UI, puede consultar el artículo anterior:

[Vue Family Bucket · Vue CLI (3)] Utilice el administrador de proyectos visual Vue (Vue UI) para crear, desarrollar y administrar sus proyectos

2. node_modules

node_modulesEn la carpeta se almacenan varios archivos de dependencia del proyecto, incluidas muchas dependencias básicas y dependencias instaladas por usted mismo.

vue-demo
├── node_modules
│   └── ...

Al compartir código o cargar almacenes remotos, se recomienda ignorar esta carpeta . Entonces, cuando obtenemos un proyecto de Vue, generalmente no tenemos esta carpeta. Necesitamos usar el comando para generarlo nosotros mismos:

npm install

Luego descargará todos los archivos dependientes necesarios para el proyecto. Además de los archivos de dependencia básicos, también identificará package.jsonla información de dependencia guardada en nuestros archivos y los instalará uno por uno.

Después de que se desarrolle el proyecto, podemos continuar agregando otras dependencias según sea necesario, y aún se guardarán en la node_modulescarpeta.

npm install [依赖包名称]

Tres. Público

Como su nombre lo indica, los publicrecursos públicos del proyecto se almacenan en la carpeta. Por ejemplo, LOGOTIPO del sitio web, etc., será el archivo de entrada principal del proyecto index.html. Por lo general, no necesitamos publicrealizar ningún cambio en los recursos de la carpeta.

vue-demo
├── public
│   └── index.html  // 项目主入口文件
│   └── ...  // 其他公共资源

Al compilar y empaquetar más tarde, el publiccontenido del archivo se colocará directamente en la distcarpeta. como:

4. src (versión básica)

srcLa carpeta es la carpeta principal de nuestro proyecto: incluye el código fuente del proyecto y varios recursos estáticos, etc. Es el directorio de trabajo clave que desarrollamos.

Si en este momento cuando se creó su proyecto, no se seleccionó ninguna otra configuración, y era solo el proyecto en blanco más simple, entonces su carpeta src debería verse así:

vue-demo
├── src
│   └── assets  //静态资源
│   └── components  //公共组件
│   └── App.vue  //根组件
│   └── main.js  //入口文件

La secuencia de llamada específica entre ellos se puede resumir brevemente en la siguiente figura:
Este es también el principio de funcionamiento más básico del marco Vue. En el futuro, se pueden agregar otros productos ecológicos o complementos de Vue sobre esta base, como Vue Router, Vuex o la biblioteca de componentes Element UI, etc.

4.1 main.js

main.jsEl archivo es un archivo muy importante y es el primer archivo de entrada que el navegador analiza y carga. La función principal de este archivo es importar varios recursos mediante la importación y luego crear una nueva instancia de vue.

Puede ver que aquí solo se importan dos recursos:

• Vue framework - node_modulesimportar desde la carpeta;
• Aplicación de componente raíz : App.vueimportar desde un archivo;

Luego crea una nueva instancia de vue:

new Vue({
    
    
  render: h => h(App),  //渲染函数
}).$mount('#app')  //手动挂载

render: h => h(App)El formato de la función de representación pertenece a la escritura de la función de flecha ES6, y su forma equivalente ES5 es:

render: h => h(App) 

       ||
       
render(h){
    
         
    return h(App);
}

En esta instancia de Vue, la aplicación del componente raíz se procesa a través de la función h, y se monta manualmente en #appel nodo con id . El nodo se encuentra en publicel archivo de entrada principal bajo el directorio index.html.

Que < div id=“app”></div>será reemplazado por la aplicación del componente raíz, el llamado mount.

4.2 Ver aplicación

Entonces, lo que se carga más es el archivo de la aplicación del componente raíz- App.vue. Cuando hablamos sobre cómo comenzar con el marco Vue, mencionamos que hay un concepto central muy importante en el marco Vue:

• Desarrollo de componentes: cada página de Vue puede verse como llena de componentes, y los componentes admiten el anidamiento jerárquico.

El componente de la aplicación pertenece al componente raíz y el uso de otros componentes debe ser introducido directa o indirectamente por el componente de la aplicación. Aquí continuamos presentando los siguientes dos recursos:

• Imagen logo.png-ubicada en el src / assetscatálogo;
• Componentes comunes, HelloWorldubicados en el src / componentsdirectorio;

4.3 src / activos

src / assetsEn la carpeta se almacenan varios recursos estáticos, como css, img, js, font, etc. assetsSolo hay un recurso de imagen de LOGOTIPO en la página de inicio de la carpeta del proyecto recién creada :

4.4 src / componentes

Los componentes definidos aquí son todos componentes públicos y se pueden llamar (varias veces) en cualquier página de Vue. .vueEl archivo con el sufijo es el archivo del componente, y cada componente de vue generalmente consta de las siguientes tres partes:

• <template>Etiquetas: fragmentos de código de plantilla HTML;
• <script>Etiquetas-código javascript;
• <style>Código estilo etiquetas (CSS nativo / lenguaje de preprocesamiento Sass, Less, Stylus);

Puede ver que el html, js y css de los Tres Mosqueteros en el desarrollo original están todos integrados en un archivo de componente (aunque el gorrión es pequeño y completo). Sin duda, un plan de desarrollo de este tipo es muy diferente del desarrollo nativo, por lo que se necesita la construcción y el empaquetado final.

Lo que vemos después de ejecutar este proyecto es en realidad el contenido de los componentes públicos HelloWorld:

Otro punto es que los componentes hijo y padre se utilizan aquí para pasar valores. Cuando la aplicación del componente raíz llama al componente público HelloWorld, transmite un valor de mensaje:

Luego, el HelloWorldcomponente público se recibe a través del método props y se procesa.

Podemos intentar modificar el valor de msg y HelloWorldotro contenido en el componente público. como:

// App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome ! zevin ."/>
  </div>
</template>

// HelloWorld.vue

<template>
  <div class="hello">
    <h1>{
    
    {
    
     msg }}</h1>
  </div>
</template>

El efecto de página actual es así ~

---

5. src (versión superior)

La versión básica que acabo de mencionar srces excelente si se usa para comprender los principios del marco Vue, pero definitivamente no es suficiente en el desarrollo real. Usaremos más o menos otros productos en el ecosistema Vue.

Entonces hay una versión superior src, jaja. La estructura detallada del directorio es la siguiente:

vue-demo
├── src
│   └── assets  //静态资源
│   └── components  //公共组件
│   └── plugins  //插件资源
│   └── router  //路由配置
│   └── store  //vuex文件
│   └── views  //视图组件
│   └── App.vue  //根组件
│   └── main.js  //入口文件

En comparación con la versión básica, encontrará que hay cuatro carpetas más:

• plugins —— Recursos de complemento;
• router —— Configuración de enrutamiento;
• store —— archivo vuex;
• views —— Ver componente;

También se debe enriquecer el gráfico de llamadas entre los archivos correspondientes. Por favor, vea la imagen a continuación:

De manera similar, el main.jscontenido del archivo es diferente y los elementos de recursos importados por importación han aumentado:

Y el contenido correspondiente también se agrega a la instancia de Vue:

new Vue({
    
    
  router,  // 注册路由
  store,  // 引入store
  render: h => h(App)
}).$mount('#app')

A continuación, continúe mirando la explicación de estas cuatro carpetas para ayudarlo a comprender esta imagen.

5.1 src / complementos

Esta carpeta se genera instalando complementos manualmente durante el proceso de desarrollo de su proyecto. Por ejemplo, instalé axios aquí:

5.2 src / tienda

La carpeta de la tienda es un archivo que solo estará disponible después de haber seleccionado Vuex y se usa principalmente para guardar ciertos estados en el proyecto. Tales como estado, mutaciones, acciones, captadores, módulos, etc.

Para obtener una explicación detallada de Vuex, consulte la actualización de seguimiento ~

5.3 src / enrutador

En una aplicación de una sola página , el enrutamiento se refiere a mostrar diferentes vistas de página de acuerdo con diferentes enlaces, que se pueden alternar . Como se muestra abajo:

Antes de mirar el src / routerarchivo, echemos un vistazo a la aplicación del componente raíz: App.vuelos cambios en el archivo: los componentes públicos ya no se llaman directamente, pero < router-view/>se hace referencia a las rutas.

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

El principio específico de enrutamiento es:

Según el valor <router-link>del tocampo en la etiqueta anterior , determina <router-view/>qué componente de vista se monta aquí.

La relación correspondiente de este enlace de ruta se guarda en el src/router/index.jsarchivo.

5.4 src / vistas

src / viewsEl componente de vista se almacena en la carpeta. Los nuevos proyectos con Vue Router tendrán los siguientes dos componentes de vista de forma predeterminada:

• Home.vue —— Página de inicio;
• About.vue —— Sobre la sección;

Y Home.vuepuede ver el App.vuecontenido de la plantilla familiar en la versión básica anterior, que es el mismo que el componente raíz . De esta manera, se conecta la idea de la versión básica anterior ~

6. pruebas

Carpeta opcional para módulo de prueba (Unit Testing / E2E Testing). Pero yo mismo no tengo mucha investigación sobre la prueba, así que no causo ningún problema ~

Siete. .Gitignore

No hay nada que decir sobre esto, que es enumerar los archivos que deben ignorarse cuando Git se cargue más tarde. El valor predeterminado .gitignoreen el documento resumió mucho, pero somos adiciones y eliminaciones gratuitas.

8. README.md

README.mdEl archivo es el archivo de descripción de su proyecto. Prescindible, no afecta a nada. Su función es:

Cuando carga como un recurso de almacén remoto de Git, como GitHub. Analizará los README.mdarchivos en el directorio raíz de su proyecto y los mostrará en el directorio de su almacén. Es conveniente que otros comprendan rápidamente su proyecto.

Por ejemplo: la dirección del repositorio de GitHub del proyecto vuepress-theme-vdoing

Nueve.… (Otros archivos de información de configuración independientes dependientes)

Cuando se crea un proyecto, si se decide recurrir información de configuración se almacena en forma de archivos independiente, dentro de su proyecto, y package.jsonarchivos en el mismo nivel, que tendrá como .browserslistrc, .eslintrc, babel.config.js, jest.config.js, tsconfig.jsony otros archivos de configuración independientes.

Adjunto: árbol de estructura de directorios detallado

Estoy aquí para resumir la estructura de directorios real de un proyecto de Vue de la manera más completa posible. Solo como referencia, la estructura de directorio específica se basa en su situación real.

vue-demo
├── dist  //项目构建后的输出目录
├── node_modules
│   └── ...  // 各类依赖
├── public
│   └── index.html  // 项目主入口文件
│   └── ...  // 其他公共资源
├── src
│   └── assets  //静态资源
│       └── logo.png
│   └── components  //公共组件
│       └── HelloWorld.vue
│   └── plugins  //插件资源
│       └── axios.js
│   └── router  //路由配置
│       └── index.js
│   └── store  //vuex文件
│       └── index.js
│   └── views  //视图组件
│       └── About.vue
│       └── Home.vue
│   └── App.vue  //根组件
│   └── main.js  //入口文件
├── tests  //选装：测试模块
├── .gitignore  //Git上传时需要忽略的文件列表
├── package-lock.json  //版本管理使用的文件
├── package.json  //项目的基本配置信息文件
├── README.md  //项目的描述文件
├── ...  //其他依赖的独立配置信息文件

---

Escribir al final

En este artículo, el rol de cada estructura de directorio en un proyecto estándar de Vue se clasifica en detalle. Es una impresión general del proyecto Vue, y los detalles específicos del desarrollo deben profundizarse. ¡Venga! QAQ

¡Cada día que nunca he bailado es una decepción para la vida!

—— Nietzsche