数学建模社区-数学中国
标题:
【VUE】vue后台常用模板
[打印本页]
作者:
杨利霞
时间:
2021-7-19 15:30
标题:
【VUE】vue后台常用模板
4 a- [1 q) N( }) p( D7 y4 f6 _$ E
【VUE】vue后台常用模板
+ ~8 U1 F( h7 e9 F. l% N4 N7 v
vue后台常用模板：
: H: o, x' r9 J. A5 i& k
element文档: http://element-cn.eleme.io/#/zh-CN/component/installation
8 x* o* Q0 H" [8 j6 T+ g2 U$ h
vue API: https://cn.vuejs.org/v2/api/
! H, U1 N i" l" s9 U: P
0 S# U. U9 F% G. S
2 x5 E- x/ a" ?# G9 s$ C0 E0 S
以下是在下收集的三个常用的vue模板
( z9 E7 h6 z+ Z* d6 @1 t7 c
5 o% x3 K( Z) Q! s. T
3 ?2 ^, I, O) e x
1、vue-manage-system
1 e% H0 o7 O* V% A/ F
2 h) J7 M6 E9 s2 W( e* }9 C. h9 d4 |
1 X: o4 i% @; p c
git地址：https://github.com/lin-xin/vue-manage-system
4 f0 t% t4 G R% R/ Q. l: }" h
线上地址： http://blog.gdfengshuo.com/example/work/#/dashboard
, z0 v' ^2 F( p- H4 H1 }1 M
模板如图：
$ u7 _ Z! h# L2 S6 V' `+ V) }$ |; y
# D6 M5 K: ]# [. H" k# V1 J* n3 @* d
/ i7 c$ v$ `, Y$ `3 O. `" m1 ]4 h) s
g& [ Z( b9 t8 ~7 `5 t
4 l9 k( k, l7 V8 m/ l; d
2、vue-element-admin
9 M9 j; i c& A0 f1 d
git地址：https://github.com/PanJiaChen/vue-element-admin
7 }: i, I" D0 y" Y0 K, v( h1 P! j
国际化版本：https://github.com/PanJiaChen/vue-element-admin/tree/i18n
" I( l8 U v. r9 k- \ N
& z7 W* _* ~# f6 R. F( k3 L. m
# B6 y* D5 F, {; A* H- E
中文线上预览：https://panjiachen.github.io/vue-element-admin/#/dashboard
* t2 K, F' S& N) }
* [" N) A0 \6 u0 d
! {' G) p# ^" n/ E# d
IE兼容处理：参考文章
1 e; ?! w6 ?. W) T! m8 ?4 I
模板如图：
3 ?( A* }7 V% d* ]2 N
7 a2 b6 U$ }* F4 X2 P1 M
- B. f$ ^: I# ~# u: z; G
7 U$ L9 l- _+ t% j8 k
% W0 C) N# K3 ?6 v! L! k
3、vuejs 和 element 搭建的一个后台管理界面
. c2 Z% q# X+ A
7 q- T/ |4 v/ F- h' ~2 d
# s) O% f. \) Q9 b
相关技术：
+ n/ J0 B! X. I) G% e+ Z
vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。
1 G3 h0 e* C5 V9 [
element：基于vuejs2.0的ui组件库。
- ?+ R+ i! _8 S
vue-router：一般单页面应用spa都要用到的前端路由。
+ l `! v6 D+ Y; ~7 I% y, Z" U8 R
vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
m4 r+ w- l7 l# u
- m9 o. r; J6 G5 m5 g, j5 S# C- q% U# `
1 C$ z' x5 j- r) I& q5 l1 K6 O
线上地址：https://taylorchen709.github.io/vue-admin/#/login
* d% S7 L( {1 c+ l- b, ^
git地址：https://github.com/taylorchen709/vue-admin
/ J1 }: d- f0 }4 r- `8 ~
模板如图：
* c0 [4 x: W) X( s' b! Y
9 p! c. c/ p' L8 y. G, ]5 h: N
4 F$ |0 v% b+ C, E2 ]' \
使用：
0 G7 _% Y: W- x! M
& o. d4 [; J q" `7 g) O, u
/ W6 U. k% r3 a: u8 O
install dependencies
. S# [! K$ ]$ y% l7 T0 w
0 h- {1 Y5 A! F$ x' H( U7 l
( _: t8 ^; S0 B. B0 ~, k' t
npm install
1 l7 x0 T1 g) s# [4 G
serve with hot reload at localhost:8081
6 C. S3 Z5 [* W- X
# t1 }7 b1 S) u. Z2 x/ R
+ |2 S8 W' Z- i
npm run dev
$ v) @5 h9 a7 o8 j
build for production with minification
1 v( M7 K+ h( a9 ^4 y" z
9 M- Q8 Z3 |. [4 a
$ m+ C: N8 h* W! d) Q( ~: E5 t
npm run build
5 e! U& g6 [0 S& ]) Y. e9 l: p
8 s: s6 \9 e m$ g+ D5 P( X, V
; P5 Q. t6 Q( t, O" @- A
4、基于Vue实现后台系统权限控制
6 b( B, ?* Z8 ]) _" S
! H/ Y; P/ ^, w! C* H
- g2 `5 e0 H, E+ ^, D/ M) H# L
博客地址： https://blog.csdn.net/qq_32340877/article/details/79416344
/ d9 W# i( [: u4 s0 ]! u
3 U( H/ ]& K# k* Z( h$ t3 Y
2 h9 I3 w! s2 q5 w, u9 J# D
基于Vue.js 2.x系列 + Element UI 的后台系统权限控制
! V3 N/ e% W" s6 o4 H+ M
' q8 i1 Y( X! n3 { E
+ \0 K: t: O7 K( i( T
git地址：https://github.com/mgbq/vue-permission
, T3 E& {- b- B
线上地址：https://mgbq.github.io/vue-permission/#/dashboard/dashboard
. [6 f, M) R: g3 [! a0 r
! g7 g% Z# l# z1 t* K, X1 u* S5 t
6 i5 x( t9 r' H, X
. ^- b. n- x/ J/ K2 q0 R
% t- K3 j @ ~/ A+ {* \" u6 \* j
————————————————
% e# Z& b( d$ M7 o! h
版权声明：本文为CSDN博主「LuviaWu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
6 M* D) Q: p! D. ]9 V. K ~
原文链接：https://blog.csdn.net/LuviaWu/article/details/89212051
- B: B* T) c( V7 j0 i0 j: S
& D+ ?$ x/ a2 ], U) P
& y0 P* M- N6 i6 k; z: G0 k
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5