vue+elementUI注册及登陆

本章目标：vue+elementUI完成注册及登陆

1. vue怎么引入和配置使用element-ui框架
   1.1 使用vue-cli脚手架工具创建一个vue项目
   vue init webpack pro01

1.2 npm安装elementUI
cd pro01 #进入新建项目的根目录
npm install element-ui -S #安装element-ui模块

重要的事情说三遍：在指定位置!!!在指定位置!!!在指定位置!!!~~~添加三行代码

1.3 在项目中src目录下找到main.js，并在指定位置添加三行代码（main.js是入口文件，所以在这里引入就行，页面就不用引入了）
import Vue from ‘vue’

  import ElementUI from 'element-ui' //新添加1
  import 'element-ui/lib/theme-chalk/index.css' //新添加2，避免后期打包样式不同，要放在import App from './App';之前
  
  import App from './App'
  import router from './router'


  Vue.use(ElementUI)   //新添加3
  Vue.config.productionTip = false

1.4 测试
修改HelloWorld.vue添加elementUI组件查看效果

2. Vue+ElementUI设计登陆页面

   注1：相关样式见资料“css.txt”

   注2：

3.2 qs
qs.js它是一个url参数转化的js库。用法就两个：
var obj = qs.parse(‘a=b&c=d’); //将URL解析成对象的形式：{a:‘b’,c:‘d’}
var str = qs.stringify(obj); //将对象 序列化成URL的形式，以&进行拼接：a=b&c=d’

3.3 vue-axios
vue-axios是在axios基础上扩展的插件，在Vue.prototype原型上扩展了$http等属性，可以更加方便的使用axios

3.4 axios/qs/vue-axios安装及使用步骤
1.安装
npm install axios -S
npm install qs -S
npm install vue-axios -S

  2.修改main.js文件
  #import axios from 'axios'
  #import qs from 'qs'
  import axios from '@/api/http'             #vue项目对axios的全局配置      
  import VueAxios from 'vue-axios' 
  Vue.use(VueAxios,axios)

  3.之后就可以直接在Vue组件文件的methods里使用了  
  this.axios.post(url,params).then(resp => {
  console.log(resp);
  }).catch(resp=>{});