新手一枚没有,对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依赖,再运行项目后就不会报错啦。