Vue初始化項目加載邏輯
項目創(chuàng)建
我們只需要創(chuàng)建項目即可，剩余的依賴都沒必要安裝
我們先來看main.js,咱們加了一行備注
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app') // 掛載id='app' , 鏈接到index.html中的app，并使用template引入組件<App>和路由相關(guān)的內(nèi)容。也就是說通過main.js關(guān)聯(lián)到App.vue組件。
通過備注可知，我們首先加載的是App.vue
我們再來看一下App.vue 里都有啥
<template>
<div id="app">
<nav>
<!-- App.vue中其實就是兩個鏈接而已 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<!-- Vue 路由中的 <router-view> 是用來承載當(dāng)前級別下的子級路由的一個視圖標(biāo)簽；
此標(biāo)簽的作用就是顯示當(dāng)前路由級別下一級的頁面。
就比如說App.vue是根組件，在它的<template>標(biāo)簽里使用<router-view>，而且配置好路由的情況下，就能在瀏覽器上顯示子組件的效果；
子組件要想在頁面中顯示出來，一定要留好<router-view>容器，不然顯示不出來；
如果這個子組件路由還有孩子路由，那也需要在子組件的<template>標(biāo)簽里使用<router-view>，這樣就能在頁面上顯示子組件的孩子組件的效果；
注意：一定要使用這個<router-view>，不然頁面效果就出不來 -->
<router-view/>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
也就是下面這個紅框里的內(nèi)容才是
那下面的內(nèi)容是哪里來的呢
那就需要看一下路由設(shè)置了
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
我們看到/目錄i指向了home
再想想之前App.vue中的router-view標(biāo)簽，我是這么理解
App.vue是所有標(biāo)簽的父親，其他的頁面都是在它的基礎(chǔ)上渲染出來的，所以router-view標(biāo)簽
是必要的，具體表象就是不管是選中了home還是about標(biāo)簽，這兩個標(biāo)簽都在，不會消失的
再回來說這個/目錄i指向了home
這個HomeView.vue里有什么呢
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
里面有這么個標(biāo)簽
<HelloWorld msg="Welcome to Your Vue.js App"/>
那這個HelloWorld 標(biāo)簽對應(yīng)的是這兩段引入進來通過標(biāo)簽的方式使用的
import HelloWorld from '@/components/HelloWorld.vue'
components: {
HelloWorld
}
那我們就來看看這個HelloWorld.vue里有什么
只截取了template和script
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
其中
<h1>{{ msg }}</h1>
的msg就是HomeView.vue的msg傳遞過來的
<HelloWorld msg="Welcome to Your Vue.js App"/>
那這個是怎么傳遞過來的呢，就是script里的props里的msg，這里的msg被同步到了template的{{msg}}上
這個String就是個類型
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
這個msg接收的是，父組件通過標(biāo)簽傳過來的msg的值
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> <!---就這里的msg,這個才是數(shù)據(jù)的來源-->
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
其實HomeView啥都沒干，只是傳了一個值給HelloWorld.vue，內(nèi)容都是HelloWorld.vue的
我們再來看一下AboutView.vue里都有啥吧
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
很簡單，就只是一個標(biāo)題而已，對應(yīng)的頁面也是這樣的文章來源：http://www.zghlxwxcb.cn/news/detail-477178.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-477178.html
到了這里，關(guān)于Vue初始化項目加載邏輯的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
