Vue initializes project loading logic
We only need to create the project, and the rest of the dependencies do not need to be installed
Let's look at main.js first, we added a line of remarks
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>和路由相关的内容。也就是说通过main.js关联到App.vue组件。
From the notes, we can see that the first thing we load is App.vue,
let’s take a look at what’s in 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> 是用来承载当前级别下的子级路由的一个视图标签；
此标签的作用就是显示当前路由级别下一级的页面。
就比如说App.vue是根组件，在它的<template>标签里使用<router-view>，而且配置好路由的情况下，就能在浏览器上显示子组件的效果；
子组件要想在页面中显示出来，一定要留好<router-view>容器，不然显示不出来；
如果这个子组件路由还有孩子路由，那也需要在子组件的<template>标签里使用<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>
That is, the content in the red box below is the content.
Where did the content below come from?
Then you need to look at the routing settings.
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
We see that the /directory i points to home
and think about the router-view tag in App.vue before. This is how I understand that
App.vue is the father of all tags, and other pages are rendered based on it. So the router-view label
is necessary. The specific appearance is that no matter whether the home or about label is selected, these two labels are there and will not disappear.
Come back and say that this / directory i points to home,
what is in this 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>
There is such a label in it
<HelloWorld msg="Welcome to Your Vue.js App"/>
Then the HelloWorld tag corresponds to the two paragraphs imported and used in the form of tags
import HelloWorld from '@/components/HelloWorld.vue'
components: {
HelloWorld
}
Then let's take a look at what's in this HelloWorld.vue,
only the template and script are intercepted
<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>
in
<h1>{
{ msg }}</h1>
The msg is passed by the msg of HomeView.vue
<HelloWorld msg="Welcome to Your Vue.js App"/>
Then how did this pass over? It is the msg in the props in the script. The msg here is synchronized to the {{msg}
} of the template
. This String is a type.
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
This msg receives the value of the msg passed by the parent component through the label
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> <!---就这里的msg,这个才是数据的来源-->
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
In fact, HomeView did nothing, just passed a value to HelloWorld.vue, and the content is HelloWorld.vue
Let's take a look at what's in AboutView.vue
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
It's very simple, it's just a title, and the corresponding page is like this
