iTaster admin template

índice

• generalizar
• Instalar
• usar
• renovar
• Configuración
• Arquitectura
• Problemas conocidos
• licencia

generalizar

Administrador modificado basado en la plantilla Webpack4.x de vue-cli. No lo descargue. El código preliminar no tiene ninguna función. Es puramente por diversión y práctica.

Instrucciones de actualización

• 2018/6/19 Actualice el paquete web, use webpack4 y recomiende el nuevo complemento mini-css-extract-plugin

Instalar

 ＃克隆该项目
git clone https://github.com/iTaster/webpack4-template

# 安装依赖关系
npm install

# 编译开发环境
npm run dev

De forma predeterminada, http://localhost:1988/ se abre automáticamente.

usar

 # 编译生产环境
npm run build

# 构建生产环境
npm run build --report

renovar

Para garantizar actualizaciones posteriores de los módulos del proyecto.

 # 检测模块
npm outdated

# 更新模块
npm update

# 删除 node_modules 文件
npm install rimraf -g
rimraf node_modules

El comando npm outdated comprobará los módulos instalados y le indicará cuáles están desactualizados.

La información específica incluye: la versión actualmente instalada (Actual), la versión a la que debe actualizar (Se busca) y la última versión en el repositorio (Última).

Configuración

1. Si desea cargar la carpeta dist , simplemente elimine /dist en la configuración del archivo ignorado (archivo .gitignore ).

2. De forma predeterminada, los archivos de recursos compilados y procesados ​​por webpack se almacenarán en la carpeta static . Si solo desea almacenarlos en el directorio de archivos raíz, modifique el parámetro build.assetsSubDirectory en config/index.jx para dejarlo en blanco. ¡Pero no recomendado! De esta manera, algunas rutas de imágenes serán incorrectas al empaquetar. Se recomienda que los recursos de menos de 10 kb y algunos íconos svg (cosas que generalmente no se cambiarán) se coloquen en la carpeta src/assets , y otros se coloquen en la carpeta static carpeta.

3. De forma predeterminada, los archivos css/js empaquetados tienen source map , que son muy útiles para depurar código en el entorno de desarrollo. Sin embargo, no se recomienda modificar el archivo config/index.js en el entorno de compilación y producción. de build.productionSourceMap a: false .

4. Si el código se está ejecutando en el servidor y no desea tener #/ en la barra de direcciones, debe eliminar mode: 'history' en router/index.js (también se requiere la configuración del backend; de lo contrario, la página actualizará 404); si la página necesita usar saltos de ancla, vaya a la ubicación especificada y elimine la anotación scrollBehavior .

5. Viene con autoprefixer . Al escribir código CSS directamente en el archivo vue, se agregará automáticamente el prefijo.

Arquitectura

Se recomienda la siguiente estructura de directorios en desarrollos grandes de una sola página:

src
    ├── README.md
    ├── assets                  // 全局资源目录
    │    ├── images            // 图片
    │    ├── css               // CSS 样式表
    │    └── fonts             // 自定义字体文件
    ├── components              // 公共组件目录
    │    ├── NavMenu.vue
    │    ├── Slider.vue
    │    └── ...
    ├── directives               // 公共指令
    ├── filters                  // 公共过滤器
    ├── i18n                     // 国际化
    │    ├── index.js           // 入口文件
    │    ├── zh.js
    │    └── en.js
    ├── router                   // 路由
    │    └── index.js
    ├── store                    // 状态管理
    │    ├── index.js        
    │    └── ...
    ├── views                    // 页面视图
    │    ├── login
    │    │    ├── index.vue
    │    │    ├── LoginForm.vue
    │    │    └── LoginSocial.vue
    │    ├── home
    │    │    ├── index.vue
    │    │    ├── HomeBanner.vue
    │    │    └── ...
    │    └── ...
    ├── App.vue                // 默认程序入口
    └── main.js

ventaja:

• Si desea utilizar /login en otro proyecto, simplemente cópielo o muévalo al directorio /components.

• Siempre que haya instalado dependencias externas y haya definido el mismo cargador en la configuración, el proyecto debería funcionar bien.

Problemas conocidos

• Hay un error al ocultar la barra lateral izquierda.

contribuir

Puede contribuir libremente a este proyecto enviando problemas y/o solicitudes de extracción. Este proyecto está basado en pruebas, así que recuerde que cada cambio y característica nueva debe cubrirse mediante pruebas.

licencia

Este proyecto tiene licencia del MIT.