Процесс выполнения проекта VUE: связь вызовов между index.html, main.js, App.vue, index.js

1. Резюме

Резюме одного предложения:
1. index.html — домашняя страница, запись проекта,
2. корневой компонент App.vue,
3. файл main.js — запись
, 4. index.js, устанавливающий имя маршрутизации и сопоставление ресурсов, рендеринг в приложение. Когда Vue
запускает проект, main.js используется в качестве входного файла проекта.Во время работы найдите место, где нужно смонтировать экземпляр, то есть в index.html.В начале содержимое в будет отображаться точка монтирования index.html, но затем она заменяется содержимым в шаблоне в компоненте в экземпляре, поэтому мы увидим, что содержимое тела в index.html будет отображаться на мгновение.

![Вставьте сюда описание изображения](https://img-blog.csdnimg.cn/97413ff6452e4c809272f0833b326bd8.png

1. Как объяснить и выразить тег div, идентификатор которого равен app в index.html?

Точка монтирования: тег div с идентификатором app в index.html является точкой монтирования, и тогда наш корневой экземпляр Vue будет смонтирован в эту точку монтирования.

2. Обобщите взаимосвязь между main.js, App.vue и index.html в Vue.

Перенос из или ссылка: сводка взаимосвязи между main.js, App.vue и index.html в Vue
https://www.cnblogs.com/chenleideblog/p/10484554.html .

В инициализированном проекте Vue первые три файла, с которыми мы сталкиваемся, это main.js, App.vue и index.html, Мы можем узнать из обучающих видео или официальных документов:

• index.html — домашняя страница, запись проекта
• App.vue — корневой компонент
• main.js — входной файл

Так какая связь между этими файлами?

1. Сначала просмотрите содержимое в index.html: (Чтобы хорошо идентифицировать каждый файл, я пометил каждый файл текстом)

2. В App.vue я сделал следующую обработку:

3. В main.js начальное содержимое файла такое:

Так что насчет веб-страницы, которую мы регистрируем?

Эффект веб-страницы следующий:

Другими словами, в части заголовка веб-страницы загружается заголовок, определенный в index.html, а в основной части загружается часть, определенная в App.vue. (Однако следует отметить, что в момент открытия браузера в основной части браузера сразу же отображается часть тела, определенная в index.html)

Затем мы можем проанализировать приведенную выше логику: когда браузер обращается к проекту, файл index.html является первым, к которому обращаются.

в то время как в index.html

<div id="app">来自index.html正文中的内容</div>

Существует точка монтирования с идентификатором приложения, и тогда наш корневой экземпляр Vue будет смонтирован в эту точку монтирования;

В качестве входного файла проекта используется main.js. В main.js создается новый экземпляр Vue. В экземпляре Vue передается

new Vue({
    
    
  el: '#app',
  //components: {
    
    App },
  //template: '<App/>'
})

Сообщите экземпляру, куда его монтировать (то есть куда экземпляр загружается в index.html).

Затем в экземпляре регистрируется частичное компонентное приложение. Откуда берется это частичное компонентное приложение?

import App from './App.vue'

new Vue({
    
    
  //el: '#app',
  components: {
    
    App },
  //template: '<App/>'
})

Этот локальный компонент — App.vue в текущем каталоге;

А что за шаблон? Шаблон — это содержимое шаблона в компоненте App.vue. (шаблон заменит содержимое в исходной точке монтирования)

Таким образом, экземпляр Vue временно является содержимым компонента App.vue.

Итак, резюмируем:

Во время работы проекта main.js используется в качестве входного файла проекта.Во время работы найдите место, где нужно смонтировать экземпляр, то есть в index.html.В начале содержимое в точка монтирования index.html будет отображаться, но затем она заменяется содержимым в шаблоне в компоненте в экземпляре, поэтому мы увидим, что содержимое тела в index.html будет отображаться на мгновение.

Часть Title в index.html не будет заменена, поэтому она всегда будет сохранена.

https://www.cnblogs.com/Renyi-Fan/p/11109763.html

Подведем итог

В начале, когда я изучал Vue, я всегда не мог понять логику между файлами, поэтому я продолжал бродить на месте.После того, как я попробовал разработку апплетов WeChat, у меня было смутное разделение времени, и я развернулся. Я продолжал работать над развитием проекта Vue, и в результате вещи, которые изначально были неясны, вдруг стали ясны.

