数学建模社区-数学中国
标题:
【VUE】vue后台常用模板
[打印本页]
作者:
杨利霞
时间:
2021-7-19 15:30
标题:
【VUE】vue后台常用模板
( h6 _( C4 T! ? o: t9 }
【VUE】vue后台常用模板
1 y8 q( O6 [' K! ?' T5 ]: B4 @
vue后台常用模板：
& I8 O# r6 y! s7 [% u" c2 z& s
element文档: http://element-cn.eleme.io/#/zh-CN/component/installation
: i- k# R; Z. j5 O0 y! \
vue API: https://cn.vuejs.org/v2/api/
9 _9 H% S( R3 k, S v/ j
! q5 }1 B% P2 X3 X
) I9 C% q7 b$ a: K& x
以下是在下收集的三个常用的vue模板
' |9 i" j4 Q+ \8 y4 Z" y }+ t
( u% k5 J, z7 J3 X$ i# |) |0 \
5 w. b p# `8 u8 P9 o/ Z# [
1、vue-manage-system
, h& ?8 @4 ?' C) z/ N& t
7 s1 v1 X: S) Q7 [
: q9 I8 z" K- X+ ~+ c7 J7 V4 p
git地址：https://github.com/lin-xin/vue-manage-system
5 c1 X! X$ S+ D7 K
线上地址： http://blog.gdfengshuo.com/example/work/#/dashboard
' O' n# f; }' n6 p, i
模板如图：
: k' H h/ g; w" T7 ^8 I! x
( c, T3 Y0 R0 v$ m7 R$ B" e
( L ?: o! D3 K
# Q- N, {% Q# c, A" f4 e
# Y! q! y5 f' m1 v( m: z1 H
2、vue-element-admin
5 }4 z5 u3 R& B
git地址：https://github.com/PanJiaChen/vue-element-admin
- Z& x3 r* z+ m9 {; y7 B
国际化版本：https://github.com/PanJiaChen/vue-element-admin/tree/i18n
- I: p3 b: E* D* R% {; D
+ d4 S& ]" m/ ~: b
/ e/ p0 l' R" n7 J8 m A
中文线上预览：https://panjiachen.github.io/vue-element-admin/#/dashboard
7 Y+ f+ {( O3 E( |1 r B6 i$ G' E! |
: U" U( w# Y) o" w' P7 U
- X, t! @$ t6 R) y' p
IE兼容处理：参考文章
$ W2 I8 |) S- N
模板如图：
8 Y, k6 C" o2 O7 L1 V( N
6 g2 ~/ I- l- ~" j5 S- o1 B. _
/ K+ z$ d" w2 h. F% Y9 V, K
' ~/ p7 B( E! x& @1 R* C4 ~8 Q! Z
; H& s) Q9 O9 B8 F
3、vuejs 和 element 搭建的一个后台管理界面
) X2 I+ |4 W5 G+ P
8 n) g6 K( [% }! s4 {
7 U! Q @3 f" x4 A& M# T {$ X
相关技术：
" J, n- S; q: [+ `3 d9 n* c' ]
vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。
) z5 R1 k' q6 k) N% E+ c# [( D3 J
element：基于vuejs2.0的ui组件库。
) X* o) P5 U# Y# a. s9 c2 W
vue-router：一般单页面应用spa都要用到的前端路由。
. F: ], p1 J6 T
vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
! |/ I' @/ h8 C
( ?( ~' t" H% ^
& y- u) U' K1 g* ], o$ d
线上地址：https://taylorchen709.github.io/vue-admin/#/login
* m9 i g0 y# T! q1 o9 I
git地址：https://github.com/taylorchen709/vue-admin
1 y2 y0 S7 s8 Q: y, a* h% F
模板如图：
* a' B) l3 o# V* f; o3 S: d
5 m. i) W! p; C; ^1 ~
6 f+ y; o' q/ c8 n2 _
使用：
* ?+ A! P/ b- x* a' Q( O; f2 ~0 C
! S9 V9 v6 E2 S9 K. _! |4 X
* T# G( Q3 ^5 w1 p0 `
install dependencies
3 @: ?1 J9 j# ]7 C" t
. t+ V" W$ q. h4 z
6 b+ d1 I. n2 K$ V' `' @+ Y
npm install
9 s5 u) ]' U7 q
serve with hot reload at localhost:8081
$ d3 _$ p; D# [
6 {! q( Q8 p, r5 q; z" A
$ ]3 K: i0 C$ v
npm run dev
" c- }! ?5 Y6 j
build for production with minification
" {9 [: c$ A3 w
/ L9 N- Z2 Y0 {
7 Y6 D3 k$ S% R
npm run build
# H$ U# n( `8 w. E
+ p7 @/ {5 V, u8 m; W5 g; I; X
/ J% m3 p0 Z, l
4、基于Vue实现后台系统权限控制
v% n! f; L5 l: K5 f- s6 A
6 T# S7 Z3 M% e* d
6 C8 b) N4 }+ }+ @0 v) Q8 I, G
博客地址： https://blog.csdn.net/qq_32340877/article/details/79416344
% w4 [2 h- J W3 \
: F# U& A ]+ C) F$ }9 D& V
0 J" S2 z4 s$ Y% d
基于Vue.js 2.x系列 + Element UI 的后台系统权限控制
* G3 J6 W# Q/ \8 n
; Z9 f, q, L! `3 J! A
- M; g, q+ N4 ?# M
git地址：https://github.com/mgbq/vue-permission
% M! I, G" Y$ Z
线上地址：https://mgbq.github.io/vue-permission/#/dashboard/dashboard
2 u8 K# T$ u( ]7 B* I. u
% O5 W& {1 W+ m/ [- F/ V
2 r2 p& {+ N& e( W4 _+ H
, W: `8 K; P" j, \* Y. `; A
( i6 _0 C; Y( f* b
————————————————
; q% Q) H3 a7 N) v1 w, u1 V
版权声明：本文为CSDN博主「LuviaWu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
+ P3 b2 q o5 C4 i
原文链接：https://blog.csdn.net/LuviaWu/article/details/89212051
7 f8 D- a1 F1 O6 p( x8 @7 u/ V
3 u V1 [. F- P* Y5 K- D$ q
- N8 B- j- c Q
欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)
Powered by Discuz! X2.5