数学建模社区-数学中国
标题:
【VUE】vue后台常用模板
[打印本页]
作者:
杨利霞
时间:
2021-7-19 15:30
标题:
【VUE】vue后台常用模板
/ C: T1 E, h4 S$ |6 x
【VUE】vue后台常用模板
2 x/ p T3 D3 i! W
vue后台常用模板：
$ p: s6 C. l/ n. J. S& P' v9 w
element文档: http://element-cn.eleme.io/#/zh-CN/component/installation
3 L) Z3 Y, C6 v- g7 Q5 F# k
vue API: https://cn.vuejs.org/v2/api/
0 @$ N- K& i8 R5 F2 y/ S) A& Q5 P' @
9 i8 z. K. G/ _
" q5 |- q' o3 x6 ^3 l% ?8 K; k
以下是在下收集的三个常用的vue模板
0 m' k# o! D6 Q. C
% g G; J3 v( C" ]+ Z4 w* P
$ u9 Q( T2 q- k! t1 Y
1、vue-manage-system
! l1 E) x5 L& ^: k
! r8 z' p8 ]" \& T2 V
0 T' e9 T$ Y* Q* ^" [; ^+ N n
git地址：https://github.com/lin-xin/vue-manage-system
% _+ H9 J$ [8 a0 E i3 ~
线上地址： http://blog.gdfengshuo.com/example/work/#/dashboard
1 x& q3 m" ~$ Q! W T1 K7 H
模板如图：
" n- V0 \/ P- S! r' l2 T. G3 x- Q: u" Y
2 ]; z7 j# R0 A/ m. [9 W3 ?& d
2 |; G7 p7 Z2 e6 }4 ]7 h
}! I9 H( s# f4 w) V# J
7 z# p# n+ [1 \) ?! ~' T
2、vue-element-admin
1 H5 W3 W, e' O4 Y# K1 f) q
git地址：https://github.com/PanJiaChen/vue-element-admin
' `5 U; W& _. L% y2 e k5 k
国际化版本：https://github.com/PanJiaChen/vue-element-admin/tree/i18n
2 e2 \( h5 v8 Z4 I% a1 {
3 \+ I0 W. p6 y1 J4 N3 Z0 P
1 g5 ]5 l' O/ ]$ R3 e: q' G
中文线上预览：https://panjiachen.github.io/vue-element-admin/#/dashboard
0 W" y, A" t7 m7 f7 F
Y+ [7 n/ \9 n' t: \/ _4 R7 t
: {9 p+ I, r- J
IE兼容处理：参考文章
- j4 O/ n4 g" y# O; q1 y- S) U' C, r
模板如图：
, o& f( z0 p: E2 p
1 N* W) ^. [6 s% }1 }; @/ Z* Q
& R/ U$ y" \# \. R' `4 n
5 E- v/ H( M2 z: {
( p. k, `* |% W! J- q) S
3、vuejs 和 element 搭建的一个后台管理界面
6 S2 @% N. K/ Y- v/ K2 ^
# u6 J2 [0 Y4 ?2 A
6 T) ?" j. @' d9 P
相关技术：
# E0 X+ S. Q1 w' N
vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。
/ n$ H4 f9 L3 `' m$ Z4 ?, \ }+ j
element：基于vuejs2.0的ui组件库。
0 c& W& @. f% y7 g; w
vue-router：一般单页面应用spa都要用到的前端路由。
9 n8 V9 a$ [5 h$ @3 x9 b
vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
9 C( H1 ]/ ]5 Y& \1 b( A# j# d
M3 J; j' l3 b* u& T& Q
9 m! U2 [3 p3 e& y5 r
线上地址：https://taylorchen709.github.io/vue-admin/#/login
6 `1 @% v' i( t4 `* b6 D6 J1 Y: B. _
git地址：https://github.com/taylorchen709/vue-admin
4 H% D, ]# d0 U1 z
模板如图：
. J8 h! G. G2 o9 b7 L( C' _
, R* y& E, X+ B
% \: ~" `0 Q; Q) p
使用：
* Z& A/ s* D; I
, n1 { D0 M- W+ A+ q
$ m, B! z# e5 W$ ~
install dependencies
7 a* K* M; [2 c/ q( F% F$ P' \
( G$ v' x. P# C* f0 `; J
7 i6 q- D( P# ]- T
npm install
8 n6 q% @3 T9 c1 q, ]5 q" K
serve with hot reload at localhost:8081
9 t$ k) C& n0 @' o& m
6 U# C; B* K3 g
$ d/ n% v& Z* _; d
npm run dev
) H1 |- N# l0 U# J
build for production with minification
# k2 f& N2 M! q: r6 g3 O
; I% M9 P6 Y" E& r4 U3 c
- C* d: b+ K" o0 t7 ]" S
npm run build
3 X8 u: C; Z) [
( E! a( }+ m q
j9 J& H8 G( V4 h' m
4、基于Vue实现后台系统权限控制
4 e, I% o) n. e6 l
, @& u! |4 t/ j, [$ j' `2 t
* k$ D$ d ~2 F/ i
博客地址： https://blog.csdn.net/qq_32340877/article/details/79416344
+ c1 b& S- B% p8 Y& ~( ^, F7 r
1 @3 v& o% n. T
$ E7 {* J/ [9 v6 M" o
基于Vue.js 2.x系列 + Element UI 的后台系统权限控制
5 ^ P& K- R% X& P
: h! V5 k9 i& J1 ~8 p% K, P2 w
: J# c) y' N5 w) y6 V+ z
git地址：https://github.com/mgbq/vue-permission
- X6 ?* a+ B" M' l
线上地址：https://mgbq.github.io/vue-permission/#/dashboard/dashboard
6 T3 [( |! W! A2 B, C- O3 O4 j
- e4 I; a" ]* n& D2 p- g6 j
* _2 S% J* F: V5 I: P5 t+ P& e
: j" E3 C+ ?& X6 G C- P- J$ L2 I+ t, Q
7 ^& w4 \' t; I! F
————————————————
4 r7 C( Q! d: k V6 K- I
版权声明：本文为CSDN博主「LuviaWu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
2 \; _' _' E, _5 p9 j1 j% @' Y
原文链接：https://blog.csdn.net/LuviaWu/article/details/89212051
9 k1 j8 r% A$ a1 @: p1 d, [- ~
+ a% C4 E( ~% E5 l8 o1 ?
% `$ s" u5 ?2 W
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5