day59(使用Element U,使用axios ,Vue CLI的嵌套路由,小结)
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的嵌套路由
1.关于嵌套路由
-
-
-
如果要设计为以上风格,则页面中的右侧最大的区域也必须是一个
<router-view/>
,就会形成最外部(页面所有部分)是<router-view/>
的同时,内部还有一个<router-view/>
(右侧的大区域),在配置路由时,就需要使用到嵌套路由的做法了。 -
-
2.嵌套路由的使用
-
嵌套路由则需要在原路由的某对象中添加children属性,此属性仍是一个数组,其内部的配置方式与routes常量是相同的,例如:
const routes = [
{
path: '/admin',
component: () => import('../views/AdminView.vue'),
children: [
{
path: 'user/list'
component: () => import('../views/admin/UserListView.vue')
},
{
path: 'user/add-new'
component: () => import('../views/admin/UserAddNewView.vue')
}
]
}
]; -
提示:以上children下的配置中,各path没有使用/作为第1个字符,则表示在父级路径的基础上增加,例如配置为user/list,由于父级配置了/admin,则完整路径为/admin/user/list。
-
另外,如果希望访问子级嵌套的视图(例如以上/admin对应的视图)时就打开某个其子级视图(例如以上/admin/user/list对应的视图),在配置存在子级的视图(例如以上/admin对应的视图)时,还可以添加redirect属性,使其直接重定向到子级视图,例如:
const routes = [
// 省略前序代码
{
path: '/admin',
redirect: '/admim/user/list',
component: () => import('../views/AdminView.vue'),
children: [
// 省略子级代码
]
}
];
4.小结
-
通过以上内容的学习,你应该能够:
-
理解Vue CLI的单页面设计思想
-
掌握安装Node.js、配置npm源、安装Vue CLI、创建Vue CLI工程、在VueCLI工程中安装常用框架
-
你应该自已做一些笔记,把相关的命令及注意事项记下来,而不是死记硬背
-
-
认识Vue CLI的工程的目录结构
-
掌握.vue视图组件的基本开发
-
认识此类文件的结构及特点
-
-
掌握Vue CLI中路由的配置
-
包括一般路由和嵌套路由
-
-
能从Element UI官网或相关网站找到你所需的(或相似的)页面设计,并处理成你需要的样子
-
永远不要死记硬背标签、属性等,而是应该尽可能多的使用各种标签,了解它们的特点,并结合官方文档去使用,从而积累经验 –
-
-
掌握使用ax ios发送请求,并处理响应的结果
-