vue3.0 admin

vue3-관리자

소개

vue3-admin은 vue-cli4 및 elemnet-ui에 의해 구축 및 구현되는 백엔드 관리 시스템의 프런트엔드 페이지 표시입니다. 최신 Vue 프레임워크를 사용하고 내부적으로는 컴포넌트 기반 개발 모델을 채택하여 각 컴포넌트가 최대한 단일 기능 원칙을 따르도록 했습니다. 처음에는 조금 피곤해 보일 수도 있지만(하위 구성 요소가 단일 기능을 가지고 있어서 내부 커뮤니케이션이 많기 때문에) 나중에 유지 관리할 때 큰 이점이 있습니다. 이 프로젝트는 유연한 상자(flex) 레이아웃을 사용하므로 모바일 단말기에서 더 나은 표시 효과를 얻을 수 있습니다. 데모를 모바일 단말기에서 열어 볼 수 있습니다.

서버가 시간 초과되어 갱신되지 않았습니다. 현재는 종료되어 미리 볼 수 없습니다. 관심이 있으시면 코드를 가져와 직접 실행해 보세요.

데모(작가가 직접 구매한 Alibaba Cloud 서버의 낮은 구성 버전으로 인해 요청 시간이 약간 길어질 수 있음)

온라인 데모

모바일 단말기의 QR코드를 스캔하시면 보실 수 있습니다.

더 빠르고 더 나은 개발 경험을 위해 아래 프로젝트를 확인하세요.

vue3 실용적인 프로젝트

개발하다

 # 克隆项目
git clone [email protected]:guodonglw/vue3.0-admin.git

# 进入项目目录
cd vue3.0-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run serve

# 如遇到node-sass的问题，可尝试
npm rebuild node-sass

브라우저 접속 http://localhost:8080

풀어 주다

 # 构建生产环境
npm run build

패키징할 때 dist 폴더가 나타납니다. Chrome 브라우저에서 index.html 페이지를 열면 됩니다.

브라우저 지원

최신 브라우저

파이어폭스	크롬	원정 여행
최근 2개 버전	최근 2개 버전	최근 2개 버전

주목

 // 建议首先查看路由文件(了解项目路由以及如何进行动态生成前端路由)
// 页面查看顺序(登录页（views/Login）-> 首页(views/Home/Dashboard))，其中views/Home为其他页面的公共引用部分
// 与后端交互接口（请查看service/index.ts，数据由mock.js产生；实际开发请查看util/request.ts）
// 后台系统包括了登录，异步生成路由，echarts数据可视化，table表增删改查等功能，希望该demo示例可以帮助到有需要的朋友快速上手
// 根据vue-cli示例，主页面index.vue中会采用vue2的写法，在子组件中则有较大的变化，请仔细查看区别