vue小项目总结与笔记【四】——stylus的安装、iconfont的使用以及全局变量的使用

 

stylus css的预处理框架

 

安装：

npm install stylus --save

npm install stylus-loader --save

 

使用：stylus特色以下

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .header-abs
        position absolute
        left .2rem
        top .2rem
        width .8rem
        height .8rem
        border-radius 4em
        background rgba(0, 0, 0, .7)
        text-align center
        line-height .8rem
        .iconBack
            color #fff
            font-size .4rem

scoped是限制当前css只对当前组件有效果，避免组件之间有同类名会产生影响

iconfont的使用：

由于以前已经建立好项目了，因此

直接进入iconfont官网，找到想要的图标，点击“添加入库”

 

到购物车，添加至项目，再进入项目，下载至本地

下载完成后，留下字体文件（.eot   .svg   .ttf   .woff）和css文件

将字体文件打包成iconfont文件夹，放到src下的assets目录下的styles文件夹下，再放入iconfont.css文件

记得修改iconfont.css文件下的url，可能跟你放的路径不符

 

仍是要在main.js里引入

import 'iconfont的路径'

使用也很简单，只须要一个div或者span标签，要有一个iconfont类名便可。

这个只要到你项目下的图标复制代码就好了

<div class="iconfont otherClassName">&#xe624;</div>

成功了就是这个样子了：

 

全局变量的使用：

 

为了提升代码的可维护性，好比某些主题颜色须要重复使用的，能够把它设置成全局变量，之后要是换个主题，就在变量里改颜色就好了。

首先要在src/assets/styles/下建立一个文件：variable.styl。以背景色举例：定义一个全局变量

$bgColor

$bgColor = #00bcd4;

 

用的时候要在style样式里引入（样式里引入样式，须要在import前加@）,在写样式的时候直接用变量代替就好了

@import '../../../../../assets/styles/varibles.styl'


background-color $bgColor

 

假设个人路径是这么长　（../../../../../assets/styles/varibles.styl

那每次写这么长都很麻烦，我能够给它起个别名，好比让  ~  代替  ../../../../../assets/styles

这须要找到build/webpack.base.conf.js这个文件，找到 resolve，在里面设置就行了，以下红色字体，意思是styles指向的是  'src/assets/styles' 目录，以后就能够用styles代替 

'src/assets/styles' 了

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles'),
      'common': resolve('src/common')
    }
  }

可是在css中引入别的css样式的话，须要在使用了别名的路径前加一个   ~   符号，即

@import '~styles/varibles.styl'

 

注意：当修改了配置项以后，要重启服务器。先退出（Ctrl+C），再 npm run start 就能够了