介绍

在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目录需要用到‘~@’，而其他地方用‘@’就可以了,
    //但是我们在webpack.base.conf.js 设置了别名，所以可以直接使用别名 ‘style’
    //@import "~@/assets/styles/varibles.styl"

    @import "~styles/varibles.styl"

疑问

build文件不是不上传git吗？那其他人拉下来怎么弄别名？