运维开发网

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

运维开发网 https://www.qedev.com 2020-05-11 08:34 出处:网络 作者:运维开发网整理
修改【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】:存放需要的字体图
  • 修改【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‘

       

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

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

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

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

          

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

 

   配置相对路径

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

        

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

  

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

  

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"
0

精彩评论

暂无评论...
验证码 换一张
取 消