Vue学习(使用vue编写一个登录模块)

首先需要安装nodejs 

vue学习：
vue是一套前端渐进式框架，从dom操作中解放出来
vue基于nodejs，可以将nodejs理解为是一个运行js的平台，
而npm则类似于maven，又很多使用的js库，我们可以通过npm来引用下载兵使用这些分享的模块
webpack是一个开源的前端打包工具，也是基于nodejs的

vue工程搭建：
搭建vue工程一般会使用到vue-cli,通过npm install vue-cli -g来全局安装vue-cli
然后通过vue init webpack来快速创建一个项目，加入项目名为vue-study,完成后执行npm install安装依赖
接着执行npm run dev执行后，就可以看到一个默认的页面了

引入elementUI
在main.js中引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
然后使用elementUI
Vue.use(ElementUI);
就完成了elementui的引入

编写axios调用api
新建api.js引入axios，然后编写常量方法并导出

之后通过执行npm install --save axios element-ui将引入的elementui和axios下载并导入到package.json中

首先编写登录模块：
首先在src下新建模块Login.vue，文件中包含三部分<template> <script> <style>分别是
在template模块中：使用elementui来完成登录表单的构建：<el-form>来开始构建一个表单
在表单中<el-form-item>来开始构建一个表单块，通过v-model完成数据绑定，通过 @click.native.prevent="submitClick"
来完成登录按钮的方法事件绑定

在script模块中又包含data和methods两部分，这里重点写methods部分，
这里主要写submitClick方法，方法需要导入之前写的axios的调用api通过import {postRequest} from '../utils/api'来进行引入
方法中可以使用this来获取表单的内容_this.$router.replace({path:'/home'})可以完成页面跳转，
使用 _this.$alert('登录失败!','失败');来进行弹框提示

最后的style模块主要是css样式编写

遇到的问题：

1.使用element的rules来进行非空验证的时候，表单输入后失去焦点总是提示非空信息，即使输入了内容，最后解决是因为form表单中没有使用v-model来进行绑定，只在表单输入框中绑定是不行的。

 <el-form :rules="rules" :model="loginForm"

 

仓库地址https://gitee.com/doudoulidoushitang/vue-study