vue+elementUI开发 及登录案例

目录

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(V