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>