vue background management system considerations encountered and summary

vue loop nest, different variables need to name names, to distinguish
The address bar by # question:
Vue-Router has hash mode and history mode, vue route default hash mode, URL will be the general development of single-page application mode with hash # sign
first step in the router / index. increasing the js mode: 'hidtory', further modifications and config / index.js assetsPublicPath: './' to assetsPublicPath: '/'; FIG:
Change ElementUI Internal Style:
method of third-party component libraries styles by scopd penetration modify introduced;

There is a special property, scoped at the Vue file style label. When a style tag has scoped attribute, it can only css style for the current Vue components, you can make a style element does not contaminate each other. If all the projects have a style tag added scoped attribute, which is equivalent to achieve a modular style.
When the package build time, javascript packets becomes very large, impact loading:
Solution namely: splitting require webpack code provided to implement load demand -
we can route different from the corresponding components into different code blocks, and when the route is accessed only load the corresponding components;
1.require the AMD specification wording
```
const userCenter = resolve => require(['@/pages/usercenter'], resolve);
const userInfo = resolve => require(['@/pages/usercenter/userInfo'], resolve);
const resetPwd = resolve => require(['@/pages/usercenter/resetPwd'], resolve);
```
2.require.ensure commomjs specification
```
// preload lazy performed 
require.ensure ([ './ mod.js'], function (the require) { // module array is preloaded to here, does not write to download 
    var MOD = the require ('. /mod.js' ); 
    mod.show (); 
});
```
After require.ensure module is not executed immediately downloaded to [], and then execute the callback function content.

AMD is downloaded to the module and the module is executed after the [], and then the content of the callback function is then performed.

3.webpack comes require.include
Test side cross-domain
reasons: same-origin policy does not allow cross-domain access the browser, so-called same-origin policy refers to the protocol, the domain name, the same port.
Solution: use of proxyTable resolved.

proxyTable problems we can solve cross-domain vue development environment in the project, but cross-domain problems can not be solved on the production environment, sometimes the production environment also need to deal with cross-domain problem, this time proxyTable not loose slightly, we currently with nginx proxy
async process the await asynchronous, no callback
async: declare an asynchronous function; async only inside the function executing the asynchronous operation, then the method will perform the specified callback

You can use asynchronous internal functions await.

await: Pause functions performed asynchronously (var result = await someAsyncCall ())

Promise placed before the call, the await force other code waits until Promise is completed and results;
Eslint code checks error
[eslint-plugin-VUE]
[VUE / NO-use-v-if-with-v-for]
This 'v-if' Should BE Moved to The warpper Element
as v-if the v-for when used together, v-for a higher priority than vi-if, and this means that v-if run repeatedly tell each v-for loop, it is not recommended to be used together. Can be placed in an outer loop, or on the inside traversal attribute calculation.
vue-router query and pass parameters params (reception parameter), $ router, the difference $ route the
received transmission parameters and mode parameters 1.query
Note: the parameter is a transfer this $ router, reception parameter is this $ route..

$ Router is VueRouter instance, you want to navigate to a different URL, use $ router.push method

$ Route for the current router jump object, which can get name, path, query, params, etc.
```
// parameter passing: 
the this . $ Router.push ({ 
        path: ' / XXX ' , 
        Query: { 
          ID: ID 
        } 
      }) 
  
// reception parameters: 
the this . $ Route.query.id
```
2.params parameter passing mode and receive parameters
Note: params parameter passing, which can only be Push name: 'xxxx', can not be a path: '/ xxx', because the name can only be used to introduce params route path if here written , the page will receive parameters are undefined! ! !
```
// parameter passing: 
the this $ router.push ({. 
        Name: ' XXX ' ,
         the params : { 
          ID: ID 
        } 
      }) 
  
// reception parameters: 
the this . $ Route. The params .id
```
In addition, little difference between the two, straightforward query is equivalent to get the request, the page jumps, they can see the request parameters in the address bar, and params equivalent post request parameters will no longer address bar.
Use watch monitor routing (this $ route.params.) Method changes; when routing changes execution
```
  Watch: { 
    $ route: function () { 
      var tech_type = the this $ route.. the params .tech_type;
      // do some operations 
    } 
  },
```
When there is some data need some additional data along with the time change, we recommend using computed.
When there is a common response to the changed data when the business logic to perform some or asynchronous operation when the watch is recommended
The need for frequent use when using prototype components bind: @ click.native = ''; so, we'll click directly tied to the event on the prototype.
If all requests created on the inside, too many requests will load the page will lead to slow a brief black and white situation, I usually write on it, no complicated interfaces created will be put inside, interfaces and more complex, it will be mounted on inside.
keep-alive routing component does not refresh buffer
(keep-alive component is an abstract Vue provide to cache components, thereby saving performance)

When introduced keep-alive, the page is first entered the trigger sequence created- hook> mounted-> activated, deactivated triggered when exiting. When re-enter (forward or backward), only trigger activated.
Came in second hook only trigger activated, deactivated when you exit the trigger

After the keep-alive, and mounted inside the Created method is not triggered, because they keep-alive blocked, the data is cached, so no request.

1. If some of your pages must request in real time, you can do it directly activated this hook operation.

2.router-view Riga judgment, then router defined file in which you want to add multi-page cache "meta: {keepAlive: true}", does not want the cache is "meta: {keepAlive: false}" or do not write, only when that is true will be keep-alive recognition and cache.
```
< Template > 
  < div the above mentioned id = "App" > 
    <! - cache cached page you want to achieve backward does not refresh -> 
    <! - plus v-if the judge can customize the components that you want cached, custom inside the router -> 
    < Keep-Alive > 
      < router-View V-IF = "$ route.meta.keepAlive" > </ router-View > 
    </ Keep-Alive > 
    < router-View V-IF = "! $ route.meta.keepAlive" > </ Router-View > 
    
    <-! here is the rest of the code -> 
  </ div > 
</template>
```
```
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
    {//home会被缓存
        path:"/home",
        component:home,
        meta:{keepAlive: true}
    }
    {//hello不会被缓存
        path:"/hello",
        component:hello,
        meta:{keepAlive: false}
    }
})
```
vue stop event bubbling.

.stop: event.stopPropagation JavaScript is equivalent to (), to prevent the event bubbling
```
 
<div id="app"> 
　　<div class="outeer" @click.stop="outer"> 
　　　　<div class="middle" @click.stop="middle"> 
　　　　　　<button @click.stop="inner">点击我(^_^)</button>
 　　　　</div>
 　　</div> 
</div>
```
Extended:
.prevent: cancel the default event, equivalent to JavaScript in event.preventDefault ().

.capture: Capture events and event bubbling opposite direction, event capture from outside to inside.

.self: only trigger events within the scope of their own, do not contain sub-elements.

.once: only trigger once.

vue background management system considerations encountered and summary

Guess you like