新手一枚没有，对vue的了解一直是纸上谈兵，今天就来动手自己实践一下吧。利用vue-cli创建好项目之后，在app.vue中编写代码

,,,

  <div id="app">

    <div class="tab">

      i anm tab

    <div class="content">

      i am content

  import headerfrom './components/header/header.vue';

  export default {

components:{

"v-header":header

}

}

</style>

,,,

在main.js中

,,,

import Vuefrom 'vue';

import Appfrom './App';

/* eslint-disable no-new */

new Vue({

el:'body',

  components: { App },

});

,,,

最终页面中不会显示内容查看后台报错：

报错内容图片

查找资料后显示是因为vue的版本不同，vue1.0中可以挂载到body上，vue2.0中不允许挂载到body上，需要挂载到具体的元素上。

2.在 App.vue 文件中注册 header 组件时，变量名不能为 header ，因为和 html5 标签重复。

3.再利用stylus 时要符合他的语法结构

,,,

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

,,,

4.当你写好会发现你的代码依然会报错显示：Can't resolve 'stylus-loader in 。。。。

这是因为你的依赖中没有添加stylus和style-loader中导致的错误，重新加载所需要的依赖

npm install stylus stylus-loader --save-dev

npm  install

之后你会看到package.json中会加载相应的stylus依赖，再运行项目后就不会报错啦。