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

目录

1.vue脚手架配置代理

[1.1 方法一](#1.1 方法一)

[1.2 方法二](#1.2 方法二)

2.插槽

[2.1 默认插槽](#2.1 默认插槽)

[2.2 具名插槽](#2.2 具名插槽)

[2.3 作用域插槽](#2.3 作用域插槽)

3.Vuex

[3.1 概念](#3.1 概念)

[3.2 何时使用？](#3.2 何时使用？)

[3.3 搭建vuex环境](#3.3 搭建vuex环境)

[3.4 基本使用](#3.4 基本使用)

[3.5 getters的使用](#3.5 getters的使用)

[3.6 四个map方法的使用](#3.6 四个map方法的使用)

[3.6.1 mapState方法](#3.6.1 mapState方法)

[3.6.2 mapGetters方法](#3.6.2 mapGetters方法)

[3.6.3 mapActions方法](#3.6.3 mapActions方法)

[3.7 模块化+命名空间](#3.7 模块化+命名空间)

4.路由

1.基本使用

2.几个注意点

3.多级路由（多级路由）

4.路由的query参数

5.命名路由

6.路由的params参数

7.路由的props配置

8.的replace属性

9.编程式路由导航

10.缓存路由组件

11.两个新的生命周期钩子

12.路由守卫

13.路由器的两种工作模式

5.ElementUi组件库的使用

1.首先安装element-ui插件库

[2.引入 Element](#2.引入 Element)

[2.1 一般引入](#2.1 一般引入)

[2.2 按需引入](#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. 组件中读取数据：$store.getters.bigSum

代码演示：

......

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

3.6 四个map方法的使用

3.6.1 mapState方法

用于帮助我们映射state中的数据为计算属性，本来要在模版 {{ $store.state.subject }}，写成计算属性只需 {{ subject }}， 看起来更简洁

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

注意事项：

问题：为什么mapState前面需要用到（...）扩展运算符

原因：

mapState 返回一个对象：
mapState({sum:'sum',school:'school',subject:'subject'}) 会返回一个对象，这个对象的键是 sum、school 和 subject，值是从 Vuex store 中对应的状态。加上扩展运算符可以将对象的键和值加到computed身上。。

3.6.2 mapGetters方法

用于帮助我们映射getters中的数据为计算属性，本来要在模版 {{ $store.getters.bigSum }}，写成计算属性只需 {{ bigSum }}， 看起来更简洁

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

3.6.3 mapActions方法

用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

本来需要这样写

incrementOdd(){
    this.$store.dispatch('odd',this.n)
},

简化后

...mapActions({incrementOdd : 'odd'}),

注意事项：

有参数必须在调用的时候传，不然收到的会是一个事件对象。。

3.6.4 mapMutations方法

用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

**注意事项：**mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

3.7 模块化+命名空间

1.目的：让代码更好维护，让多种数据分类更加明确。

2.修改：store.js

const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

3.开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

4.开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

5.开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

6.开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

注意事项：

引入模块化之后，模版要改进成下面

$store.state.sum

$store.state.countAbout.sum

4.路由

理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

前端路由：key是路径，value是组件。

1.基本使用

1. 安装vue-router，命令：npm i vue-router@3

2. 引入VueRouter并且应用插件：Vue.use(VueRouter)

3. 编写router配置项:

   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   ​
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
       routes:[
           {
               path:'/about',
               component:About
           },
           {
               path:'/home',
               component:Home
           }
       ]
   })
   ​
   //暴露router
   export default router

4. 实现切换（active-class可配置高亮样式）

   <router-link active-class="active" to="/about">About</router-link>

5. 指定展示位置

   <router-view></router-view>

2.几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

2. 通过切换，"隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。

4. 整个应用只有一个router，可以通过组件的$router属性获取到。

3.多级路由（多级路由）

1.配置路由规则，使用children配置项：

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

2.跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

注意事项：二级路由开始的路径，最好不要用 /

4.路由的query参数

$route.query.id
$route.query.title

1.传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

2.接收参数：

$route.query.id
$route.query.title

5.命名路由

1.作用：可以简化路由的跳转。

2.如何使用

• 给路由命名：
  *

  {
  	path:'/demo',
  	component:Demo,
  	children:[
  		{
  			path:'test',
  			component:Test,
  			children:[
  				{
                        name:'hello' //给路由命名
  					path:'welcome',
  					component:Hello,
  				}
  			]
  		}
  	]
  }

• 简化跳转：
  *

  <!--简化前，需要写完整的路径 -->
  <router-link to="/demo/test/welcome">跳转</router-link>
  
  <!--简化后，直接通过名字跳转 -->
  <router-link :to="{name:'hello'}">跳转</router-link>
  
  <!--简化写法配合传递参数 -->
  <router-link 
  	:to="{
  		name:'hello',
  		query:{
  		   id:666,
              title:'你好'
  		}
  	}"
  >跳转</router-link>

6.路由的params参数

params携带参数也就是Restful风格的写法

1.配置路由，声明接收params参数

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

2.传递参数：

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

特别注意：

• 路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
• params配置的参数，需要在路由器中占位

3.接收参数：

$route.params.id
$route.params.title

7.路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

三种写法：

• 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
• 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail
• 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件

注意事项：

1.第一种写法传的数据都是死数据，所以基本不使用

2.第二种写法只适合传 params参数，不能传 query参数

3.第三种写法是一个回调函数，路由器会调用该方法，并且传该组件的 $route 作为参数

8.<router-link>的replace属性

1.作用：控制路由跳转时操作浏览器历史记录的模式(也就是后退和前进) ，可以实现无痕浏览

2.浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。

3.如何开启replace模式：<router-link replace .......>News</router-link>

注意事项：replace的完整写法是 :replace="true"

原理：

9.编程式路由导航

1.作用：不借助<router-link>实现路由跳转（to），让路由跳转更加灵活

2.具体编码：

//$router的两个API
this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})

this.$router.replace({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})


this.$router.forward() //页面前进
this.$router.back() //页面后退
this.$router.go(params) //params为2表示前进2步，-2表示后退两步

10.缓存路由组件

1.作用：切换不同的路由，默认之前的路由是会被销毁的。为了让路由组件保持挂载，不被销毁，以下做法可以实现。

2.具体编码：

// include值是组件名，如果没有配置include就默认缓存所有组件
<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

3.使用场景

例如在input框输入了一些信息，然后要切到另外一个组件，回来发现之前输入的信息不见了，是因为组件在切换时就会被销毁，此时就可以设置该组件处于活跃状态就不会被销毁。

4.如果想缓存多个路由

<keep-alive :include="['News'，'Xxx']"> 

11.两个新的生命周期钩子

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

2. 具体名字：

   1. activated路由组件被激活时触发。

   2. deactivated路由组件失活时触发。

• activated ：当一个 keep-alive 组件被激活时触发。这个钩子在组件从缓存中恢复时调用，通常用于恢复组件的状态或执行一些需要在组件激活时进行的操作。
• deactivated ：当一个 keep-alive 组件失活时触发。这个钩子在组件被缓存时调用，通常用于清理组件的状态或执行一些需要在组件失活时进行的操作。

注意事项：】

拥有这两个生命周期的条件？

该路由组件被keep-alive修饰。

12.路由守卫

1. 作用：对路由进行权限控制

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫:

   //全局前置守卫：初始化时执行、每次路由切换前执行
   router.beforeEach((to,from,next)=>{
   	console.log('beforeEach',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
   			next() //放行
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next() //放行
   	}
   })
   
   //全局后置守卫：初始化时执行、每次路由切换后执行
   router.afterEach((to,from)=>{
   	console.log('afterEach',to,from)
   	if(to.meta.title){ 
   		document.title = to.meta.title //修改网页的title
   	}else{
   		document.title = 'vue_test'
   	}
   })
   
   // 向外暴露配置好的路由器
   export default router

4. 独享守卫: 只有beforeEnter。在配置路由里面写

   beforeEnter(to,from,next){
   	console.log('beforeEnter',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){
   			next()
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next()
   	}
   }

5. 组件内守卫：

   //进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {
   },
   //离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {
   }

13.路由器的两种工作模式

1. 对于一个url来说，什么是hash值？------ #及其后面的内容就是hash值。

2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

3. hash模式：

   1. 地址中永远带着#号，不美观 。

   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。

   3. 兼容性较好。

4. history模式：

   1. 地址干净，美观 。

   2. 兼容性和hash模式相比略差。

   3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

5.ElementUi组件库的使用

ElementUi官网： https://element.eleme.cn/#/zh-CN/component/quickstart

1.首先安装element-ui插件库

npm i element-ui -S

2.引入 Element

2.1 一般引入

在 main.js 中写入以下内容：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

注意事项：上面这种引入方式比较暴力，直接把全部的CSS和组件都引入，会导致所占的空间比较大。

改进方法就是按需引入

2.2 按需引入

1.首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

2.然后，将 .babel.config.js 修改为：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

使用以下组件

main.js引入部分组件，不需要引入CSS，因为自动会引入所需的部分

import { DatePicker, Dropdown, DropdownMenu, DropdownItem } from 'element-ui';

Vue.component(DatePicker.name, DatePicker);
Vue.component(Dropdown.name, Dropdown);
Vue.component(DropdownMenu.name, DropdownMenu);
Vue.component(DropdownItem.name, DropdownItem);