数学建模社区-数学中国

标题: 【VUE】vue后台常用模板 [打印本页]
作者: 杨利霞    时间: 2021-7-19 15:30
标题: 【VUE】vue后台常用模板

# h# h. _: {! p1 }【VUE】vue后台常用模板- |/ }9 H6 v" Y* X/ r
vue后台常用模板：/ a. v/ N6 w2 Z0 |: j3 s
element文档: http://element-cn.eleme.io/#/zh-CN/component/installation7 R0 u, H6 k4 ^; U9 r  P! h5 z
vue API: https://cn.vuejs.org/v2/api/3 m. c! y0 X. o* p  M6 S0 U

. J4 }" y/ s' D( A1 l- b4 F- P9 y( U+ `6 G- f+ |
以下是在下收集的三个常用的vue模板- w, P4 A1 L3 u$ N. C

. \) e& v/ r% @. a
+ l/ h, j0 u; k: s1、vue-manage-system, I9 y2 z* B+ J+ r) v. @! [
" I& [% `  n: V/ W/ ]# v6 r

% S% j8 N! I7 J" w: fgit地址：https://github.com/lin-xin/vue-manage-system
+ m2 Q- R) u  }9 @; g. `& h线上地址： http://blog.gdfengshuo.com/example/work/#/dashboard, m/ F# h8 ?) {' [' |2 R
模板如图：
1 p$ h5 p. n1 F# Y, v2 p& Z- Q/ S5 u, p

+ e- d7 p3 X' A& }1 ^7 d0 F/ B  r- w( K9 ^* p3 m: E# l

3 g( M# h  I0 h1 q2、vue-element-admin
7 y4 t6 `# b) lgit地址：https://github.com/PanJiaChen/vue-element-admin3 Z. G" U) n& ^7 J
国际化版本：https://github.com/PanJiaChen/vue-element-admin/tree/i18n
: X+ P" K* J' j! C% C1 u# c2 H5 H, S' D" c% E' H) w& }' b+ ]
3 `$ L5 T5 C4 c/ N
中文线上预览：https://panjiachen.github.io/vue-element-admin/#/dashboard
+ T7 N5 R5 W. s. s0 u
; ^6 Z. t/ v8 j3 e; r  x8 g3 k+ N) E  J0 S& Z: _2 @5 f  P
IE兼容处理：参考文章
9 Q2 C5 V0 l; ?模板如图：
- }6 m5 i3 `9 R' `/ Q5 `0 j: N. X) p- H+ @% F/ _' i9 p
+ d$ ]# v# X0 h9 H
  h) w, q: y" c1 @0 D" T

& f4 X4 |2 c# C) e; h! o3、vuejs 和 element 搭建的一个后台管理界面
4 Y# e1 ?4 U9 v% k8 r4 s: l% d- ^1 T; Y7 R5 Z( d
5 E. h+ i$ U" _0 \" W% x" U9 W
相关技术：
3 F: O* v- k  _; }9 s$ `# H( h0 y9 Uvuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。
7 @+ x0 z' @# velement：基于vuejs2.0的ui组件库。
/ H  K  l7 f. }' j! F8 fvue-router：一般单页面应用spa都要用到的前端路由。
5 l  Y/ c3 E& a5 I2 k# Nvuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。: R( w$ {# X* ]& S
5 O* M: g! `* q0 g
# M# |7 h$ e, y) R
线上地址：https://taylorchen709.github.io/vue-admin/#/login9 L) t) a2 A+ z, F
git地址：https://github.com/taylorchen709/vue-admin3 ?  `' X* a! D5 D
模板如图：
9 S+ t2 w# ]2 c! l7 [
) I2 t1 z4 x3 k! R: H6 F' i' ]- x; ?# t/ }5 z5 ?6 a
使用：
) c* D0 e* Z. G/ W0 y2 r: N1 G3 S! e- C' x0 |6 p% O: G+ _" R! M9 V" L

% L& \# ]: y7 z7 W  |& P6 n8 Rinstall dependencies
& o1 o" G+ h1 U4 F; s8 J# Y
2 {" P3 A# O: t9 C4 R) X
9 O6 C# r! e8 k3 T1 L( Q. cnpm install
$ C# S% X! t) Q; w( T# @) ?$ \) Z0 eserve with hot reload at localhost:8081
) k/ f3 z" T  M  h$ e; k- K% H) W! T/ X( U
- O" P  r3 @3 ?5 a) s
npm run dev
4 j' V" s: i; Q  }# K' w) k) L  X3 ?( hbuild for production with minification
7 }% k" X3 g. u/ X. J3 A$ d. [
6 C! l6 b3 z! Y" l8 m
2 d3 n6 k1 s: y. C' c0 ~" Hnpm run build
' r* j, |6 `1 _7 ]* D$ m
% z9 U, A. E' q; `- V4 C5 [% s, S5 ?6 l
4、基于Vue实现后台系统权限控制
% j" R4 i. u: S- R4 K3 h5 Z
, z8 d7 t4 \# I" [) j. Y1 [
2 G/ @/ [4 V( ^) ]0 e/ _& A8 {, E) [博客地址： https://blog.csdn.net/qq_32340877/article/details/79416344
* f+ t/ [+ g. o) q7 i$ a
$ c5 c( s" |1 v0 V. S, G! A6 m) I/ f6 T/ l
基于Vue.js 2.x系列 + Element UI 的后台系统权限控制
4 I' L9 }4 S, k# B2 a& A" T1 {9 o: ?: G

- W6 l. ]3 O- |5 y6 O0 N+ F$ ygit地址：https://github.com/mgbq/vue-permission
6 v/ _  ?& ?7 d" F  s线上地址：https://mgbq.github.io/vue-permission/#/dashboard/dashboard
5 |$ r$ n# s8 z6 S
3 F) f" D' A# _$ J  r/ k$ x) F: K2 n7 {! G4 m+ K1 A) ]5 k
5 m3 o7 x$ \2 t# F

0 b+ }4 z5 z* u————————————————
2 \/ x5 Q: N; p: V$ ?3 C: G版权声明：本文为CSDN博主「LuviaWu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。/ @2 W+ z3 w2 J7 i0 F0 E. P
原文链接：https://blog.csdn.net/LuviaWu/article/details/89212051) o( w& U4 f' L

  m/ T& ~: \5 s
  e' b2 j  |. f& Y4 p3 r2 Y" q



欢迎光临 数学建模社区-数学中国 (http://www.madio.net/) Powered by Discuz! X2.5