vue2 admin
1.0.0
Dirección de la experiencia: vue2-admin
Cuenta: admin Contraseña: admin
Si encuentra un error o tiene una mejor implementación, no dude en ponerse en contacto conmigo (también puede enviarme un correo electrónico para preguntarme si no comprende el código). Correo electrónico: [email protected]
Dirección de github de la versión de vue2: vue2-admin
También hay un almacén de gitee, simplemente cambie github en el enlace de arriba a gitee.
1. Animación de carga de la primera pantalla.
Paquete 2.axios
3.control de permisos del enrutador
4. Generar dinámicamente una barra de navegación lateral según los permisos.
5. Lógica de inicio de sesión
6.diseño de página del tablero
8. Los componentes basados en la encapsulación secundaria de el-tooltip solo mostrarán la información sobre herramientas cuando se exceda la longitud y admitirán todos los atributos de el-tooltip. 9. Los componentes basados en la encapsulación secundaria de el-table admiten todos los atributos de el. -table y paginación de soporte 10. Componente de selección de íconos basado en encapsulación secundaria el-icon 11. Función de actualización sin contacto de token.
No encapsula funciones en exceso y solo proporciona el marco de página básico y la estructura de enrutamiento. Las funciones restantes se dejan completamente a cargo de los usuarios.
Para demostrar el efecto, también utilicé simulacro.js para generar datos de prueba en un entorno formal. ¡Pero no se utilizará la versión oficial!
Ejecútelo de forma interrumpida durante el uso oficial.
npm uninstall mockjs --save
Si necesita datos de prueba durante el desarrollo, ejecute las siguientes instrucciones para instalar Mockjs en el entorno de desarrollo.
npm install mockjs -D
Los encabezados de solicitud se pueden configurar en utils/request.js y se pueden modificar según su situación real.
Configure la URL base de la solicitud en la api en utils/setting.js
El entorno general es .env
El entorno de desarrollo es .env.development
El entorno de producción es .env.production
Prioridad de la variable de entorno .env.production = .env.development > .env
Hay una carpeta api en el directorio src del proyecto y luego cree un nuevo archivo user.js en ella. Este archivo es el proceso de encapsulación para escribir la API.
Se recomienda poner un tipo de interfaz en el mismo archivo al usarlo para facilitar la depuración y la gestión unificada.
Si se utiliza el formato @/api/user.js, se introducirá primero cuando se utilice. Por ejemplo, primero presento el archivo en @/component/login.vue
import { loginApi } from "@/api/user"
login ( ) {
let data = this . ruleForm
loginApi ( data ) . then ( res => {
console . log ( res )
} )
} Genere rutas dinámicamente según los datos devueltos por la interfaz y genere una barra de navegación según los datos de la interfaz.
Hay guardias de ruta en @/router/beforEach.js. Se han agregado guardias de ruta básicas. Si desea implementar otras funciones (como: solo puede ingresar a una determinada página después de realizar una determinada operación), puede agregarlas. en router/beforEach.js Agregue la lógica correspondiente a la función Selfexecution.
Configure el ícono, el título y lo oculto de la barra lateral en el atributo meta en @/router/beforEach.js. Cuando está oculta: verdadero, la barra de navegación lateral no se muestra.
El color de la barra lateral se puede modificar mediante aside_color y aside_rext_color del tema en utils/setting.
Coloque la modularización, el inicio de sesión y el control de permisos de vuex en un módulo separado
Para evitar la pérdida de actualización de datos de vuex, introduzca vuex-persistedstate
// 为了防止刷新页面vuex中的数据丢失，可以选择性地将数据存入sessionstorage中，防止丢失
plugins: [ createPersistedState ( {
storage : window . sessionStorage ,
reducer ( val ) {
return {
// 只储存state中的isPC
isPC : val . user . isPC
}
}
} ) ]Para evitar que los usuarios modifiquen manualmente el almacenamiento de sesiones, se agrega un evento de escucha
window . addEventListener ( 'storage' , function ( e ) {
sessionStorage . setItem ( e . key , e . oldValue )
} ) ; Se agregó un código básico de limitación del botón y se puede vincular v-preventReClick al botón.
// button节流，在button中添加v-preventReClick即可控制按钮，防止按钮连击，时间限制2s
Vue . directive ( "preventReClick" , {
inserted ( el , binding ) {
el . addEventListener ( "click" , ( ) => {
if ( el . style . pointerEvents !== "none" ) {
el . style . pointerEvents = "none"
setTimeout ( ( ) => {
el . style . pointerEvents = ""
} , 2000 )
}
} )
}
} ) página de inicio de sesión,
Página de recuperación de contraseña,
404 página,
pagina de inicio
npm uninstall mockjs --save
npm install mockjs -D
npm install
npm run serve
npm run build
npm run lint
docker build -t vue-admin . --no-cache
