Vue（1登录注册、2.mockjs介绍，首页导航+左侧菜单、）

一、vue-登录注册

目录

• 1. 搭建项目
  • 1.1 使用vue-cli创建项目
  • 1.2 通过npm安装element-ui
  • 1.3 导入组件
• 2 创建登录页面
  • 2.1 创建登录组件
  • 2.2 引入css（css.txt）
  • 2.3 配置路由
  • 2.4 在Login组件中将提交按键调整为100%宽度
  • 2.5 运行效果
• 3. 后台交互
  • 3.1 引入axios
  • 3.2 axios/qs/vue-axios安装与使用
    • 3.2.1 安装axios
    • 3.2.2 发送get请求：
    • 3.2.3 发送post请求：
    • 3.2.4 简化axios使用

1. 搭建项目

---

工程方式搭建项目，请将测试需要用的后台web服务程序事先准备好。

1.1 使用vue-cli创建项目

---

在命令行，到自己的vue工程存放的目录，运行一下命令，前提是vue-cli先安装好。

vue init webpack vuepro

1.2 通过npm安装element-ui

---

npm install element-ui -S

1.3 导入组件

---

打开 src目录下的main.js，该文件是项目的入口文件，所以在这里导入，其他组件均可使用，不用再导入。

import Vue from 'vue'

//新添
import ElementUI from 'element-ui' 

//新增
import 'element-ui/lib/theme-chalk/index.css'

//新增
Vue.use(ElementUI) 
。。。

2 创建登录页面

---

2.1 创建登录组件

---

1） 新建views目录，在目录上右击，选择新建vue（简单模块）创建Login

<template>
</template>

<script>
</script>

<style>
</style>

2）在element-ui组件，在form组件中找到与登录页面类似的组件，拷贝代码到刚新建的Login组件中，修改为自己需要的登录页面，页面包含：账户，密码， 提交按钮

<template>
    <div>
        <el-form >
            <el-form-item label="账户" >
              <el-input type="password" v-model="userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" >
              <el-input type="password" v-model="passWord" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
         </el-form>
    </div>
</template>

<script>
  export default {
    name: 'Login',
    data: function() {
      return {
         userName: null,
         passWord: null,
      }
    },
    methods: {
      submitForm: function() {
          console.log("fdfdd");
      }
    }
  }
</script>

<style>
</style>

2.2 引入css（css.txt）

---

按照css.txt中的说明进行引入，用于控制样式，加入样式

base64编码：
基于64个可打印字符来表示二进制数据，用于传输8Bit字节代码，可用于在HTTP环境下传递较长的标识信息。采用Base64编码具有不可读性，需要解码后才能阅读。

2.3 配置路由

---

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

//首先导入组件
import Login from '@/views/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      //配置路由，根路径访问Login组件
      path: '/',
      name: 'Login',
      component: Login
    }
  ]
})

2.4 在Login组件中将提交按键调整为100%宽度

---

<el-button type="primary" @click="submitForm('ruleForm')" style="width:100%">提交</el-button>

2.5 运行效果

---

在项目目录，运行一下命令，启动服务：

npm run dev

界面效果：

3. 后台交互

---

3.1 引入axios

---

axios是vue2提倡使用的轻量版的ajax。它是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests，与Vue配合使用非常好。
vue.js有著名的全家桶系列：vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。其中vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应，但在vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios

3.2 axios/qs/vue-axios安装与使用

---

注：