数学建模社区-数学中国

标题: 【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 vvue后台常用模板:: H: o, x' r9 J. A5 i& k
element文档: http://element-cn.eleme.io/#/zh-CN/component/installation8 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-system1 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-system4 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; d2、vue-element-admin9 M9 j; i  c& A0 f1 d
git地址:https://github.com/PanJiaChen/vue-element-admin7 }: 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; G7 U$ L9 l- _+ t% j8 k
% W0 C) N# K3 ?6 v! L! k
3、vuejs 和 element 搭建的一个后台管理界面
. c2 Z% q# X+ A7 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 w0 h- {1 Y5 A! F$ x' H( U7 l
( _: t8 ^; S0 B. B0 ~, k' t
npm install
1 l7 x0 T1 g) s# [4 Gserve with hot reload at localhost:80816 C. S3 Z5 [* W- X

# t1 }7 b1 S) u. Z2 x/ R

+ |2 S8 W' Z- inpm run dev$ v) @5 h9 a7 o8 j
build for production with minification1 v( M7 K+ h( a9 ^4 y" z

9 M- Q8 Z3 |. [4 a

$ m+ C: N8 h* W! d) Q( ~: E5 tnpm run build5 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" @- A4、基于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