一、前言

vue是近几年来非常火的一个mvvm框架，其组件化的开发模式深受广大开发者的喜爱，和vue比较贴近的前端框架有国外的vuetify和国内ElementUi，我这里使用vuetify和vue结合开发一个后台管理系统。

二、安装部署vue

1、我这里直接使用nmp的开发方式，所以如果是使用传统的cdn开发方式可以自行引入vue的js开发即可，这里不做解释，使用npm首先要安装npm。

（1）由于node.js中已经集成了npm，所以这里直接下载node.js安装包安装即可。

（2）安装成功后在cmd中使用npm -v查看是否安装成功

（3）npm太慢可以使用淘宝镜像cnpm，安装方式点击

（4）安装成功后即可使用cnpm install vue的方式导入包

 三、开发过程

登录界面开发

1、由于本次使用的是vuetify开发界面，所有得导入以下依赖

cnpm install  vuetify  @mdi/font  material-design-icons-iconfont   vue-router -S 的依赖

 2、依赖导入后就可以进行界面的开发了，这里只是关于使用vuetify开发界面，vue环境搭建以及路由配置等就不详述了。

<template><v-app><v-content class="main"><v-container fluid fill-height><v-layout align-center justify-center><v-flex xs12 sm8 md4><v-card class="elevation-12 logBg"><v-toolbar dark color="primary"><v-spacer style="text-align: center;font-size: 20px;">心理咨询管理系统</v-spacer></v-toolbar><v-card-text><v-form action='login'><v-text-field required name="username" placeholder="请输入用户名"hint="请输入用户名" v-model="userName":label="用户名" type="text"/><v-text-field name="input-10-2" :label="密码" hint="请输入密码" min="8"placeholder="请输入密码" :append-icon-cb="() => (e2 = !e2)" v-model="password" class="input-group--focused" :type="e2 ? 'password' : 'text'"/><v-card-actions><v-spacer></v-spacer><v-btn @click="login" color="primary">登录</v-btn><v-spacer></v-spacer></v-card-actions></v-form></v-card-text></v-card></v-flex></v-layout></v-container></v-content></v-app></template>

 3、开发完成界面如图所示