vue3.0 admin

vue3-admin

Introduction

vue3-admin est un affichage de page frontale d'un système de gestion backend, construit et implémenté par vue-cli4 et elemnet-ui. Le dernier framework Vue est utilisé et un modèle de développement basé sur les composants est adopté en interne, afin que chaque composant suive autant que possible le principe de la fonction unique. Même si cela peut paraître un peu fatigué au début (car le sous-composant a une seule fonction, donc il y a beaucoup de communication interne), il présente de grands avantages pour une maintenance ultérieure. Le projet utilise une disposition de boîte flexible (flex), il a donc également un meilleur effet d'affichage sur le terminal mobile. Vous pouvez ouvrir la démo sur le terminal mobile pour la visualiser.

Le serveur a expiré et n'a pas été renouvelé. Il a été arrêté et ne peut pas être prévisualisé pour le moment. Si vous êtes intéressé, veuillez extraire le code et l'exécuter vous-même.

Démo (en raison de la version basse configuration du serveur Alibaba Cloud achetée par l'auteur lui-même, le temps de requête peut être légèrement plus long)

Démo en ligne

Vous pouvez scanner le code QR sur le terminal mobile pour visualiser

Pour une expérience de développement plus rapide et meilleure, consultez les projets ci-dessous

projet pratique vue3

développer

 # 克隆项目
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

Accès au navigateur http://localhost:8080

libérer

 # 构建生产环境
npm run build

Le dossier dist apparaîtra lors de l'empaquetage, ouvrez simplement la page index.html avec le navigateur Chrome

Prise en charge des navigateurs

Navigateurs modernes

Firefox	Chrome	Safari
les 2 dernières versions	les 2 dernières versions	les 2 dernières versions

Remarque

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