vue+elementUI完成登陆+注册

目录

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

        1.1 使用vue-cli脚手架工具创建一个vue项目

        1.2 npm安装elementUI

        1.3 在项目中src目录下找到main.js

        1.4 测试

2. Vue+ElementUI设计登陆页面

        2.1注意

                注1：相关样式见下面“css.txt”

                注2：

3. 后台交互(axios/qs/vue-axios)

        3.1 axios

        3.2.GET提交

        3.3.POST提交

        3.4注意点

                注1：axios跨域问题

                注2：axios.get提交没有问题，axios.post提交后台接收不到数据

                注3：为简化axios使用，还可以使用axios全局配置及拦截器，详情见资料“http.js”

注4：为方便开发，建议对请求地址进行封装，详情见资料“api/action.js”

                注5：^_^~~~~为进一步简化开发，

        3.5，介绍

                1. qs

                2. vue-axios

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

                1.安装

                2.修改main.js文件

---

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

        1.1 使用vue-cli脚手架工具创建一个vue项目

                 vue init webpack medpro

        1.2 npm安装elementUI

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

        1.3 在项目中src目录下找到main.js

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

并在指定位置添加三行代码（main.js是入口文件，所以在这里引入就行，页面就不用引入了）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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)   //新添加

Vue.config.productionTip = false
 import axios from '@/api/http' //vue项目对axios的全局配置      
import VueAxios from 'vue-axios' 
Vue.use(VueAxios,axios)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

        1.4 测试

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

2. Vue+ElementUI设计登陆页面

        2.1注意

                注1：相关样式见下面“css.txt”

App.vue




login.vue

                注2：