vue2 admin
1.0.0
체험 주소: vue2-admin
계정: admin 비밀번호: admin
버그가 발생하거나 더 나은 구현이 있으면 언제든지 저에게 연락해 주세요(코드를 이해하지 못하는 경우 이메일을 보내 문의하실 수도 있습니다). 이메일: [email protected]
vue2 버전 github 주소: vue2-admin
gitee Warehouse도 있는데, 위 링크의 github를 gitee로 변경하시면 됩니다.
1. 첫 화면 로딩 애니메이션
2.axios 패키지
3.라우터 권한 제어
4. 권한에 따라 측면 탐색 모음을 동적으로 생성합니다.
5. 로그인 로직
6.대시보드 페이지 레이아웃
8. el-tooltip의 2차 캡슐화를 기반으로 하는 구성 요소는 길이를 초과한 경우에만 도구 설명을 표시하며 el-tooltip의 모든 속성을 지원합니다. 9. el-table의 2차 캡슐화를 기반으로 하는 구성 요소는 el의 모든 속성을 지원합니다. -테이블 및 페이징 지원 10. el-icon 보조 캡슐화 기반 아이콘 선택 구성 요소 11. 토큰 터치리스 새로 고침 기능
기능을 과도하게 캡슐화하지 않고 기본 페이지 프레임워크와 라우팅 구조만 제공하며 나머지 기능은 전적으로 사용자가 스스로 개발하도록 남겨집니다.
효과를 입증하기 위해 mock.js를 사용하여 정식 환경에서 테스트 데이터를 생성하기도 했습니다. 하지만 공식 버전은 사용되지 않습니다!
공식적인 사용 중에는 중단하여 실행하시기 바랍니다.
npm uninstall mockjs --save
개발 중 테스트 데이터가 필요한 경우 다음 지침에 따라 개발 환경에 mockjs를 설치하세요.
npm install mockjs -D
요청 헤더는 utils/request.js에서 구성할 수 있으며 실제 상황에 따라 수정할 수 있습니다.
utils/setting.js의 API에서 요청의 기본 URL을 구성합니다.
일반 환경은 .env입니다.
개발 환경은 .env.development입니다.
프로덕션 환경은 .env.production입니다.
환경 변수 우선 순위 .env.production = .env.development > .env
프로젝트 src 디렉토리에 api 폴더가 있고, 그 안에 새로운 user.js 파일을 생성합니다. 이 파일은 API를 작성하는 캡슐화 과정입니다.
디버깅 및 통합 관리를 용이하게 하기 위해 인터페이스 유형을 동일한 파일에 넣는 것이 좋습니다.
@/api/user.js 형식을 사용하는 경우에는 사용 시 먼저 소개됩니다. 예를 들어 먼저 @/comComponent/login.vue에 파일을 소개합니다.
import { loginApi } from "@/api/user"
login ( ) {
let data = this . ruleForm
loginApi ( data ) . then ( res => {
console . log ( res )
} )
} 인터페이스에서 반환된 데이터를 기반으로 경로를 동적으로 생성하고 인터페이스 데이터를 기반으로 탐색 모음을 생성합니다.
@/router/beforEach.js에 경로 가드가 추가되어 있습니다. 다른 기능을 구현하려는 경우(예: 특정 작업을 수행한 후에만 특정 페이지에 들어갈 수 있음) 추가할 수 있습니다. router/beforEach.js에서 Selfexecution 함수에 해당 로직을 추가하세요.
@/router/beforEach.js의 메타 속성에 사이드바의 아이콘, 제목, 숨김을 구성합니다. Hidden:true인 경우 측면 탐색 모음이 표시되지 않습니다.
사이드바 색상은 utils/setting에서 테마의 aside_color, aside_rext_color로 수정할 수 있습니다.
vuex 모듈화, 로그인 및 권한 제어를 별도의 모듈에 넣습니다.
vuex 데이터 새로 고침 손실을 방지하려면 vuex-persistedstate를 도입하세요.
// 为了防止刷新页面vuex中的数据丢失，可以选择性地将数据存入sessionstorage中，防止丢失
plugins: [ createPersistedState ( {
storage : window . sessionStorage ,
reducer ( val ) {
return {
// 只储存state中的isPC
isPC : val . user . isPC
}
}
} ) ]사용자가 세션 저장소를 수동으로 수정하는 것을 방지하기 위해 청취 이벤트가 추가됩니다.
window . addEventListener ( 'storage' , function ( e ) {
sessionStorage . setItem ( e . key , e . oldValue )
} ) ; 기본 버튼 제한 코드가 추가되었으며 v-preventReClick을 버튼에 바인딩할 수 있습니다.
// 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 )
}
} )
}
} ) 로그인 페이지,
비밀번호 검색 페이지,
404페이지,
홈페이지
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
