百川创业日志-2020614

上次我们创建了前端工程，今天我们使用vue来创建页面

<template>
  <div id="app">
    <MMDefaultHeader></MMDefaultHeader>
    <WaterfallContainer></WaterfallContainer>
  </div>
</template>

<script>
import Vue from 'vue'
import Element from 'element-ui'
import WaterfallContainer from "./components/Waterfaller"
import MMDefaultHeader from './components/Header'
import './components/iconfont.js'
Vue.use(Element)
export default {
  name: "App",
  data() {
    return {
    };
  },
  components: {
    WaterfallContainer,
    MMDefaultHeader
  }
};
</script>

<style>
@font-face {
  font-family: 'iconfont';  /* project id 1884117 */
  src: url('//at.alicdn.com/t/font_1884117_n0ygc4aakcf.eot');
  src: url('//at.alicdn.com/t/font_1884117_n0ygc4aakcf.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1884117_n0ygc4aakcf.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1884117_n0ygc4aakcf.woff') format('woff'),
  url('//at.alicdn.com/t/font_1884117_n0ygc4aakcf.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1884117_n0ygc4aakcf.svg#iconfont') format('svg');
}
</style>

组件header的代码如下

<template>
  <div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
      <svg class="icon headeravatar" aria-hidden="true">
        <use xlink:href="#icon-user--avatar"></use>
      </svg>
      </el-header>
    </el-container>
  </div>
</template>
<script>

export default {
  name: "MMDefaultHeader",
  data(){
      return{

      };
  }
};
</script>

<style scoped>
.headeravatar{
    width: 36px;
    height: 36px;
}
</style>

这里使用阿里巴巴的iconfront来做图标，大家会用这个图标之后会给大家带来很多好处。
1.我们在https://www.iconfont.cn/
里面找到想要的icon,然后添加到购物车

2. 点击你的购物车

   
   截屏2020-06-14 下午10.53.55.png
   

   添加至项目

   
   截屏2020-06-14 下午10.55.38.png
   3.加入项目之后下在到本地，然后将iconfont.js 导入到你的webpack工程里面。
   使用时

import './components/iconfont.js'
<svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-user--avatar"></use>
      </svg>

将 icon-user--avatar 换成你自己的名字

好了，我们现在可以在webpack里面方便的使用alibaba icon font了。