
vue2-admin - Una base de andamiaje Vue2.js
Un marco básico del sistema de gestión en segundo plano basado en vue2 + vue-router + vuex + fetch + PostCSS + element-ui (también se pueden usar otras UI, como iView) + webpack2.
Capacidades del marco:
- Arquitectura completamente basada en componentes
- Los espacios de nombres CSS basados en componentes son independientes y no se contaminan entre sí
- Función de inicio de sesión (utilizando el esquema de persistencia de vuex y cookies para el almacenamiento en caché de autenticación de inicio de sesión)
- Soporte de enrutamiento multinivel
- Gestión de estado basada en vuex2 (se recomienda instalar el complemento de Chrome vue.js devtools para realizar un seguimiento del estado durante el desarrollo)
- Soporte de persistencia para vuex2 y cookies (admite la persistencia de un estado de vuex específico y puede especificar el tiempo de vencimiento de las cookies). Para ver ejemplos específicos, consulte el código fuente del proyecto: srcstoreindex.js
- Compatibilidad con PostCSS: admite el ensamblaje automático de prefijos (complemento autoprefixer), admite la última sintaxis CSS (complemento postcss-cssnext) y admite el método @import para introducir css. Para ejemplos específicos, consulte el código fuente del proyecto: srcmodulespage1index.vue
- Servicio de red basado en recuperación (ruta del código fuente: srcutilsrequest.js)
- Admite servicio de datos simulados (ruta de ejemplo simulada: srcapismock)
- Desarrollo, construcción y compilación basados en webpack2: admite HRM en la etapa de desarrollo, admite dependencias de módulos, optimización de recursos estáticos, empaquetado de módulos y huellas dactilares Hash y otras funciones de compilación. Un comando puede completar la construcción y compilación de todo el proyecto.
- Se proporciona un ejemplo de solución de empaquetado de proyectos grandes de paquete web (división de código bajo demanda). Consulte el directorio: srcmodulescode-splitting-demo.
Haga clic aquí para ver el efecto de ejecución (el nombre de usuario y la contraseña no están limitados)
说明:项目框架已经集成了大部分前端项目必须的插件服务和项目逻辑架构,可以拿来即用。让框架尽量简单,逻辑尽量清晰,编译构建过程完全可定制,也是本框架追求的目标之一。
Configuración de compilación
依赖环境:运行项目前请确认本地已安装nodejs和npm。依赖的版本如下:
- "node": ">= 4.0.0"
- "npm": ">= 3.0.0"
※ 开发和运行时阶段依赖的其他包请到package.json中查看
# 安装依赖-国内用户推荐使用npm淘宝镜像,设置方法:
# step1.npm config set registry https://registry.npm.taobao.org
# step2.npm info underscore
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
Estructura del directorio del proyecto
src:项目源码。开发的时候代码写在这里。
|--assets # 项目静态资源,编译时不进行处理的资源都放这里
|--components # 项目公共组件库
|--config # 公共配置文件,例如路由配置等
|--css # 项目公共样式库
|--modules # 项目应用模块,根据应用需要,还可以有子模块,各子模块目录结构和顶级子模块类似
| |--components # 模块级公共组件
| |--views # 模块视图
| |--css # 模块样式
| |--js # 模块脚本
|--App.vue # 项目根视图
|--main.js # 项目入口文件
|--store # 基于vuex的状态管理模块
| |--index.js # 入口及store初始化
| |--mutation-types.js # mutation名称定义
| |--state.js # 根state
| |--mutations.js # 根mutation
| |--getters.js # 根getter
| |--actions.js # 根action
| |--modules # 子模块的store对象
| | |--menu.js # menu模块
|--apis # 服务层ajax请求服务
| |--mock # api数据mock服务
|--utils # 公共库函数
| |--request.js # 网络请求服务,实现了对fetch的二次封装(目前只封装了get,post;实际项目中可按着示例封装其他请求)
Estructura de la página

hacer
- Solución de almacenamiento en caché local para trabajadores de servicio y recuperación
- internacionalización
- Complemento de gráficos