music 知识梳理

项目架构

vue-cli

vue init webpack vue-music

项目目录介绍及其图标字体，公共样式等资源准备

src
 - api
 - common
   - fonts
   - image
   - js
   - stylus 
 - components
 - router
 - store
 - App.vue
 - main.js

修改package.json文件

    "stylus": "^0.54.5",
    "stylus-loader": "^2.1.1",

修改.eslintrc.js

    'semi': ['error', 'always'],
    'no-tabs': 0,
    'indent': 0,
    'space-before-function-paren': 0

修改 main.js 文件

import 'coomon/stylus/index.styl'

修改weback.base.conf.js

    alias: {
      'src': path.resolve(__dirname, '../src'),
      'common': path.resolve(__dirname, '../src/common'),
      'components': path.resolve(__dirname, '../src/components')
    }

package.json

"fastclick": "^1.0.6",
"babel-runtime": "^6.0.0",
"babel-polyfill": "^6.2.0",

router

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/recommend'
    },
    {
      path: '/goods',
      component: goods
    }
  ]
});

<router-view></router-view>
<router-link tag= 'div'></router-link>
// 对于遇到的问题，思考我们想要什么结果，那里可能有我们需要的答案，我们怎么可以这些信息

router active

&.router-link-active
  .tab-link
    color: $color-theme
    border-bottom: 2px solid $color-theme         

slot 了解一下

<div class="slider">
  <div class="slider-group">
    <slot><slot>
  </div>
</div>

XMLHttpRequest

axios
"axios": "^0.16.1",
"better-scroll": "^0.1.15",

懒加载

"vue-lazyload": "1.0.3",

vuex

vuex文档