vue admin spa 다운로드 -Vue vue admin spa 소스 코드 다운로드

vue admin spa

기타 카테고리

2.1正式版

다운로드

배경 관리 시스템 VUE-ADMIN-SPA (참고 :이 프로젝트가 중지되었습니다. 필요한 경우 최신 VUE 3.0 버전, 더 많은 기능 및 더 완전한 것으로 이동할 수 있습니다).

사용 된 기술 스택 : vue + vue-resource + vue-router + vuex (Essence) + element-ui + es6 + webpack + npm

테스트 주소 (열 수없는 경우 DNS를 114.114.114.114로 수정하십시오).

머리말

이 프로젝트는 VUE 스캐 폴딩과 세 가지 프로젝트 (장수 및 단점)를 기반으로하며, 모든 사람에게 적합한 프로젝트 요구에 더 가깝습니다 포인트가 다시 작성되었습니다.

등록에 로그인 (MD5 암호화 포함)
영구 제어, 메뉴는 사용자 인터페이스의 권한 데이터에 따라 숨겨져 손으로 주소 표시 줄을 두드리며 404 (주소 막대 오류) 또는 401 (주소 표시 줄은 정확하지만 보편적)로 이동합니다. 시스템 설정에서 권한을 동적으로 수정할 수 있습니다.
테마를 전환하고 사용자가 테마를 수동으로 전환하고 테마를 기억하도록 전적으로 지원합니다.
모든 데이터는 로컬 JSON 시뮬레이션에 의해 수행됩니다. 두 번째 개발자는 JSON 경로를 실제 인터페이스 경로로 바꾸면됩니다
모든 동적 작업은 요소를 클릭하고 실제 개발시 콘솔에 관련 매개 변수가 인쇄되었습니다
새로운 학생 모듈이 추가되고 로컬 실제 API 인터페이스가 사용됩니다.
기관 관리 모듈, MOCKJS 인터페이스를 추가하고 실제 개발 JS 논리 (검증 및 제출 인터페이스 등)를 첨부했습니다.

설명

오픈 소스의 목적 : 더 많은 사람들이 배우고 참조하고 우회를 줄이기 위해 바닥을 기준으로 2 명의 개발자에게 제공됩니다.
수요 커스터마이즈 :이 프로젝트는 현재 기본적인 기능 만 있으면 소유자에게 연락 할 수 있습니다.
기부금 : 더 많은 개발자 가이 기본 개발에 참여하고 함께 기부하고 유지하며, 소유자에게 문의하십시오.
적시 교환 : 모든 사람의 기술 교환을 용이하게하기 위해이 프로젝트는 새로운 QQ 그룹 -645582193을 구축했습니다.

** 궁금한 점이 있으면 제출하여 문제를 제출하거나 토론을 위해 그룹에 입장 할 수 있습니다.

이 프로젝트가 도움이된다고 생각되면 오른쪽 상단의 스파를 클릭하십시오^_^

함수 (일부 데이터는 로컬 JSON 시뮬레이션을 수행하고 부분적으로 mockjs를 사용합니다. Douban API가 최근에 차단되었으므로 Douban API의 일부 기능은 미리보기 할 수 없습니다).

시스템 설명
로그인/로그 아웃
비밀번호 수정
개인 홈페이지
아바타 업로드
권한 확인
수정 권한
사이드 바
빵
풍부한 텍스트 편집기
테마 스위치 (아바타를 클릭하여 풀다)
양식 검증, 제출
목록, 삭제, 삭제, 수정, 정렬 및 내보내기 (배경 관리 시스템의 기본 기능)
401, 404 페이지로 리디렉션
Export Excel
보기 탭
PC 끝의 더 많은 기능이 열려 있습니다 ...

개발하다

    # 克隆代码
    git clone https://github.com/lss5270/vue-admin-spa.git
    # 安装依赖
    npm install
    # or 直接解压node_modules.7z到当前位置 （比较适合新手）。

    # 本地开发 开启服务
    npm run dev
    # or 直接双击start.bat（比较适合新手）

브라우저 액세스 http : // localhost : 2018

풀어 주다

  
    # 构建生产环境
    npm run build:prod
    # or 直接双击build.bat（比较适合新手）

공식적인 환경 소개

    # nginx环境下运行
    1.准备nginx环境，自行到nginx官网（https://nginx.org/）下载，并解压
    2.双击build.bat后根目录生成一个dist包，把dist整个文件夹拷贝到nginx解压后的html下
    3.启动nginx服务：双击nginx.exe
    4.访问入口：http://localhost/dist/index.html
    ………
    
    8.关闭nginx服务：直接删进程
    
    # tomcat环境下运行
    参照nginx步骤即可

아이콘에 대해

    本项目使用了两套图标系统，具体使用方法参照以下官方链接:
    1.http://element.eleme.io/#/zh-CN/component/icon
    2.http://fontawesome.io/icons/
    使用方法：
    a.在index.html中引入<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    b.在使用图标的地方放置图标<i class="fa fa-home" aria-hidden="true"></i>

UI 시스템에 대해

    由于bootstrap不支持mvvm已弃用，本项目使用了全新的elementUI系统，具体使用方法参照以下官方链接:
    1.http://element.eleme.io/#/zh-CN/component/installation

.Vue 파일의 배경 그림 경로에 대해, 생산 환경 경로에 대한 포장 문제 404 수리

    具体修复方法，参照Issues中的 #6问题

학생 모듈에 대한 API 인터페이스

    1.学生模块功能使用了本地api接口，若想正常运行，请下载另外一个node项目（https://github.com/lss5270/vue-admin-spa-api），并且在本地启动该node 项目。
    2.该node项目源码，相当于其他后端语言（例如java）提供增删查改接口的源代码。
    3.不懂如何使用node项目的同学，可进群讨论

디렉토리 구조

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件。不直接显示
│   ├── global                 // 全局指令
│   ├── filtres                // 全局filter
│   ├── router                 // 路由
│   ├── store                  // 全局store管理
│   ├── utils                  // 全局公用方法
│   ├── view                   // view视图层
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
│   ├── jquery
│   ├── Tinymce                // 富文本
│   ├── dataJson               // 模拟接口json
│   └── theme                  // 主题文件
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json