1. Estructura de Directorios del Proyecto

La estructura de directorios del proyecto Vue-Authorized se presenta a continuación:

vue-authorized/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   ├── MainComponent.vue
│   │   └── ...
│   ├── router/
│   │   └── routes.js
│   ├── store/
│   │   └── state.js
│   ├── views/
│   │   ├── Principal.vue
│   │   └── ...
│   ├── App.vue
│   └── entry.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

Descripción de la Estructura

• public/: Aloja recursos públicos como index.html y favicon.ico.
• src/: Directorio del código fuente que contiene la lógica principal del proyecto.
• assets/: Recursos estáticos como imágenes.
• components/: Componentes Vue.
• router/: Configuración de rutas.
• store/: Gestión de estado con Vuex.
• views/: Componentes de vistas de página.
• App.vue: Componente raíz.
• entry.js: Punto de entrada de la aplicación.

.gitignore: Configuración de archivos ignorados por Git. babel.config.js: Archivo de configuración de Babel. package.json: Dependencias del proyecto y configuración de scripts. README.md: Documentación explicativa del proyecto. vue.config.js: Archivo de configuración de Vue CLI.

2. Archivo de Inicio del Proyecto

El archivo de inicio del proyecto es src/entry.js, cuya función principal es inicializar la instancia de Vue y montarla en el DOM.

import Vue from 'vue'
import RootComponent from './App.vue'
import routerConfig from './router/routes'
import vuexStore from './store/state'

Vue.config.productionTip = false

new Vue({
  enrutador: routerConfig,
  almacen: vuexStore,
  render: crearElemento => crearElemento(RootComponent)
}).montar('#app')

Descripción del Archivo de Inicio

• Importación de módulos: Se importan Vue, el componente raíz, el sistema de rutas y la gestión de estado.
• Configuración: Se establece Vue.config.productionTip como false para desactivar los avisos del modo producción.
• Creación de instancia Vue: Se genera una nueva instancia de Vue configurada con enrutador y almacen.
• Montaje: La instancia de Vue se monta en el elemento #app del DOM.

3. Archivos de Configuración del Proyecto

package.json

El archivo package.json contiene las dependencias del proyecto, scripts y otros metadatos.

{
  "name": "vue-authorized",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  }
}