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

本文链接：https://blog.csdn.net/cz004005006/article/details/86664625

烈火试真金，逆境试强者

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

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

感谢老师提供的学习机会

一 header组件

预期效果：

开发步骤

删除了原来项目的src/assert目录、删除了HelloWorld.vue

index.html 修改锁定禁止缩放

<meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0,
                   maximum-scale=1.0,
                   minimum-scale=1.0,
                   user-scalable=no">

新建src/common目录用于存放资源
新建src/common/fonts 图标组件
新建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的变量并定义背景色和主题色
代码import index 引入了stylus里的icon和base
```
import 'common/stylus/index.styl'
```
新建文件夹 src/components/support-ico 把所有的icon做成一个组件，区别在于类型不一样,1,2,3,4种尺寸
1. support-icon.vue 组件编写都是通过.vue的方式开发分为三个部分<template><script><style>
2. <template> span标签有一个动态绑定的class class="iconCls" 根据script的标签
3. <sccript> 定义计算属性定义iconCls()计算属性方法给template调用 iconCls种的classMap对应了style中的区分名字
4. <style> 不同类型去引用不同的图片要用两个东西,一个是common目录下的mixin.styl 一个是
```
    const path = require('path')

    function resolve(dir){
      return path.join(__dirname,dir)
    }     


    chainWebpack(config){
      config.resolve.alias
        .set('components',resolve('src/components'))
        .set('common',resolve('src/common'))
    }
```
  1. "~" 是相对路径
  2. 可以去vue.config.js 下配置一个 chainWebpack 的函数 __dirname是用path拿到的当前目录路径的绝对地址,所以就是项目路径配上resolve后面的地址
新建文件夹 src/components/v-header 头部组件
1. 接收的是个seller对象,所以数据通过seller得到
2. 组件所依赖的图片是放在组件目录同级以下
3. 原则上字体和颜色都用变量
4. 要记得赋初值 default(){return {}}
5. <div v-if="方法名.属性名"> 使用v-if防止深层引用报错
6. 修改App.vue
7. components 注册定义的VHeader,在外层获取数据,通过prop再传给各个组件,因为这些数据需要共用
```
<template>
  <div id="app">
    <v-header></v-header>
  </div>
</template>

<script>
import VHeader from 'components/v-header/v-header'

export default {
  name: 'app',
  components: {
    Vheader
  }
}
</script>
<style lang="stylus">
</style>
```
8. 修改.eslintrc.js 规则配置
  1. 'space-before-function-paren':0, 左括号旁边加空格忽略
  2. 'indent':0 忽略缩进
兼容第三方数据处理axios:一个非常流行的Http库
1. git地址:https://github.com/axios/axios
2. 安装:npm i axios --save 代码中引用axios作为依赖安装