vue-music目录及样式初始化

目录初始化

常用目录

• api
• base
• common
  • fonts
  • image
  • js
  • stylus
• components
• router
• store
  • actions
  • getters
  • index
  • mutation-types
  • mutations
  • state

api

放置后端获取数据的js文件，常用方式有jsonp/axios。

• jsonp的github
• axios的github

  base

  存放常用的可复用的基础component

  common

  存放网页所需字体，图片，复用的js文件，和css样式文件。
  
  其中需要注意stylus文件引用顺序

  @import "./reset.styl"
  @import "./base.styl"
  @import "./icon.styl"

components

存放网页所需component

router

存放网页路由文件

store

存放网页vuex的共享数据

eslint常用配置

eslint规则

可以在官网查询配置相关规则

'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'eol-last': 0,
    'space-before-function-paren': 0
  }

eslint规则的等级有三种:

• “off” 或者 0：关闭规则。
• “warn” 或者 1：打开规则，并且作为一个警告（不影响exit code）。
• “error” 或者 2：打开规则，并且作为一个错误（exit code将会是1）。

我们所配置的rules:

• arrow-parens: 要求箭头函数的参数使用圆括号
• generator-star-spacing: 强制 generator 函数中 * 号周围使用一致的空格
• no-debugger: 禁用debugger
• eol-last: 要求或禁止文件末尾存在空行
• space-before-function-paren: 强制在 function的左括号之前使用一致的空格

webpack.base.conf 配置引用别名

配置别名，项目中引用不用添加src了。

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'base': resolve('src/base'),
      'api': resolve('src/api')
    }
  },