vue 2.0 实战 移动音乐app（一）项目准备工作 别名踩坑

1.package.json中新增依赖,"dependencies"，"devDependencies"

 "dependencies": {
    "babel-runtime": "^6.0.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "fastclick": "^1.0.6"
  },

 "babel-preset-stage-2": "^6.22.0",
    "babel-polyfill": "^6.2.0",
    "chalk": "^2.0.1",

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

一定要记得“只要修改过package.json”中的数据就一定要再次cnpm install,npm run dev.否则修改无效！

其他的一些规则

eslintrc.js

 'eol-last': 0,
 'space-before-function-paren': 0

webpack.base.conf.js。别名的配置，需要特别注意，因为按照视频里的一些路径常常会出错，往往就是没有配置别名（踩坑）。另外！改变webpack.base.conf.js也需要重新编译。

 alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components')
    }

此时在main.js和App.vue中引入文件终于不出错了！

// 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 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'

import 'common/stylus/index.styl'

Vue.config.productionTip = false

fastclick.attach(document.body)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

<template>
  <div id="app">
    <m-header></m-header>
    hello
  </div>
</template>

<script>
import MHeader from 'components/m-header/m-header'//一开始引入总出错就是因为没有配置components的别名，所以路径出错

export default {
  name: 'App',
  components: {
    MHeader
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>