Vue CLI基础-02

最新推荐文章于 2024-11-01 14:29:13 发布

凌-香果

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量208

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/Weixing108/article/details/124934523

版权

本文介绍了Vue开发中常用的两个库——ElementUI和axios的安装及使用方法。ElementUI是一套基于Vue2.0的组件库，提供丰富的UI组件，而axios是一个高效、易用的HTTP库，用于发起HTTP请求。此外，还详细阐述了VueCLI项目的嵌套路由配置，包括如何设置嵌套的路由规则和重定向，以实现复杂页面结构的管理。

摘要由CSDN通过智能技术生成

1.使用Element UI

关于Element UI

●Element Ul是一套采用Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库，提供了配套设计资源，帮助网站快速成型。
●Element UI之所以被称之为“组件库”，是因为它不再使用传统的HTML标签，而是自行定制了一系列的标签（包括标签属性)，以按钮为例，其源代码大概是这样的:

安装Element UI

●首先进入工程文件夹（如果使用IntelliJIDEA打开了此工程，直接点击lntelliJlDEA下面的Terminal圆可).然后使用npm命令安装Element Ul，以下2条命令是等效的（注意:以下命令区分大小写，例如最后的-S的字母是大写的):

npm i element-ui -S
npm install --save element-ui

●安装完成后，在工程的main.js中导入并使用Element UI：至此，已经可以在工程中使用Element UI了。

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

2.使用axios

关于axios

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

●axios的主要特点有:
-从浏览器中创建XMLHttpRequests- 从node.js 创建http请求
-支持Prom ise APl
–拦截请求和响应
–转换请求数据和响应数据-取消请求
一自动转换JSON数据-客户端支持防御XSRF

axios基本使用

●更多示例请参考axios官方文档:http: //ww w.axios-js.com/zh-cn/docs/

安装axios

●与此前的Element Ul的安装方式类似，当需要安装axios时，应该先切换到Vue CLI工程的文件夹下，然后再运行命令以安装axios，安装命令为:

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

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

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

3.Vue CLI的嵌套路由

关于嵌套路由

● 在实际应用开发中，页面的内容呈现可能存在巨大的差异

●由于Vue CLI工程是单页面的，为了保证能显示各式各样的页面，则需要将页面的整个区域都设计为<router-view/>，然后根据URL不同，加载不同的视图组件 (.vue文件)。

●但是，即使将整个页面的显示区域作为一个<router-view/>，多个页面仍可能存在共用的部分，例如:

● 如果要设计为以上风格，则页面中的右侧最大的区域也必须是一个
<router-view/>，就会形成最外部(页面所有部分）是<router-view />的同时，内部还有一个<router-view />(右侧的大区域)，在配置路由时，就需要使用到嵌套路由的做法了。
●当然，如果以上设计风格中右侧区域中仍有各页面均显示的部分，还可以继续在其内部进行嵌套，通常，并不建议嵌套太多层次。

嵌套路由的使用方式

●而嵌套路由则需要在原路由的某对象中添加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属性，使其直接重定向到子级视图，例如: