02 认识vue项目

1 项目结构

 2 集成element-ui

elment-ui官方文档

npm i element-ui -S

src/main.js中引入element-ui

import Element from 'element-ui'

import "element-ui/lib/theme-chalk/index.css"

Vue.use(Element)

 在src/App.vue中，写一个button按钮，测试一下是否起作用

<el-button type="warning">警告按钮</el-button>

发现App.vue文件vscode解析不了，在vscode安装vue插件

现在看App.vue文件，已经高亮啦

打开terminal输入npm run serve运行项目，已经起作用了

3 安装axios、qs

axios：一个基于 promise 的 HTTP 库，类ajax

qs：查询参数序列化和解析库

axios中文文档

npm install axios --save

npm install qs --save

 在src/main.js中引入axios、qs

import qs from 'qs'
import axios from "axios"

//下面是将$axios和$qs挂在原型上，以便在实例中能用 this.$axios能够拿到
Vue.prototype.$axios = axios
Vue.prototype.$qs = qs

  测试下axios起作用了没

给Button添加click事件，然后在click事件处罚时，利用axios发送get请求

 axios的get请求如下

this.$axios.get('url',{
    params:{            
        phone:12345678
        name:hh
    }
}).then(res => {
    
});

 显然已经起作用了

4 配置页面路由

src\router\index.js就是用来配置路由的。

我们在views文件夹下定义几个页面：

• Login.vue（登录页面）

• Index.vue（首页）

 删掉项目初始化的About.vue,Home.vue文件，并且参考main.js中路由写法，设置Login和Index路由

加上路由重定向，/ 重定向到 /index

 顺便再调整下App.vue文件中的内容 

编写最简单的Login.vue和Index.vue

登录界面

 首页

 刷新一下项目，重新访问http://localhost:8080，重定向到登录页面

 访问http://localhost:8080/index

 接下来，就可以着手开发登录页面了