新手一枚沒有偷线,對vue的了解一直是紙上談兵似扔,今天就來動手自己實踐一下吧蒲凶。利用vue-cli創(chuàng)建好項目之后熟妓,在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 },
});
,,,
最終頁面中不會顯示內(nèi)容查看后臺報錯:
查找資料后顯示是因為vue的版本不同,vue1.0中可以掛載到body上慈俯,vue2.0中不允許掛載到body上渤刃,需要掛載到具體的元素上。
2.在 App.vue 文件中注冊 header 組件時肥卡,變量名不能為 header 溪掀,因為和 html5 標簽重復(fù)。
3.再利用stylus 時要符合他的語法結(jié)構(gòu)
,,,
<style lang="stylus" rel="stylesheet/stylus">
,,,
4.當你寫好會發(fā)現(xiàn)你的代碼依然會報錯顯示:Can't resolve 'stylus-loader in 步鉴。揪胃。璃哟。。
這是因為你的依賴中沒有添加stylus和style-loader中導(dǎo)致的錯誤喊递,重新加載所需要的依賴
npm install stylus stylus-loader --save-dev
npm ?install
之后你會看到package.json中會加載相應(yīng)的stylus依賴随闪,再運行項目后就不會報錯啦。