Detailed explanation of how to use in vue project

Part 1: File parsing

src/ is an entry file, and its main function is to initialize the vue instance and use the required plug-in
A vue object is defined in the file, where el provides the mount element for the instance

//Basic configurationimport Vue from 'vue'
import App from './'
 
//Introduce already configured routes and vueximport router from './router'
import store from './store/store'
 
// Import less (style import example, css, less)//import '@/assets/'
//Import js (for example)//import xxx from ''
 
// Whether to start production message = false
 
//The first way to writenew Vue({
  router,
  store,
  render: h =&gt; h(App)
}).$mount('#app')
 
//The second way of writingconst myVue=new Vue({
  el:'#app',
  router,
  store,
  render: h =&gt; h(App)
})
 
export default myVue
 
// Other js files can refer to myVue instances to call myVue's router, store, etc.//Call Note: Main.$store, main.$router Even axios on the vue prototype chain can be called//main.$axios

Part 2: What it does and when to use

When introducing third-party libraries in Vue, we usually introduce them in the form of import, but some components do () operations after introduction, and some components introduce them and perform.$something = something, so what is the connection between them?

Let me first talk about it. In Vue projects, we usually introduce axios to request interface data. After installing through npm, we only need to import axios from "axios" in our file and use it. Sometimes we will add a sentence.$axios = axios, we should be familiar with prototype.

import Vue from 'vue'
import App from './'
//Route importimport router from './router'
//vuex importimport store from './store'
//The three-party axios package downloaded by npmimport axios from 'axios'
// Whether to start production message = false
// Set the request root path of axios = 'url'
// Mount axios on.$http = axios
//In fact, it is adding a $http to the Vue prototype, and then in the files of the remaining vue components,//You can use axios directly through this.$httpnew Vue({
  router,
  store,
  render: h =&gt; h(App)
}).$mount('#app')

What is it? (Official Document)

Using the plug-in through a global method () will automatically prevent the same plug-in from being registered multiple times. It needs to be completed before you call new Vue() to start the application. The () method passes at least one parameter, and the parameter type must be Object or Function. If it is Object, then this Object needs to define an install method. If it is Function, then this function is treated as the install method. install will be executed by default when () is executed. When install is executed, the first parameter is Vue, and the other parameters are other parameters passed in during () execution. That is to say, after using it, the install method of the component is called.

()When will it be used?

When it is used, it actually calls the install method of the plug-in, so if the current plug-in introduced contains the install method, we need to use(), for example, referring to the Element in Vue is as follows:

import Vue from 'vue'
import App from './'
import router from './router'
import store from './store'
// Register elementUiimport ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/'
 
(ElementUI)
// Whether to start production message = false
new Vue({
  router,
  store,
  render: h =&gt; h(App)
}).$mount('#app')

Using Unified Global Registration Components

illustrate:

Can receive an object, (obj)
An install function needs to be provided in the object
The install function can get the parameter Vue, and the install function will be automatically called in the future when it is on.

Step 1: Provide unified registration entry file src/components/

// This file is responsible for the global registration of all public components// vue plugin mechanism:import PageTools from './PageTools'
 
export default {
  install(Vue) {
    ('PageTools', PageTools)
  }
}

Step 2: Register at the entrance src/ Register to use your own plug-in module

import Components from './components'
(Components)

Supplement: Tips on convenience

First, let me give you an example:

During the development process, there is an interface for sending text messages that require joint debugging, and when we connect to the interface, we need to send mobile phone numbers, and many pages have the function of sending text messages. If we write the mobile phone number to the backend every time we connect the interface, it will be very troublesome, then we can use the globally defined method to operate, and then we will greatly improve efficiency!

First we upload the code

const sendPhoneNumber = {applyPhone:"123456789",approvalPhone:"987654321"};
 = sendPhoneNumber;

You can write directly when tying the interface on the page

This greatly facilitates us, so we can change it one page at a time.

Summarize

This is the end of this article about how to use vue projects. For more related content on using vue projects, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!