Vue learning Chapter 8 - Scaffolding

First, the basic use of scaffolding

vue vue-cli is a scaffolding tools, what is the scaffolding. That can help us to automatically generate project templates vue.js + webpack, that we do not have to manually configure webpack as well as some of the configuration.

---

Basic use: (cli4 and cli3 steps to create the same project)

1. Use vue create 项目名称to create a project
2. Fill in the information
       Step one: Manually usually choose to manually configure the
       second step: press up and down to select something needs to be installed, the spacebar to select.
       The third step: He will ask you is to separate configuration files on other packages it or impede package.json (usually choose the former)
       Step four: He will ask you to regard the choice for this project is saved as a preset (save after the first step will be more of an option chosen for this project, if you want to delete your saved preset, you can modify the C: \ Users \ "presets" under ASUS.vuerc file)
3. npm run serve Run the program

---

After creating a project using the cli4, Folder Contents Analysis:

Two, router use

router that is routing, so-called routing is to have one to one correspondence, a click event to jump to the corresponding component.
router using the steps:

1. Create a route:

//创建路由时需要先导入路由
import VueRouter from 'vue-router' 
// 通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

const router = new VueRouter({
	  mode: 'history', 
	  base: process.env.BASE_URL,
	  routes
	})

the front end of the routing system mode: mode. There are patterns hashwith historythe general set history. Details can be two modes of vue-router

routes: from the relationship between the application and the routing component definition configuration.

const routes = [
  { //设置默认路径
    path:'',
    redirect:'home' //重定向到home
  },
  {
    path:'/home',
    component:home, // 地址跳转到home时切换到的组件
    meta:{
      //meta元数据(描述数据的数据)
      title:'主页'
    },
    children:[  //路由的嵌套使用
      {
        path:'',
        redirect:'news'
      },
      {
        path:'/home/news',
        component:news
      },
      {
        path:'/home/message',
        component:message
      }
    ]
  }
]

Represents a route nested component other small components. In large assemblies need to jump to the appropriate team member clicks on some of the events.
Of course, these routes should be placed in the corresponding components written in other .vue file, and then import this file.

// 直接载入组件  (这里是我的Home组件的路径)
// import home from '../components/Home'
// 懒加载组件  
const home = () => import('../components/Home')

2. Register route in main.js

new Vue({
  router, // 注册路由
  render: h => h(App)
}).$mount('#app') //el的实质就是$mount()

So far you can use a router.

---

3. There are three routes :( router tags :)
first:<router-link></router-link>

该标签是一个vue-router中已经内置的组件，他会默然被渲染成a标签
其属性：
   to='',用于指定跳转的路径
   tag='',指定<router-link>被渲染成什么组件(默认a)
   replace,让网页的返回按钮失效

<router-link to="/home" tag='button' replace>首页</router-link> That this is a button, click it will jump to the next baseurl home directory.

tips: If you need programming navigation (to write the code jumps router) can do the same.

<template>
  <div id="app">
    <!-- 利用标签跳转router -->
    <!-- <router-link to="/home" tag='button' replace>首页</router-link>
    <br>
    <router-link to="/chat" tag='button' replace>聊天</router-link>
    <router-view></router-view>   -->

    <!-- 使用代码跳转router -->
    <!-- <button @click="homeclick">首页</button>
    <button @click="chatclick">聊天</button>
    <router-view></router-view> -->
  </div>
</template>

<script>
export default {
  name:'home',
  methods:{
    homeclick(){
      //router在每个组件都定义了$router属性
      this.$router.replace('/home')
      // this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
      // this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
      // this.$router.back(): 请求(返回)上一个记录路由
    },
    chatclick(){
      this.$router.replace('/chat')
    }
  }
}
</script>

What if we need to pass in between jumps routing parameters? We can dynamically bind to

Inter-component transfer mode parameters:
a, params type (formed after the path transmitting / uesr / 132)
1. Configuration route format: path='/路径/:形参'
{ path:'/user/:id', component:user }
2. <-Link Router> passed by: :to='/路径/实参'
<router-link :to="'/user/'+userID" tag='button'>用户</router-link>
3. By then {{$route.params.形参}}acquiring data
<p>{{$route.params.id}}用户</p>

Second, the type of query (after transmitting path formed / uesr ID = 132?)
1. Configuration route format: path = '/ path' i.e. normal configuration
2. The delivery way: to pass an object, and write path with query (key form)
:to='{path:'/user',query:{name:'hang',age:'18'}}'
3. then {} {$ route.query.key} through the acquired data
<router-link :to="{path:'/profile',query:{name:'hang',age:18}}" tag='button'>档案</router-link>

See here, some people will do with the router route confused. note, $router is a router but the object here is to create index.js$ route (not r) is the current active route. That there is a large r route object, not the object r is the current routing

Second:<router-view></router-view> displays the contents of the router after the jump

该标签会根据当前的路径，动态渲染出不同的组件
在路由切换时切换的就是此标签挂载的组件

third:<keep-alive>

缓存标签，保持里面的东西处于活跃状态，不被销毁
其属性：
    include='字符串或正则表达式':只有匹配的组件会被缓存，匹配多个时用,分割
    exclude='字符串或正则表达式':任意匹配的组件都不会被缓存，匹配多个时用,分割

<!-- 这里的profile跟home 是该对应的组件export时的name值 -->
<keep-alive exclude="profile,home">
  <router-view></router-view>
</keep-alive>

---

At the end to sum up: router is a plug-in, plug-ins need to be installed with Vue.use (plug-in). After all the plug-ins have to use Vue.use (plug-in) to install