Django项目开发（四）Vue2 ElementUI页面制作

前文目录：

前文讲了我们怎么把vue和django结合起来，这次我们讲讲vue的基本开发

初见Vue

项目结构

假设我们已经知道了css html 和 JavaScript 基础，那 Vue 对你来说肯定不是难事，他的简单易用性可以快速上手

我们查看我们之前生成的单页应用的src目录

.
├── App.vue # 入口vue组件
├── assets # 资源目录
│   └── logo.png 
├── components # 组件目录
│   └── Hello.vue # 组件
├── main.js # 启动代码
└── router # 路由
    └── index.js

.vue 文件是 vue 的基本组成形式，一个文件代表一个组件

其中 template 区域表示本组件的模版， script 区是代码区 type 标签里面则是样式声明

type 可以使用多种样式表语言 css less 什么的都可以（需要安装相关支持）

我们再看App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

那么这个组件是怎么变成入口的呢

可以看外面的index.html

中间有个 id=app 的div

在 main.js 中有这么一段

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

这里的 el 就是这个 vue 实例要挂载的元素
template 是用来挂在的模版
components 是用来挂在的内容，也就是我们的 App.vue

这样App.vue的内容就自动注入到index.html中了

数据绑定

前面我们讲了，Vue 的特点之一是数据双向绑定，也就是说展示的内容和模型的内容是绑定的，同步的，修改一个，另一个就会一起变化，Vue在实现这个功能的时候，为了将所有数据都收归 Vue 来管理，所以数据的声明必须由 Vue 来操作

我们移步hello.vue

在代码块中有个 data() 函数，这个函数里面就是声明我们的数据区，在这里面声明的内容，Vue会自动给他加上 getter和setter，这个过程对使用者来说事透明的，你不会注意到她，当一个数据读取或者变化的时候，就会调用setter和getter，从而触发 Vue 对绑定这个数据的内容的刷新，所以我们的数据块，都在 data() 区声明，是很重要的

另外，data() 返回的不是一个数据实例，而是一个返回数据副本的函数，这个很重要

为什么呢，因为我们知道 Vue 的组件是可以复用的，所以每次都要返回单独的数据实例呀，否则不是成了相当于 Java 中 static 数据的东西了吗


<h1>{{ msg }}</h1>

data () {
    return {
        msg: 'Welcome to Your Vue.js App'
    }
}

我们看到，我们声明的数据，在写模版的时候用双层引号来渲染

路由

我们的App.vue是怎么显示出hello.vue组件的内容的呢

我们看到 app 的模版中有个

1	<router-view></router-view>

这个标签会自动渲染路由的内容

在 main.js 中我们引入了路由

1	import router from './router'

在router的index.js中我们看到

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/', //配置访问路径
      name: 'Hello', //配置路径“页面”名称
      component: Hello //配置要渲染的组件
    }
  ]
})

使用了vue-router工具来做路由

导出了一个路由配置

所以我们在访问路径/的时候，Hello.vue就渲染在了 router-view 上

安装vue-admin

ElementUI文档

ElementUI是饿了吗弄的一个模版，适合来做管理工具的前端

我们这里就直接使用一个基于elementui的开源模版vue-admin来开发

开发的时候又问题随时参考文档

vue-admin

下载下来

删掉 frontend 目录里面的所有内容，然后把下载下来的 vue-admin 内容解压 copy 进去

然后在 frontend 中执行

1	npm install --registry=https://registry.npm.taobao.org

因为里面有安装node-sass

如果安装出错了，可以先安装这个东西(支持一种css加强语法的工具)，加上镜像

1	SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

npm build

我们还需要修改webpack中的一个参数让导出的静态调用地址适配 django中的设置

1	STATIC_URL = '/static/'

打开 vue 项目中的webpack.config.js文件

修改为

1
2
3

assetsRoot: path.resolve(__dirname, '../dist/static'),
assetsSubDirectory: '',
assetsPublicPath: '/static/',

这样webpack导出的内容中的static的东西，都会以/static/的url前缀去调用，和django中一样了

访问 django 的站点 http://127.0.0.1:8000/qk_deploy/

和 vue 的测试站点 http://127.0.0.1:8010/

现在都可以正确访问我们的内容了

但是为了不每次访问的时候都打包，所以一般我们用 vue 的测试站点来进行测试

对接API：登陆

我们可以看到 vue-admin 里面使用的是 axios 作为 Ajax 库

作为示范，作者使用 mock 来制作了假数据

我们屏蔽掉 mock 开始接入我们写好的 django 登陆 api

1
2
3

// 修改 main.js 屏蔽mock
// import Mock from './mock'
// Mock.bootstrap();

修改 api.js,设置为我们的接口地址

1 2	// let base = ''; let base = 'http://127.0.0.1:8000/qk_deploy/api'

访问 http://127.0.0.1:8080/#/login

测试登陆

我们已经可以请求登陆啦~~

初见Vue

项目结构

数据绑定

路由

安装vue-admin

对接API：登陆

项目结构