foreword
The content of this chapter is the VUE working process and related usage discussions.
Previous article address:
Vue 3: Play with web front-end technology (2) - Lion King's Blog - CSDN Blog
Next article address:
Vue 3: Play with web front-end technology (4) - Lion King's Blog - CSDN Blog
1. The working process of VUE
1. Look at the work process from the project catalog
Suppose the project directory we configured looks like this:
├── /build/ # 构建脚本目录
├── /config/ # 配置文件目录
├── /node_modules/ # 项目依赖的第三方模块目录
├── /src/ # 源代码目录
│ ├── /assets/ # 静态资源目录
│ ├── /components/ # Vue组件目录
│ ├── /router/ # 路由配置目录
│ ├── /store/ # Vuex状态管理目录
│ ├── /views/ # 视图目录
│ ├── App.vue # 应用根组件
│ └── main.js # 应用入口文件
├── .babelrc # Babel配置文件
├── .editorconfig # 编辑器配置
├── .eslintrc.js # ESLint配置文件
├── .postcssrc.js # PostCSS配置文件
├── index.html # 页面模板文件
├── package.json # 项目配置文件
└── README.md # 项目说明文件
Then, the working process of VUE will be as follows:
(1) In src/main.jsthe file, we can find the entry point of the Vue application. This file initializes the Vue instance and App.vuemounts the root Vue component on the DOM element.
(2) In src/App.vuethe file, the root component of the Vue application is defined. It can contain other subcomponents and also Vuex state management.
(3) Under src/components/the directory, we can find various components in the Vue application. These components can have their own state and behavior and can accept input and emit output.
(4) Under src/router/the directory, we can find the routing configuration of the Vue application. These configurations define routing paths and corresponding components.
(5) src/store/Under the directory, we can find the state management module of Vuex. Vuex is the official state management library of Vue.js, which is used to centrally manage the state of the application.
2. Watch the work process from the web page
Through several parts of the project directory, we can conclude that the actual work of Vue is as follows:
(1) When the user visits the page, index.htmlit will be loaded into the browser.
（2）index.htmlThe file will be introduced in src/main.jsto initialize the Vue application.
(3) In src/main.js, by new Vue()creating a Vue instance and loading the root component App.vue.
(4) In App.vue, you can contain subcomponents, which can have their own data and behavior.
(5) Components corresponding to different paths are defined in the routing configuration file. When users access different paths, the corresponding components will be loaded according to the routing configuration.
(6) Vuex can be used to manage the state in the component, and this.$storethe state can be accessed and modified by calling.
3. Look at the work process from the code
（1）、main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')This code is a basic template to create and mount an application using Vue.js.
First, we import the createApp function from the Vue library. createApp is a factory function for creating Vue instances.
Then, we import the App component from the "./App.vue" file. This is the root component of our application, which contains the overall structure and logic of our application.
Next, we call the createApp function and pass it the App component as a parameter. This way, the createApp function returns a Vue instance that we can use to manipulate and control our application.
Finally, we mount the Vue instance on an HTML element using the mount method. Here, we mount the Vue instance on the DOM element with id "app". This means that our application will be rendered and inserted into an HTML element with "id=app".
（2）、App.vue
This file can combine html, css, and js files to render a page and display it on the mount point #app. Because it is the entry file of the page by default, so the first page you see is him.
(3), other
App.vue会根据网页的请求，搜索相关资源以呈现，这就涉及自定义的业务逻辑了。
2. Discussion on related usage
1. The disappearing mount point#app
In main.js, there is a mount point #app, so where is this #app? He's here:
2. How do I know that the createApp function exists in the 'vue' component?
It is a good choice to consult the official documentation, because when you enter the 'vue' view, you will find that you can't see it at all:
3. Am I using vue 2 or vue 3?
It can be viewed in the following interface:
4. Can other vue files be used to replace the App.vue file as the entry file?
Yes, but it is not necessary. The method is to define it directly in main.js, such as setting NewApp.vue as the entry file:
import Vue from 'vue'
import NewApp from './NewApp.vue'
new Vue({
render: h => h(NewApp),
}).$mount('#app')