Vue脚手架学习 vue脚手架配置代理、插槽、Vuex使用、路由、ElementUi插件库的使用

目录

1.vue脚手架配置代理

1.1 方法一

1.2 方法二

2.插槽

2.1 默认插槽

2.2 具名插槽

2.3 作用域插槽

3.Vuex

3.1 概念

3.2 何时使用？

3.3 搭建vuex环境

3.4 基本使用

3.5 getters的使用

3.6 四个map方法的使用

3.6.1 mapState方法

3.6.2 mapGetters方法

3.6.3 mapActions方法

3.7 模块化+命名空间

4.路由

4.1 基本使用

4.2 几个注意点

4.3 多级路由（嵌套路由）

4.4 路由的query参数

4.5 命名路由

4.6 路由的params参数

4.7 路由的props配置

4.8 的replace属性

4.9 编程式路由导航

4.10 缓存路由组件

4.11 两个新的生命周期钩子

4.12 路由守卫

4.13 路由器的两种工作模式

5.ElementUi组件库的使用

5.1 首先安装element-ui插件库

5.2 引入 Element

5.2.1 全局引入

5.2.2 按需引入

---

1.vue脚手架配置代理

1.1 方法一

在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}

说明：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。

2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。如果路径上有8080本身的文件时，就会访问该文件，而不会选择代理。

3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

1.2 方法二

编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

2. 缺点：配置略微繁琐，请求资源时必须加前缀。

2.插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

分类：默认插槽、具名插槽、作用域插槽

2.1 默认插槽

示例代码：

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>



子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

2.2 具名插槽

示例代码：

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

           <!-- template slot="footer" -->

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>



子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

2.3 作用域插槽

理解：数据在组件插槽的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

示例代码：

父组件中：
        <Category>
            <template scope="scopeData">
                <!-- 生成的是ul列表 -->
                <ul>
                    <li v-for="g in scopeData.games" :key="g">{
  {g}}</li>
                </ul>
            </template>
        </Category>

        <Category>
            <template slot-scope="scopeData">
                <!-- 生成的是h4标题 -->
                <h4 v-for="g in scopeData.games" :key="g">{
  {g}}</h4>
            </template>
        </Category>



子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
        
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

3.Vuex

3.1 概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

Vue2必须下载Vuex3，下载 npm i vuex@3

3.2 何时使用？

多个组件需要共享数据时

3.3 搭建vuex环境

1. 创建文件：src/store/index.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
   ​
   //准备actions对象——响应组件中用户的动作
   const actions = {}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}
   ​
   //创建并暴露store
   export default new Vuex.Store({
       actions,
       mutations,
       state
   })

2. 在main.js中创建vm时传入store配置项

   ......
   //引入store
   import store from './store'
   ......
   ​
   //创建vm
   new Vue({
       el:'#app',
       render: h => h(App),
       store
   })

3.4 基本使用

1. 初始化数据、配置actions、配置mutations，操作文件store.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引用Vuex
   Vue.use(Vuex)
   ​
   const actions = {
       //响应组件中加的动作
       jia(context,value){
           // console.log('actions中的jia被调用了',miniStore,value)
           context.commit('JIA',value)
       },
   }
   ​
   const mutations = {
       //执行加
       JIA(state,value){
           // console.log('mutations中的JIA被调用了',state,value)
           state.sum += value
       }
   }
   ​
   //初始化数据
   const state = {
      sum:0
   }
   ​
   //注意要创建并暴露store
   export default new Vuex.Store({
       actions,
       mutations,
       state,
   })

2. 组件中读取vuex中的数据：$store.state.sum

3.5 getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。虽然计算属性也可以实现，但是这种方法可以多个组件进行调用。

2. 在store.js中追加getters配置

3. 组件中读