数学建模社区-数学中国
标题:
【VUE】vue后台常用模板
[打印本页]
作者:
杨利霞
时间:
2021-7-19 15:30
标题:
【VUE】vue后台常用模板
( q7 K3 T: v+ S3 S
【VUE】vue后台常用模板
- ~9 Q: l6 l: G" h0 A' Y
vue后台常用模板：
9 f0 |+ b3 O# l: D+ }% V4 T
element文档: http://element-cn.eleme.io/#/zh-CN/component/installation
: K* h$ L$ Y! ?5 ~7 X5 I' K3 z
vue API: https://cn.vuejs.org/v2/api/
8 p" k! x: u5 Z1 P" \" d. O. }4 x3 r
# K Y6 u, b3 E5 Q, T; m) r' l s
* q: i- Z# j4 g: }& O& ~
以下是在下收集的三个常用的vue模板
3 @4 _$ y2 R7 {( L' s) U
. v( R- d7 h9 w9 G1 h
1 m* o4 A% O. m( d
1、vue-manage-system
1 B# M" z2 @7 |6 X) }% ^ a$ K8 }
# T& `6 R- o' \- l& f0 i# s
% z* w! k! w& g7 \4 \. \
git地址：https://github.com/lin-xin/vue-manage-system
a. v. F" @( D6 @# J
线上地址： http://blog.gdfengshuo.com/example/work/#/dashboard
, R. b" n1 O5 G% n, j: G
模板如图：
1 F. A" \* z6 H
7 L8 u5 V" i: o) G7 W
( s y& c* ]$ i" b! X7 z; t$ X
( R# J/ s, \7 ]5 C5 k; q
: Y6 d! f8 Z% g- b. H
2、vue-element-admin
& y$ e) \# f, b' I4 m
git地址：https://github.com/PanJiaChen/vue-element-admin
. h+ q4 p& y# S# |2 I( {2 Z
国际化版本：https://github.com/PanJiaChen/vue-element-admin/tree/i18n
9 T3 u4 w" z/ ?! @ {
# t# \! Y/ H& F5 w0 g+ K! w
) ~1 H+ v$ y4 P- N0 l/ ]
中文线上预览：https://panjiachen.github.io/vue-element-admin/#/dashboard
/ D2 _* ^% V, e5 [
& P5 t8 S$ p& @: V
) y* |) u7 K% n4 v) j
IE兼容处理：参考文章
/ U* |" T& p" Y C
模板如图：
9 i1 c; [% A/ Z) _6 |
$ D# Z. _, j9 z2 ^7 P8 C
' o1 h. b+ ~) ?( |& G
: s% z! p& t' k# C! W
, y E( t$ q4 ?3 }% g: x& E# x! X6 g% d
3、vuejs 和 element 搭建的一个后台管理界面
- d% c4 [; G1 l1 _- v. Y/ g
2 ]) V+ m4 J6 U# E! ^# {! t
. a0 ]3 h& J8 L& R, I( ^7 ^
相关技术：
9 e$ \! p- ]0 B4 b" k
vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。
7 C/ x. I5 {* s) w' b, v
element：基于vuejs2.0的ui组件库。
) a3 c q) ]. |6 ?
vue-router：一般单页面应用spa都要用到的前端路由。
* G3 m2 l' v- r6 Q* V
vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
2 @* A: ?6 ~. A: E
/ [" q4 l- U( d3 c. l
3 o5 o5 {1 l) K8 f! I& T
线上地址：https://taylorchen709.github.io/vue-admin/#/login
" ]+ v4 s/ T- I, r* Z7 x
git地址：https://github.com/taylorchen709/vue-admin
- z) p. c% c* g2 t. |
模板如图：
0 k! N( J8 I+ G; x
2 o: m3 B V: c, {4 g# H1 m6 V2 y
- b2 ?- Q9 n0 ~' K
使用：
7 }* c! E# n1 _" S; v
" P8 W) L' b/ W1 {6 T, h1 ]
5 |3 k3 X' Q% @0 i- r# y; G: W
install dependencies
. L+ O3 v4 o- r- j$ ~* D, o5 K5 O
* Q+ ]1 x6 c4 _% S9 n/ P8 D
5 [& W+ l$ O: ~$ ^6 n1 O8 t! l
npm install
$ e& V; T! y: [9 ]0 S- G
serve with hot reload at localhost:8081
: {# }+ n0 t2 r% w$ j! ?) z
& C# v2 ?0 q2 ~: L) M6 v& F
Y- { w& i0 l" Q, B3 b4 C
npm run dev
) q D Y; v0 J% m
build for production with minification
, K4 X8 T9 Q! V9 _) l! \( r
8 F% E0 l6 s* \' C8 u
/ n, j8 T2 h3 p: Y
npm run build
5 u" X& ]" c, k _8 z4 d
* V+ x( i& e9 L, @' Q" j$ j
" Z$ [5 m1 {% `& t
4、基于Vue实现后台系统权限控制
1 E9 ?! u/ p, d0 S9 c% e. y
, |5 R" F: `, S+ W1 D* K
' j" s8 ^7 F( ?
博客地址： https://blog.csdn.net/qq_32340877/article/details/79416344
/ \: K* d+ {& j9 q( h
( p. U8 U5 T7 H5 ]4 s
; t9 ~/ H' z# X
基于Vue.js 2.x系列 + Element UI 的后台系统权限控制
! {2 x A, e* A' M2 V) T' Q
: E- d6 l" E3 g& \& C
7 V; R, l- b* p4 h: [
git地址：https://github.com/mgbq/vue-permission
7 h* Q% g z- k& f4 E
线上地址：https://mgbq.github.io/vue-permission/#/dashboard/dashboard
# @3 V) H" o# b+ u+ v2 C8 k
# q; T# y1 ~/ J# { t9 E) D* k
) I, r: r. B/ q) l' Z1 t! p
( ^' _, X7 N$ o# w- l
( l; _0 K5 t! B T, R! b R2 V* ^
————————————————
$ ~0 D) C; S1 y- f7 f" x! y1 j
版权声明：本文为CSDN博主「LuviaWu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
, R; V9 R1 _- C3 B! Q+ o1 M
原文链接：https://blog.csdn.net/LuviaWu/article/details/89212051
7 Z) e4 _6 T, c5 k- Y+ `: E
- C8 x8 e- S' @1 l2 S1 R4 [
1 c8 z* F+ _' A
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5