【3】目录接口&header组件 -【配置相对地址】

• 修改【public】-【index.html】meta标签

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

• 在【src】- 新建文件夹【common】- 新建文件夹【fonts】：存放需要的字体图标库
• 　　　　　　　　　　　　　　　　 新建文件夹【stylus】：存放样式

　　stylus? =》index.styl ：引入icon.stylus【字体图标样式】 和 base.stylus【基础样式； 定义html和body】 两个样式；在【main.js】中需要引用的是【idnex.stylus】即可以引用icon和base

  import  ‘common/stylus/index.styl‘

? ? ? ?

　　　　 =》mixin.styl：这里直接引用cube-ui里面定义的全局样式

?　　　　=》variable.styl：这里引用cube-ui里面定义的全局样式变量 ，也定义一些新颜色的变量

• 文件夹【components】：新增文件夹【v-header】头部组件和文件夹【support-ico】

? ? ? ? ??

?

?　　配置相对路径

　　在文件夹【vue.config.js】中通过方法【chainWebpack】

? ? ? ??

const path = require(‘path‘) // function resolve(dir) { return path.join(__dirname,dir) //resolve是一个方法：node.js提供的path组（require（‘path’），path有一个 path.join方法 =》拼接路径 __dirname【绝对路径】 } chainWebpack(config) { config.resolve.alias .set(‘components‘,resolve(‘src/components‘)) .set(‘common‘,resolve(‘src/common‘)) .set(‘api‘,resolve(‘src/api‘)) }

?

?在vue中就可以直接使用相对地址即可：下面代码就可以找到 src/components/common/stylus/mixin 文件

@import "~common/stylus/mixin"