介紹

在vue裡面很多情況下都需要拿到檔案的目錄，比如styles目錄，css目錄等等，這個時候我們的一般做法都是直接寫

../../../assets/styles/

但是在vue裡面我們可以不這麼做，在build/webpack.base.conf.js檔案中可以修改， 我們看到這個節點下已經有了檔案配置了：

這裡我們自己加入了一個styles別名，指向了assets/styles目錄：

 'styles': resolve('src/assets/styles'),

使用

在普通js中使用

直接使用styles即可，用於替代 …/…/…/assets/styles

// The Vue build version to load with the `import` command
 

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 解決移動端300毫秒點選延遲
import fastClick from 'fastclick'
// 解決各個瀏覽器顯示效果不一致的css
import 'styles/reset.css'
// 解決一畫素邊框的問題
import 'styles/border.css'
// 引入iconfont
import
 
 'styles/iconfont.css'

Vue.config.productionTip = false
fastClick.attach(document.body)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在css中使用

在css中使用要加上一個**~**

<!--lang="stylus" 表明使用stylus來寫-->
<!--scoped表明這個style的樣式只對這個元件有效果-->
<style lang="stylus"
 
 scoped type="text/stylus">
    //在css中要直接引入到styles目錄需要用到‘[email protected]’，而其他地方用‘@’就可以了,
    //但是我們在webpack.base.conf.js 設定了別名，所以可以直接使用別名 ‘style’
    //@import "[email protected]/assets/styles/varibles.styl"

    @import "~styles/varibles.styl"

疑問

build檔案不是不上傳git嗎？那其他人拉下來怎麼弄別名？