В корневом каталоге находится файл index.html, в каталоге src — main.js и App.vue, а в папке маршрутизатора — index.js Понимание связи между этими файлами прояснит идеи для последующей разработки.

index.html — домашняя страница, запись проекта

index.html — это первый сайт, который посещает проект. Обычно мы определяем пустой корневой узел. Экземпляр, определенный в main.js, будет смонтирован под корневым узлом, а содержимое будет заполнено компонентами vue.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页title</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue — корневой компонент

Мы часто создаем файлы с суффиксом .vue в Vue.Файлы .vue обычно состоят из трех частей, которые заключены в теги и соответственно.

Мы можем понять три вышеперечисленные части как три части html, javascript и css, которые мы изначально изучили во внешнем интерфейсе.

Среди них мы обычно устанавливаем веб-интерфейс, который мы хотим использовать, обычно работаем с данными, определяем, как данные выпускаются и т. Д., Который ориентирован на логику и в основном отвечает за стиль в этикетке.

Комбинация трех вышеперечисленных элементов составляет веб-страницу, которую мы видим.Как правило, когда мы разрабатываем новую страницу, мы обычно создаем новый файл .vue и завершаем написание трех ссылок в файле.

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    
    

  name: "app"
};
</script>
<style>
.add-container {
    
    
  margin-bottom: 20px;
}
</style>

Пополнить:

• 【шаблон】

Шаблон может содержать только один родительский узел, то есть может быть только один элемент div верхнего уровня (например, на приведенном выше рисунке родительским узлом является элемент div #app, у которого нет родственных узлов).

Это представление подмаршрутизации, и здесь отображаются следующие страницы маршрутизации.

Давайте сделаем метафору, это похоже на слот, при переходе на определенный маршрут страница под маршрутом вставляется в этот слот для рендеринга и отображения.

• 【скрипт】

Vue обычно пишется на es6 и экспортируется с экспортом по умолчанию, который может содержать данные, жизненный цикл (смонтированный и т.д.), методы (методы) и т.д.

• 【стиль】

стиль через тег стиля

Если вы хотите импортировать внешние файлы css, вам сначала нужно установить пакет зависимостей css-loader для проекта, открыть cmd, войти в каталог проекта, ввести npm install css-loader и нажать Enter. После завершения установки вы можете импортировать необходимые файлы css под тегом стиля. Таким образом, мы можем инкапсулировать стили под стилем, записать их в папку css, а затем ввести их на страницу для использования.Вся страница vue также выглядит более лаконично.

<style> 

     import './assets/css/public.css'  

</style> 

main.js — входной файл

main.js в основном представляет структуру vue, корневые компоненты и настройки маршрутизации, а также определяет экземпляр vue, как показано на рисунке ниже.

компоненты: {App} — это введенный корневой компонент App.vue.

Плагины также могут быть введены позже, конечно, плагины должны быть установлены в первую очередь.

import Vue from 'vue'    /*引入vue框架*/
import ElementUI from 'element-ui'     /*引入element-ui样式*/
import App from './App'     /*引入根组件*/
import router from './router'    /*引入路由设置*/

Vue.config.productionTip = false    /*关闭生产模式下给出的提示*/

 /*定义一个新实例*/
new Vue({
    
    
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: {
    
     App }     /*此处为引入的根组件的App.vue*/
})

router.js — конфигурация маршрутизации

В папке маршрутизатора находится файл index.js, который является файлом конфигурации маршрутизации.

import Vue from 'vue'    /*引入vue框架*/
import Router from 'vue-router'   /*引入路由依赖*/
import Hello from ‘@、components/Hello’    /*引入页面组件，命名为Hello*/

Vue.use(Router)   /*使用路由依赖*/

   /*定义路由*/
export default new Router({
    
    
  router:[
   {
    
    
       path: '/ ',
       name: 'Hello',
       component: Hello
    }
 ]
})    

Маршрут с путем '/' определен здесь, а страница, соответствующая маршруту, является компонентом Hello, поэтому, когда мы посещаем http://localhost:8080/#/ в URL-адресе браузера, будет отображаться компонент Hello. Точно так же мы можем установить несколько маршрутов, таких как '/index', '/list', конечно, сначала должен быть введен компонент, а затем маршрут должен быть установлен для компонента.