Routing layout inlet inlet vue

1, vue mode setting
Vue.config.productionTip = false

Prevented from starting production of the message, often used as a command

annotation:

Development model: npm run dev front-end development using their own
mode of production: After the build package npm run on the back-end server to use

Above this line of code is to prevent the display means a message mode of production.
Without this line of code, or set to true, so the console will be more of a piece of code.

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.

Probably means:
Vu You are running a development model. When production deployment, be sure to enable production mode.
https://blog.csdn.net/boysky0015/article/details/102534229

2, vue plug
using the plug-in is simple to use after use Vue.use global registration

2.1 introduces plug-iview

import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

https://www.cnblogs.com/hermit-gyqy/p/10950174.html

2.2 introduced vue-router plug-
vue-router is the routing of plug-Vue.js.

Usage scenarios (pros and cons) principle

   适合用于构建单页面应用，基于路由和组件；路由用于设定访问路径，将路径和组件映射起来。

Switching between the paths is actually the switch assembly.

Installation: npm install vue-router --save

Use vue-router plug-ins:

import Router from 'vue-router';
//注册路由

Vue.use(Router);
//实例化路由

const router = new Router({
    routes: baseRoutes,
    mode: 'history'
});
Vue.config.productionTip = false;
Vue.use(iView);
Vue.use(myPlugin);

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: {
        App
    },
    template: '<App/>'
});

2.3 vue-router widget Detailed
Profile
vue-router component based on the routing and
routing for setting the access paths, and a path which map components.
In the single-page application vue-router, the page is to change the path switch assembly .

Code analysis:

//配置路由
import VueRouter from 'vue-router'
import Vue from 'vue'

//安装插件（插件都要安装的）
Vue.use(VueRouter)
//创建路由对象 
const router = new VueRouter({
routes
})
const routes = [
//这里就是配置url和页面之间的映射关系
]

//最后将对象传到vue实例中，就把它挂载到vue实例里
export default router

https://blog.csdn.net/qq_39773416/article/details/101805366

Label explained
mode: 'history' // setting mode (save history, otherwise the path will be '#')
routes: baseRoutes, // set array routing
path: '/', // display path
name: 'root', / / name display
Component: Layout, //
Resolve => the require ([ '... / Pages / home.vue'], Resolve)

The wording is asynchronous acquisition module, each time to visit this route will be packed when the monotonous single file,

Loaded on demand. There are kinds of writing is to use import, this component is to be packaged into a file which, for the first time to read all

https://segmentfault.com/q/1010000017913060/a-1020000017915112

redirect: '/ home', // redirect
children: // child routing
2.4 registration component
register component global
register a global assembly syntax is as follows:

Vue.component (tagName, options)
tagName for the component name, options for the configuration options. After registration, we can call the components in the following ways:

<tagName></tagName>
创建根实例
new Vue({

el: '#app'

})

注册局部组件
 new Vue({

el: '#app',

components: {

// <runoob> 将只在父模板可用

'runoob': Child
}
})

3, export default {} and new Vue () the difference between
the usage 1.export default: the equivalent of providing an interface to the outside world, so that other documents be introduced through the use of import.

As for the difference between the export default and export of:
in the JavaScript ES6, export and export default can be used to derive constants, functions, files, modules, etc.

You can import + in other files or modules (constant | function | file | module) mode name,

Import, so that it can be used, but a file or module, export, import can have multiple, export default only one.

If no export default, the following command can be used.
let the current scope declaration under variable
var are global, the outer layer can call

For new Vue ({}) part, it is to create a Vue instance is equivalent to creating a root component

https://www.cnblogs.com/nx520zj/p/9617689.html

4, vue layout inlet

<Layout></Layout>

Note: A layout represents a a whole page, for RA is only one page.

Sub-route switching only a certain part of the page.