项目开发——Iconfont的使用以及vue基础

前期认知

1.先来简单认识一下vue.js.相信听过vue的人应该都知道它是一个渐进式框架，那什么是渐进式框架呢？
我的理解是将vue作为应用的一部分嵌入，一点一点地对原来的界面进行重构，实现更好的交互体验.

另外将我之前了解的框架query框架与之进行一个对比：
jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容： $ (“lable”).val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。也就是传说中的MVVM模式(也就是数据双向绑定）。

2.学习方法
通过Vue官网加上视频教程进行学习，在学习视频后，对学习内容回顾，通过在官网阅读文档，及时纠正误区。

3.下载vue源码，使用开发版本，script引入下载库文件
vue库文件分为开发版本和生产版本，开发版本包含有帮助的命令行警告。

接下来，我们可以先创建一个Vue实例了。

创建项目的步骤

（1）创建vue的实例
（2）实例接受一些参数
（3）在显示区域绑定元素
例如下面的hello vue的实例：

<div id="app"><h2>{{content}}</h2></div>
<script src="js/vue.js"></script>
<script>
	//定义一个变量接收vue实例
	//ES6中使用let（定义变量）/const（定义常量)
	//编程范式:声明式编程
	var ap=new Vue({
	       el:'#app',//用于挂载要管理的元素
		   data:{//定义一些数据
			     content:'Hello Vue'
				}
			})
//vue.js中定义了一个function叫vue
</script>

这样做的好处在于将数据处理与页面处理完全分离。

在这里也顺道对vue做一点简单的介绍，为后面的学习奠定一点基础。

vue特点和web中的高级应用

1.解耦视图和数据
将视图与数据分成两部分,亦即视图代码与业务逻辑的解耦
也就是说在vue.js中数据和View分离开的，主要是对数据进行操作。
比如说上对上面的hello vue进行隔2s进行更改的例子，在原生JS中我们要呈现如此效果，很明显需要对dom进行操作：

var dom=docunment.getElementById('app');
dom.innerHTML='hello world';

setTimeout(function(){
     dom.innerHTML= 'bye world';
},2000)

而在vue.js中，我们在data中改变数据，页面上的内容即会随之改变，而不需再直接dom进行操作。

var ap=new Vue({
	   el:'#app',
	   data:{
			 content:'Hello Vue'
		}
	})
setTimeout(function(){
     app.$data.comtent='bye world';
},2000)

2.可复用组件
页面的一个独立部分称为一个页面的一个组件，一个界面由多个组件组成，而一个组件可以为其他多个组件所用即为可复用组件。
3.前端路由组件
也就是如何使用vue.js中的vue-router
4.状态管理
一般使用vuex对项目进行管理，Vuex状态管理有五个核心的概念，分别为：
State： 保存组件的共享的状态。
Getter：用于state的延伸，就是computed计算属性的功能。
Mutation： 唯一可以改变store的状态的方法：(commit)mutation
Action: 只能提交Mutation，可以包括async操作。
Module: 解决单一状态树，导致对象过于庞大的问题。将store分割为多个module模块。相当于是嵌套子模块。

链接: vuex内容解析和vue-cli项目中使用状态管理模式.

5.虚拟DOM

以上内容可参考以下链接：
https://blog.csdn.net/tichimi3375/article/details/82776645

Iconfont的简单介绍

学习到这里，相信大家多少都对iconfont有一点了解，我就只是做一个简单的介绍：iconfont是阿里下的一个矢量图标库,我们在做项目的时候，常常会用到一些小的、经典的图标，比如搜索、联系人等。而阿里巴巴矢量图标库为我们提供了大量，各式各样的经典图标。
接下来，我们就开始进入正题。

向项目中引入iconfont

1.首先，进入iconfont的官网
2.进入图标库->官网图标库->大麦官方图标库
3.将所需要的图标加入购物车，可以在上方搜索栏直接搜索图标
4.点击右上角的购物车将所购图标添加至需要图标的本地项目（这里需要登录，登录方法常见有三种，建议使用github账号进行登录）
5.然后点击下载至本地，将图标下载至本地，此时是一个zip文件，解压缩之后我们可以看到有以下一些文件：

6.这里面包含一些CSS、JS和字体文件，其中的字体文件都是我们所必须的。也就是后缀名为.svg .woff .eot .ttf的文件，在styles目录下新建一个iconfont的文件夹，将这些字体文件放入该文件夹中。再将CSS文件放入styles文件下。

7.接下来打开项目文件，需要在inconfont.css 文件下修改引入路径：

8.在main.js中引入iconfont.css

import './assets/styles/iconfont.css'

iconfont的使用

1.复制iconfont项目里面的代码使用

<div class="iconfont back-icon">&#xe624;</div>
//<span class="iconfont">&#xe632;</span>

2.调整样式

.header-left
      width: .64rem
      float: left
      .back-icon
        text-align: center
        font-size: .4rem

MVVM模式