Vue inicializa la lógica de carga del proyecto

Vue inicializa la lógica de carga del proyecto

creación de proyectos

Solo necesitamos crear el proyecto, y el resto de dependencias no necesitan estar instaladas

Veamos primero main.js, agregamos una línea de comentarios

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组件。

De las notas, podemos ver que lo primero que cargamos es App.vue,
echemos un vistazo a lo que hay en 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>

Es decir, el contenido en el cuadro rojo a continuación es el contenido. ¿

De dónde proviene el contenido a continuación?
Entonces debe mirar la configuración de enrutamiento.

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

Vemos que el /directory i apunta a home
y pensamos en la etiqueta de vista de enrutador en App.vue antes. Así es como entiendo que
App.vue es el padre de todas las etiquetas, y otras páginas se procesan en función de él. Así que la etiqueta de vista de enrutador
es necesaria La apariencia específica es que no importa si se selecciona la etiqueta de inicio o acerca de, estas dos etiquetas están allí y no desaparecerán.

Regrese y diga que este / directorio apunta a casa,
lo que hay en este 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>

Hay tal etiqueta en él.

<HelloWorld msg="Welcome to Your Vue.js App"/>

Luego, la etiqueta HelloWorld corresponde a los dos párrafos importados y utilizados en forma de etiquetas.

import HelloWorld from '@/components/HelloWorld.vue'

  components: {
    HelloWorld
  }

Luego, echemos un vistazo a lo que hay en este HelloWorld.vue,
solo se interceptan la plantilla y el 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>

en

<h1>{
   
   { msg }}</h1>

El mensaje se pasa por el mensaje de HomeView.vue

<HelloWorld msg="Welcome to Your Vue.js App"/>

Entonces, ¿cómo pasó esto? Es el mensaje en los accesorios del script. El mensaje aquí está sincronizado con el {{msg} } de la plantilla
. Esta cadena es un tipo.

<script>
export default {
    
    
  name: 'HelloWorld',
  props: {
    
    
    msg: String
  }
}
</script>

Este mensaje recibe el valor del mensaje pasado por el componente principal a través de la etiqueta

<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>

De hecho, HomeView no hizo nada, solo pasó un valor a HelloWorld.vue y el contenido es HelloWorld.vue.

Echemos un vistazo a lo que hay en AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

Es muy simple, es solo un título, y la página correspondiente es así