django 套vue 模板_Vue admin template + Django 快速进行Web开发

本文教大家如何使用Vue admin template和Django快速进行Web开发，旨在帮助我们使用现有的工具、框架及开源UI，让我们在基础较为薄弱的情况下，能进行Web开发。本文不会介绍过多的原理，实践为主。

Vue admin template的简单使用

Vue admin template是PanJiaChen开源的UI脚手架，通过它我们可以快速开发我们的系统，不必在考虑一个通用功能的封装问题。

Vue admin template是Vue element admin的一个纯净版本，Vue element admin继承了更多的功能，但是冗余的东西也比较多，因为不推荐直接使用Vue element admin，建议使用Vue admin template。

安装

以下安装方式为本地开发的安装及启动方式：

1

2

3

4

5

6

7

8

9

10

11

12# 克隆项目，以下命令二选一

gitclonehttps://github.com/PanJiaChen/vue-admin-template.git

gitclonehttps://gitee.com/panjiachen/vue-admin-template.git # 国内的，快，推荐

# 进入到项目目录

cdvue-admin-template

# 安装项目需要的依赖

npminstall

# 启动开发环境

npmrundev

线上部署的话，还是需要编译成静态文件，然后通过nginx进行访问，本文不介绍如果配置部署nginx，请自行百度。

1

2

3

4

5# 编译测试环境

npmrunbuild:stage

# 编译线上环境

npmrunbuild:prod

更多高级的用法如下：

1

2

3

4

5

6

7

8

9

10

11# 预览

npmrunpreview

# 预览 + 静态资源分析

npmrunpreview----report

# 代码格式检查

npmrunlint

# 代码格式检查并自动修复

npmrunlint----fix

第一个页面

依赖安装并成功启动后，接下来我们就开始我们的第一个页面的开发了。

在src/views下面创建我们Vue的展示页面。

1

2

31.在src/views下面创建一个存放新页面的目录，例如是src/views/demo。

2.在src/views/demo下创建index.vue。

3.在src/router/index.js下创建对应的访问路由。

src/views/demo/index.vue的内容如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

Index

exportdefault{

data(){

return{

}

},

methods:{

}

}

在src/router/index.js里面添加新页面对应的访问路由ÿ