• 修改【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"

  

                         

seller【3】目录接口&header组件 -【配置相对地址】的更多相关文章

  1. 外卖app的header组件开发

    1.webpack框架创建 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpa ...

  2. 项目Header组件的开发注意事项

    npm install stylus --save npm install stylus-loader --save 移动端一般采用rem布局方式 Header组件里iconfont的使用和代码优化: ...

  3. Angular4.x 安装|创建项目|目录结构|创建组件

    Angular4.x 安装|创建项目|目录结构|创建组件 安装最新版本的 nodejs node.js 官网:https://nodejs.org/zh-cn/ 去官网下载 node.js,下一步下一 ...

  4. 命名和目录接口 JNDI-The Java Naming and Directory Interface

    命名和目录接口 JNDI-The Java Naming and Directory Interface JNDI (The Java Naming and Directory Interface)为 ...

  5. Java Naming and Directory Interface (JNDI) Java 命名和目录接口

    https://www.oracle.com/technetwork/java/jndi/index.html Lesson: Overview of JNDI (The Java™ Tutorial ...

  6. 【vue】饿了么项目-header组件开发

    1.数据传递的理解 在App.vue中用到了header组件,首先注册组件 components: { 'v-header': header } 然后才能引用 <v-header :seller ...

  7. JNDI(Java Naming and Directory Interface,Java命名和目录接口)

    JNDI(Java Naming and Directory Interface,Java命名和目录接口)是SUN公司提供的一种标准的Java命名系统接口,JNDI提供统一的客户端API,通过不同的访 ...

  8. vue2.0 + vux (一)Header 组件

    1.main.js import Vue from 'vue' import FastClick from 'fastclick' import VueRouter from 'vue-router' ...

  9. vue2.0 之 douban (三)创建header组件

    1.分析 首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题.我们先不做有搜索框的h ...

随机推荐

  1. Window应急响应(一):FTP暴力破解

    0x00 前言 ​ FTP是一个文件传输协议,用户通过FTP可从客户机程序向远程主机上传或下载文件,常用于网站代码维护.日常源码备份等.如果攻击者通过FTP匿名访问或者弱口令获取FTP权限,可直接上传 ...

  2. C#设计模式--观察者模式(发布-订阅模式)

    0.C#设计模式--简单工厂模式 1.C#设计模式--工厂方法模式 2.C#设计模式--抽象工厂模式 3.C#设计模式--单例模式 4.C#设计模式--建造者模式 5.C#设计模式--原型模式 6.C ...

  3. linux下内核的配置和编译(2017-1-17)

    4.1 什么是内核 内核是操作系统内核的简称,内核负责实现操作系统的核心功能,包括资源管理模块,譬如内 存管理.调度系统等等.内核不包括应用程序.对于 linux 内核而言全世界是有一份内核,我们可 ...

  4. db2 tablespaces table bufferpools reorgs

    通过快照查看表空间 表 缓冲池信息 db2 get snapshot for tablespaces on teps > tablespace.infodb2 get snapshot for ...

  5. RasterEdge.DocImageSDK9.8.7 破解版

    RasterEdge.DocImageSDK9.8.7 破解版 本人破解了 RasterEdge.DocImageSDK9.8.7 ,有需要的同学请联系本人.

  6. 混合模式为什么成为占有率最高的app开发技术

    在企业移动战略布局中,app已成为连接业务与用户最主要的载体,同样其开发技术目前也处于十分成熟的阶段,而从技术实现的角度去考量,很多从业者可能并不知道,越是大企业.越是IT预算多的企业,他们的移动ap ...

  7. 阿里云容器服务与ASP.NET Core部署:用 docker secrets 保存 appsettings.Production.json

    这是我们使用阿里云容器服务基于 docker 容器部署 asp.net core 应用遇到的另一个问题 —— 如果将包含敏感信息的应用配置文件 appsettings.Production.json ...

  8. hive拉链表

    前言 本文将会谈一谈在数据仓库中拉链表相关的内容,包括它的原理.设计.以及在我们大数据场景下的实现方式. 全文由下面几个部分组成:先分享一下拉链表的用途.什么是拉链表.通过一些小的使用场景来对拉链表做 ...

  9. iOS循环引用常见场景和解决办法

    好多场景会导致循环引用,例如使用Block.线程.委托.通知.观察者都可能会导致循环引用. 1.委托 遵守一个规则,委托方持有代理方的强引用,代理方持有委托方的弱引用. 实际场景中,委托方会是一个控制 ...

  10. mail 发送email

    (一)首先安装ssmpt和mailutils: sudo apt-get install ssmtp mailutils (二)接下来编辑配置文件sudo gedit /etc/ssmtp/ssmtp ...