【element-ui】

目录

1. vue怎么引入和配置使用element-ui框架

 2.修改端口

3. Vue+ElementUI设计页面

4 .axios/qs/vue-axios安装及使用步骤

 5.axios提交方式

  1.GET提交

      2.POST提交

 3.vue项目对axios的全局配置

6.登录案例

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

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

    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

 2.修改端口
vue-cli构建的项目，在控制台npm run dev启动后，默认的调试地址是8080端口的但是大部分时候，
        我们都要并行几个项目开发，很有可能已经占用了8080端口，所以就涉及到如何去更改调试地址的端口号了
        config --> index.js  
        dev: {
          // Paths
          assetsSubDirectory: 'static',
          assetsPublicPath: '/',
          proxyTable: {},
          host: 'localhost', 
          port: 8083,       // 在这里修改端口号
          autoOpenBrowser: false,
          errorOverlay: true,
          notifyOnErrors: true,
        }, 

3. Vue+ElementUI设计页面
 https://element.eleme.cn/#/zh-CN

4 .axios/qs/vue-axios安装及使用步骤
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'

 vue-axios
      vue-axios是在axios基础上扩展的插件，在Vue.prototype原型上扩展了$http等属性，可以更加方便的使用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=>{});

 5.axios提交方式
  1.GET提交
       axios.get('/user', {//注意数据是保存到json对象的params属性
        params: {
          ID: 12345
        }
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });

      2.POST提交
  axios.post('/user', {//注意数据是直接保存到json对象
        firstName: 'Fred',
        lastName: 'Flintstone'
      }).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      }); 

 3.vue项目对axios的全局配置
 路径src/api/http.js

/**
 * vue项目对axios的全局配置
 */
import axios from 'axios'
import qs from 'qs'
 
//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action
 
// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;
 
//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
    data = qs.stringify(data);
    return data;
};
 
 
// 请求拦截器
axios.interceptors.request.use(function(config) {
    return config;
}, function(error) {
    return Promise.reject(error);
});
 
// 响应拦截器
axios.interceptors.response.use(function(response) {
    return response;
},