• 修改【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. Go语言学习笔记1

    1.Go语言环境搭建及基础知识 Go语言官方网站(http://golang.org) 代码包文档网站(http://godoc.org) Go语言中文网(http://studygolang.com ...

  2. python3之文件操作

    一   打开文件   根目录在d盘的文件名为‘学习资料.txt’的文件 a)绝对路径(最开始的,根目录文件)例:    e:\学习资料.txt 相对路径   直接用文件名字 b)操作方式  只读  只 ...

  3. js arrayBuffer 字节序问题,小端法,大端法

    原文博客 { var buffer = new ArrayBuffer(2) var bytes = new Uint16Array(buffer) bytes[0] = (65 << 8 ...

  4. ERP项目实施记录02

    今天去第三方公司(B公司)考察: 公司成立:2011年12月 注册地:深圳 深圳:2~3个业务员 东莞:5个开发人员,据说也是实施人员 全功能者:BOSS A公司因战略调整,要将业务"下放& ...

  5. Sqlite数据库管理(SQLite Developer) v4.0.0.528 中文版+破解方法(申明:来源于网络)

    Sqlite数据库管理(SQLite Developer) v4.0.0.528 中文破解版 SharpPlus Sqlite Developer 特性: -强大的SQL编辑器 *Sqlite Sql ...

  6. python和selenium

    错误提示: selenium.common.exceptions.SessionNotCreatedException: Message: Unable to find a matching set ...

  7. python金融与量化分析----Jupyter Notebook使用

    Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言.在本文中,我们将介绍 Jupyter notebook 的主要特性,以 ...

  8. SPRING的事务配置详解

    spring事务配置的两种方式: 1.基于XML的事务配置.2.基于注解方式的事务配置. 前言:在我们详细介绍spring的两种声明式事务管理之前,我们需要先理解这些概念 1)spring的事务管理是 ...

  9. python-Beautiful rose

    热爱python,热爱生活,python需要浪漫,让我带大家走进浪漫的国度...写的不好的地方请大佬指教 import turtle import time class Rose: def __ini ...

  10. Maven知识点积累二

    ①maven常用命令: mvn clean:清除target下编译生成的class文件 mvn compile:编译 mvn package:打包放到target下 mvn install:打包并放到 ...