新人,剛開始學習 vue + webpack,一步步自己搭建。運行頁面后,編譯沒有報錯,頁面也沒有報錯,貌似 vue 實例已經(jīng)成功創(chuàng)建了。index.html 里的 <div id="app"></div> 不見了,應該是被替換掉,但是頁面卻顯示空白,想不明白,請教各位:
<head>
<link rel="stylesheet" >
</head>
<body>
<div id="app"></div>
<script src="http://http://10.0.0.2:111/scripts/build.js"></script>
</body>
上面是 index.html
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "app"
}
</script>
<style scoped></style>
上面是 App.vue
import Vue from 'vue';
import router from './router';
import store from './store';
import App from '../../../components/App.vue';
new Vue({
el : '#app',
router,
store,
components : {App},
template : "<App/>",
created(){
this.$router.push({name : "index"});
console.log("create", this);
},
});
<template>
<div>{{ name }}</div>
</template>
<script>
export default {
data () {
return{
name : "hellow",
}
},
created () {
console.log("index", this);
},
}
</script>
<style scoped></style>
上面是 index.vue
import Vue from 'vue';
import VueRouter from 'vue-router';
import index from '../../../../components/index.vue';
Vue.use(VueRouter);
const routes = [{path : "/index" , name :"index" , component : index},];
export default new VueRouter({routes})
前面漏了 router 配置,現(xiàn)在補上。
結(jié)果實際頁面上顯示的是:
<head>
<link rel="stylesheet" >
</head>
<body>
<!--function(e,n,r,o){return Oe(t,e,n,r,o,!0)}-->
<script src="http://http://10.0.0.2:111/scripts/build.js"></script>
</body>
控制臺里輸出了 “created” 那句話,沒有輸出 “index", 我就想不明白了,不報錯的話,為什么 index.vue 里面的內(nèi)容會沒有生成,我覺得是模板指向之類的問題錯了,但是搜了很久也想不到原因,請各位指點下。
咦~,你這個自然是不會顯示的啦,Index.vue都沒有在任何地方被引入,怎么會出現(xiàn)呢?
你要在App.vue文件中使用這個組件的話,兩種方式。
第一種,單獨把這個文件引入到App.vue,并且加入components選項中,然后在template模板中使用。
第二種,在App.vue中使用router-view組件,并在router/index.js中加入路由映射??吹侥愕睦又?,在Vue根實例中調(diào)用$router.push,那么這里有3個問題。1.沒有在根實例模板使用router-view 2.沒有在router/index.js中注冊路由 3. 通常是不在new Vue里這么干啦。先使用vue-cli創(chuàng)建一個demo看看吧。
對于上面的第一種方式,使用vue-cli 3.0,創(chuàng)建一個demo,看里面的HelloWorld.vue和App.vue文件就明白了。
建議先了解一下Vue實例化的各個選項、單文件組件。
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學院和江蘇省首批服務外包人才培訓基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團創(chuàng)建于1999年,經(jīng)過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術與教育服務機構,發(fā)展為教育服務業(yè)的綜合性企業(yè)集團,成為集合面授教學培訓、網(wǎng)
達內(nèi)教育集團成立于2002年,是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構,是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
曾工作于聯(lián)想擔任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍懿科技有限責任公司從事總經(jīng)理職務負責iOS教學及管理工作。
浪潮集團項目經(jīng)理。精通Java與.NET 技術, 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗,技術功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術顧問,美國Dachieve 系統(tǒng)架構師,美國AngelEngineers Inc. 系統(tǒng)架構師。