bootstrap设计登录页面_微服务和VUE(2) 搭建前端登录界面

保持心中的那道光未来有人可能借助这道光走出黑暗.

前言：

我们使用前端框架为ElementUI，和bootstrap差不多，但更适合VUE双向数据绑定和组件化的特性。

ElementUI官网： /#/zh-CN/component/installation

熟悉bootstrap的话，上手很快，ElementUI基本就是在bootstrap的基础上做的，但是相对bootstrap来说，个人觉得ElementUI组件种类更丰富一些。

1. 认识VUE项目工程

这里主要看两部分：

(1) src里面的文件，我们主要进行操作的，也是在这个文件夹里。

components：放置我们公用的组件，比如页面的导航栏等等

router：前端的路由配置

App.vue:主要代码如下

VUE是单页面前端框架，也就是说其他的组件都是放在一个页面中的，即放在App.vue这个页面中，我们可以尝试注释掉，看看页面中会发生什么变化。

main.js：重要的配置中心，我们引入一个配置组件，会加在这里。比如我们接下来会引入ElementUI，就会在这里通过import的方式引入

(2) index.html

user-vue

index.html里的代码是不是和我们以前编写的HTML文件很像。个人理解：我们编写的vue文件最终会编译成html，从而插入到这个文件中。在项目中，我们基本不会修改这个文件，唯一会修改的地方也许就是那个了。

好了，vue的工程基本也就这样。下面我们开始动手开发。

2. 引入ElementUI

(1)下载ElementUI

在项目目录，右键cmd黑方框中输入：cnpm i element-ui -S

下载完成后，可以在node_modules找到ElementUI文件夹，如图：

(2) 在项目中引入ElementUI

打开main.js文件，通过import语句引入项目，然后使用Vue.use(ElementUI).将ElementUI加入到vue的开发环境中。

接下来我们通过编写登录界面学习ElementUI的使用。

3. 编写登录界面

(1) 新建login.vue

在src/compontens/page/login文件夹中，新建login.vue

让我们来分析一下生成的代码

export default {name: "login" }

(2)编写相关代码

在ElementUI官网上我们可以找到Form表单的组件，选择适合自己的，复制到自己的文件中即可。

贴上我的代码：(ps：真正用好ElementUI也不简单)

label->

`系统登录`

auto-complete="off" placeholder="账号"> auto-complete="off" placeholder="密码">登录

export default {name: 'login', // 绑定的数据 data() {return {loginForm: {username: '',password: '' }, //表单中字段验证规则 rules: {username: [{required: true, message: '请输入用户名', trigger: 'blur'},],password: [{required: true, message: '请输入密码', trigger: 'blur'},] } } } } .login-container {border-radius: 15px; background-clip: padding-box; margin: 90px auto; width: 350px; padding: 35px 35px 15px 35px; background: #fff; border: 1px solid #eaeaea; box-shadow: 0 0 25px #cac6c6; } .login_title {margin: 0px auto 40px auto; text-align: center; color: #505458; }