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 就能夠了