Vue2-集成Element-ui、Fontawesome、Axios先容与使用

[img=80%,60%]https://i-blog.csdnimg.cn/blog_migrate/1c3e641eef8f8153b6c8ddf7fc5718c6.jpeg#pic_center[/img]

  
更多相关内容可查看
前期准备

脚手架生成vue2项目：NodeJS安装并生成Vue脚手架(保姆级)
Element UI先容

Element UI 是一个基于 Vue.js 2.0 的桌面端组件库。它提供了一套丰富且易于使用的组件，如表格、对话框、工具提示、导航菜单、表单、卡片等，可以帮助开发者快速构建出高质量的界面。
Element-ui安装使用

1.保举使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

1. npm i element-ui -S

复制代码

2.在 main.js 中写入以下内容

1. import Vue from 'vue';
2. import ElementUI from 'element-ui';
3. import 'element-ui/lib/theme-chalk/index.css';
4. import App from './App.vue';
6. Vue.use(ElementUI);
8. new Vue({
9.   el: '#app',
10.   render: h => h(App)
11. });

复制代码

3.想要什么功能直接官网cv大法
Element md文档
Element官网文档
例：要一个树形布局
直接copy

会发现很多都是开箱即用的功能，直接cv即可完成

这实在对自己做后端的朋友很友好，有直接的展示以及对应的代码copy，可以快速上手学习
Fontawesome先容

Fontawesome官方图标库
Fontawesome中文图标库
FontAwesome 是一种流行的图标库，它提供了大量的可缩放矢量图标，可以被定制——巨细、颜色、阴影以及任何可以用 CSS 完成的任何事情。
FontAwesome 的主要特点包括：
   

• 矢量图标：FontAwesome 的图标是矢量的，这意味着你可以将它们缩放到任何巨细，而不会失去清晰度。这使得 FontAwesome 非常得当用于响应式计划。
  
• 可定制：你可以使用 CSS 来定制 FontAwesome 图标的颜色、巨细、阴影等。这使得 FontAwesome 可以轻松地适应你的品牌和计划指南。
  
• 大量图标：FontAwesome 提供了大量的图标供你选择，包括各种箭头、形状、符号、物品和动物。此外，FontAwesome 还定期更新，添加新的图标。
  
• 易于使用：FontAwesome 非常易于使用。你只需要将 FontAwesome 的 CSS 文件添加到你的项目中，然后就可以通过简单的 HTML 代码来添加图标。
  
• 兼容性：FontAwesome 图标在所有现代浏览器中都有很好的支持，包括 Internet Explorer 4 及以上版本。
  
• 开源：FontAwesome 是开源的，这意味着你可以免费使用它，并可以查看和修改其源代码。
  

  Fontawesome安装使用

安装命令

1. npm install font-awesome

复制代码

main.js中引入

1. import 'font-awesome/css/font-awesome.min.css';

复制代码

在vue中直接使用

1. <i class="fa fa-camera-retro"></i>

复制代码

Axios先容

Axios官方文档
Axios 是一个基于 promise 的 HTTP 客户端，可以用于浏览器和 node.js 中。它提供了一个简单的 API，用于处置惩罚 HTTP 请求和响应。Axios 是开源的，并且在 GitHub 上有大量的贡献者。
以下是 Axios 的一些主要特点：
   

• 从浏览器中创建 XMLHttpRequests
  
• 从 node.js 创建 http 请求
  
• 支持 Promise API
  
• 拦截请求和响应
  
• 转换请求数据和响应数据
  
• 取消请求
  
• 主动转换 JSON 数据
  
• 客户端支持防御 XSRF
  

  使用 Axios，你可以很轻易地发送 GET、POST、PUT、DELETE 等请求，并处置惩罚它们的响应。你还可以设置请求的头部、参数、超时时间等。
Axios安装使用

1. npm install axios

复制代码

看一下如下代码,我的后端服务启用的是8088端口

1. <script>
2. import Element from './components/Element.vue';
3. import axios from 'axios';
5. export default {
6.   name: 'App',
7.   data:function(){
9.   },
10.   created:function(){
11.     axios.get("http://localhost:8088/hello?name=lisi").then(function(response){
12.       console.log('ssss');
13.     })
14.   },
15.   components: {
16.     Element
17.   },
18.   methods:function(){
20.   }
21. }
22. </script>

复制代码

后端代码

这样会存在一个跨域问题

什么是跨域问题？

• 同源页面：类似的协议、主机、端口号
  
• 非同源页面:协议、主机、端口号 有一个不同即位非同源页面
  

个人理解：非同源页面发送ajax请求，也无法读取非同源页面的cookie，以是当我前端的项目在8080端口，后端的项目在8088端口，就会产生跨域问题
如何解决跨域问题？
1.springboot可以写一个配置类如图，来配置一些是否允许跨域的信息，配置类可以让所有的Controller的跨域进行生效

1. import org.springframework.context.annotation.Configuration;
2. import org.springframework.web.servlet.config.annotation.CorsRegistry;
3. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
5. @Configuration
6. public class CorsConfig implements WebMvcConfigurer {
8.     @Override
9.     public void addCorsMappings(CorsRegistry registry) {
10.         registry.addMapping("/**") //允许跨域访问的路径
11.                 .allowedOrigins("*") //允许跨域访问的源
12.                 .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") //允许请求方法
13.                 .maxAge(168000) //预检间隔时间
14.                 .allowedHeaders("*") //允许头部设置
15.                 .allowCredentials(true); //是否发送cookie
16.     }
17. }

复制代码

2.在需要进行跨域的Controller上加@CrossOrigin注解即可
解决了跨域将后端的代码在前端进行呈现以下

1. <template>
2.   <div>
3.     <h1 >{{tabledata}}</h1>
5.   </div>
6. </template>
8. <script>
9. import axios from 'axios';
10. export default {
11.   data() {
12.     return {
13.       tabledata: [],
14.     };
15.   },
16.   created:function(){
17.     axios.get("http://localhost:8088/hello?name=lisi").then((response)=>{
18.       this.tabledata = response.data
19.     })
20.   }
21. };
22. </script>
23. <style>
24. .el-dropdown-link {
25.   cursor: pointer;
26.   color: #409eff;
27. }
28. .el-icon-arrow-down {
29.   font-size: 12px;
30. }
31. </style>

复制代码

到这里实在很多做后端的朋友想自己玩前后端就会名顿开原来如此轻易！
本篇小结

本文只是帮助各人入门，以及拓展开发的方式，每一个组件都可以实现很强大的功能，更多的功能请详细查看官方提供的文档，险些都是直接cv可用，加上一丁点vue的知识即可进行开发
这里对文章所用到的官方文档在进行一次汇总
Element md文档
Element官网文档
Fontawesome官方图标库
Fontawesome中文图标库
Axios官方文档

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。