vue3.0 admin

vue3-admin

Einführung

vue3-admin ist eine Front-End-Seitenanzeige eines Backend-Managementsystems, das von vue-cli4 und elemnet-ui erstellt und implementiert wird. Es wird das neueste Vue-Framework verwendet und intern ein komponentenbasiertes Entwicklungsmodell übernommen, sodass jede Komponente so weit wie möglich dem Einzelfunktionsprinzip folgt. Auch wenn es auf den ersten Blick etwas veraltet erscheint (da die Unterkomponente nur eine einzige Funktion hat und daher viel interne Kommunikation stattfindet), bietet es große Vorteile für die spätere Wartung. Das Projekt verwendet ein flexibles Box-Layout (Flex), sodass es auch auf dem mobilen Endgerät einen besseren Anzeigeeffekt hat. Sie können die Demo zur Ansicht auf dem mobilen Endgerät öffnen.

Der Server ist abgelaufen und wurde nicht erneuert. Wenn Sie interessiert sind, rufen Sie den Code ab und führen Sie ihn selbst aus.

Demo (aufgrund der vom Autor selbst gekauften Version des Alibaba Cloud-Servers mit niedriger Konfiguration kann die Anforderungszeit etwas länger sein)

Online-Demo

Zur Ansicht können Sie den QR-Code auf dem mobilen Endgerät scannen

Für eine schnellere und bessere Entwicklungserfahrung sehen Sie sich die folgenden Projekte an

vue3 praktisches Projekt

entwickeln

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

Browserzugriff http://localhost:8080

freigeben

 # 构建生产环境
npm run build

Der Ordner dist wird beim Packen angezeigt. Öffnen Sie einfach die Seite index.html mit dem Chrome-Browser

Browserunterstützung

Moderne Browser

Firefox	Chrom	Safari
letzten 2 Versionen	letzten 2 Versionen	letzten 2 Versionen

Bemerkung

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