Vue学习第八章-脚手架

一、脚手架的基本使用

vue-cli是vue的一个脚手架工具，什么是脚手架。就是可以帮助我们自动生成vue.js+webpack的项目模板，也就是说不用我们手动配置webpack以及一些配置了。

---

基本使用：(cli4与cli3创建项目的步骤一样)

1. 使用vue create 项目名称创建项目
2. 填写信息
       第一步：通常选Manually手动配置
       第二步：按上下行选择需要安装的东西，空格键确定选择。
       第三步：他会问你是把配置文件单独放在别的包中呢还是妨碍package.json（通常选前者）
       第四步：他会问你是都把这个项目的选择保存为preset(保存之后在第一步会多出一个此项目选择的选项，若需要删除自己保存的preset，可以修改C:\Users\ASUS.vuerc文件下的"presets")
3. npm run serve 运行程序

---

使用cli4创建好项目后，文件夹目录解析：

二、router的使用

router即路由，所谓路由就是有一对一的对应关系，点击一个事件就跳到其对应的组件中。
router使用步骤：

1.创建路由：

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

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

mode：前端路由系统的模式。模式有hash跟history，一般设为history。详情可参考vue-router的两种模式

routes：自定义配置的路由与组件间的应用关系。

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
      }
    ]
  }
]

路由的嵌套表示一个组件中有其他小的组件。而在大组件中点击一些事件时需要跳转到相应的小组件中。
当然了，这些路由对应的组件应该放在别的.vue文件中写，然后导入到此文件中。

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

2.在main.js中注册路由

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

到此为止就可以使用router了。

---

3.使用路由：(这里有3个router的标签：)
第一：<router-link></router-link>

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

<router-link to="/home" tag='button' replace>首页</router-link> 表示这是一个按钮，点击它会跳转到baseurl的home目录下。

tips：如果你需要编程式导航(自己写代码跳转router)也可以这样做。

<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>

那如果我们需要在跳转的路由之间传递参数呢？我们可以动态绑定to

组件间传递参数方式:
一、params的类型 (传递后形成的路径 /uesr/132 )
1.配置路由格式：path='/路径/:形参'
{ path:'/user/:id', component:user }
2.<router-link>传递的方式: :to='/路径/实参'
<router-link :to="'/user/'+userID" tag='button'>用户</router-link>
3.再通过{{$route.params.形参}}获取数据
<p>{{$route.params.id}}用户</p>

二、query的类型 (传递后形成的路径 /uesr?id=132 )
1.配置路由格式：path=’/路径’ 即正常配置
2.传递的方式:to中传递一个对象，并写好path跟query(key的形式)
:to='{path:'/user',query:{name:'hang',age:'18'}}'
3.再通过{{$route.query.key}}获取数据
<router-link :to="{path:'/profile',query:{name:'hang',age:18}}" tag='button'>档案</router-link>

看到这里就有人会对route跟router搞混淆了。注意，$router是index.js创建的router对象但是这里是$route(没有r)是指当前活跃的路由。也就是说有r的是一个大的路由对象，没r的是当前路由对象

第二：<router-view></router-view> 显示router跳转后的内容

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

第三：<keep-alive>

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

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

---

末尾总结一下：router是插件，需要用Vue.use(插件)进行安装插件。以后所有的插件都要使用Vue.use(插件)来进行安装