day59（ 使用Element U ， 使用axios ， Vue CLI的嵌套路由 ， 小结 ）

1.使用Element U

1. 关于Element UI

• Element UI是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型。

• Element UI的官方网址是：https://element.eleme.cn/

• 由于Element UI定义了大量的组件，每个组件都有许多属性，所以，学习Element UI时需要记忆大量的组件特征，这将是一个非常漫长的过程，通常不建议刻意的死记硬背，应该重点关注Element UI可以做到什么，例如有哪些样式，各组件的核心属性等用法，然后结合官方文档（https://element.eleme.cn/#/zh-CN/component/）进行开发。

2.安装Element UI

• 首先进入工程文件夹（如果使用IntelliJ IDEA打开了此工程，直接点击IntelliJ IDEA下面的Terminal即可）：

• 然后使用npm命令安装Element UI，以下2条命令是等效的（注意：以下命令区分大小写，例如最后的-S的字母是大写的）： npm i element-ui -S 或者 npm install --save element-ui

• 安装完成后，在工程的main.js中导入并使用Element UI：

  // main.js
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  Vue.use(ElementUI);

  <el-row type="flex" justify="center">
  <el-col :span="12">
  <!-- 页面元素 -->
  </el-col>
  </el-row>

   

2.使用axios

1.关于axios

• axios是一个易用、简洁且高效的http库，主要用于发起HTTP请求，并获取响应的结果。

• axios的官方网址是：http://www.axios-js.com/

• axios的主要特点有：

  • 从浏览器中创建 XMLHttpRequests

  • 从 node.js 创建 http 请求 – 支持 Promise API

  • 拦截请求和响应

  • 转换请求数据和响应数据

  • 取消请求

  • 自动转换 JSON 数据

  • 客户端支持防御 XSR

2.axios基本使用

• 发起GET请求示例：

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

• 发起GET请求示例：

  axios.get('/user', { params: { ID: 12345 } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });

• 发起POST请求示例：

  axios.post('/user'
  , {
  firstName: 'Fred'
  ,
  lastName: 'Flintstone'
  })
  .then(function (response) {
  console.log(response);
  })
  .catch(function (error) {
  console.log(error);
  });

• 更多示例请参考axios官方文档：http://www.axios-js.com/zh-cn/docs/

3.安装axios

npm i axios -S 或者 npm install --save axios

安装完成后，也需要在main.js中添加配置，配置代码为：

import axios from 'axios'
Vue.prototype.axios = axios

4.使用工程jar包文件命令启动此服务

java -jar vue-project-server-0.0.1.jar

3.Vue CLI的嵌套路由

4.小结