[前端]Vue.js 2.5 + cube-ui —— Plan 1 : 头部组件+TAB组件+商品页面的一半+用到的知识归纳

烈火试真金，逆境试强者

课程来源于mooc网：https://www.imooc.com/

课程地址：https://coding.imooc.com/learn/list/74.html 

感谢老师提供的学习机会 

 一 header组件

预期效果：

 

开发步骤

1.  删除了原来项目的src/assert目录、删除了HelloWorld.vue
2. index.html 修改 锁定禁止缩放

3. 新建src/common目录 用于存放资源

4. 新建src/common/fonts 图标组件
5. 新建src/common/stylus 
   1. base.styl 定义的基础样式
   2. icon.styl 字体图标的一些样式 引用了fonts下面的文件 
   3. index.styl 内部import icon和base
   4. mixin.styl 引用到cube-ui中的styl

      @import "~cube-ui/src/common/stylus/mixin.styl"

   5. variable.styl  引用了cube-ui的变量 并定义背景色和主题色

6. 代码import index 引入了stylus里的icon和base

   import 'common/stylus/index.styl'

7. 新建文件夹 src/components/support-ico 把所有的icon做成一个组件，区别在于类型不一样,1,2,3,4种尺寸
   1. support-icon.vue 组件编写都是通过.vue的方式开发 分为三个部分