（3）用vue写去哪网——单文件组件代码结构

ゝ一世哀愁。 2022-04-15 06:00 259阅读 0赞

1. 首页文件：index.html

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>quna.com</title>
      </head>
      <body>
        <div id="app"></div>
        
      </body>
    </html>

2. 其中body中就一个div id="app"，这个div就是一个vue实例，该实例在src下的main.js

import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

同时，该实例还引入了一个名为APP的组件

components: { App },

3. App.vue组件的代码结构

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

包括了template、script、style标签

template标签内是：组件的子组件template内容；script标签是：组件的js内容，包括了组件实例的各个属性，函数，方法，注意的是，script中有组件的导出默认名字；style标签中是：样式

**4. 对Vue实例以及Vue实例中组件App.vue的解读：**

**项目入口文件index.html中div\#app用到了Vue实例，Vue实例是main.js文件，引入vue，引入了App文件下App.vue组件，引入router文件下的index.js文件（router和Vue实例相似，都是js文件，同时都有自己的组件，但Vue实例引入了router，并可以使用router）**

**App.vue引入到Vue实例的名字是App，那么components和template中的名字必须是App。**

**App组件中是html结构，其中用到了router的router-view标签，router-view标签用的了HelloWorld组件。**

**所以：页面内容是有App组件和HelloWorld组件共同决定的。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

**5. 在main.js文件中（vue实例文件），**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1][]

**引入router文件下的文件（index.js）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2][]

**就可以在vue实例的组件（App.vue）中使用，通过<router-view>标签直接调用router内容**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 3][]

**而router文件下的文件（index.js），导入系统中的vue和vue-router，导出了一个Router对象，其中Router对象里，设置了路由。还引入了自定义组件HelloWorld.vue，那么HelloWorld组件内容将在App.vue组件中，而App.vue组件在Vue实例中，然后Vue实例在页面中展示。**

**6. 路由，各个组件都在路由中，各个页面的路径也都由路由决定，以及组件都包含在router-view中**

实例组件App.vue中：router-view标签内包含了所有的页面

![20181122190917249.png][]

router的设置：引入了组件页面，设置了各个页面的路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220415/0eb6414caa854a76aedfe305b4e6a32c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20220415/94b7382326a3461c98956bdeafeb3be3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20220415/a07d95ce4ace43a789d9bc6deb5e91e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20220415/fd389f8d25014ae69238c15b84ae59b4.png
[20181122190917249.png]: /images/20220415/d624ff7c7cbc48e894f527c5dfdf370e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 4]: /images/20220415/e1388858e32344ceae2e33b1c16cb81a.png