vue进阶篇 - 默认配置（个性化）「这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战」。上

「这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战」。

上一篇简单的和大家介绍了关于main.js文件中的render函数使用方式和引用的vue的方式，本期我会给大家介绍一下关默认配置的内容，vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

vue.config.js文件是脚手架的配置内容

属性：

pages：配置入口文件位置；

lintOnSave：语法检查 eslint，jslint，jshlint都是语法检测但是语法检查需要根据公司团队的要求来，可以把不需要的代码检测出来，当然我们练习时候可以关闭不然改报错会难受死；

使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
使用vue.config.js可以对脚手架进行个性化定制，详情见：cli.vuejs.org/zh

module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },
   lintOnSave:false, //关闭语法检查
}

ref属性

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
2. 获取：this.$refs.xxx

关于props方法的使用：读外部传进组件的数据（如app.vue给Student.vue）；下面是组件代码：

<template>
	<div>
		<h1>{{msg}}</h1>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生年龄：{{myAge+1}}</h2>
		<button @click="updateAge">尝试修改收到的年龄</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			console.log(this)
			return {
				msg:'我是一个VUE大学的学生',
				myAge:this.age
			}
		},
		methods: {
			updateAge(){
				this.myAge++
			}
		},
		//简单声明接收
		// props:['name','age','sex'] 

		//接收的同时对数据进行类型限制
		/* props:{
			name:String,
			age:Number,
			sex:String
		} */

		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:99 //默认值
			},
			sex:{
				type:String,
				required:true
			}
		}
	}
</script>

这是app.vue的代码：主文件代码引入Student组件内容和对Student组件进行传参

<template>
	<div>
		<Student name="李四" sex="女" :age="18"/>
	</div>
</template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student}
	}
</script>

props配置项

功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
```
props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}
```
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

以上就是我们本篇的内容主要的是vue.config.js文件里面的配置内容和vue的两个api分别是ref和props；ref类似于html中的id类的标识属性，props则是让组件接收外部传过来的数据，可以对接收到的数据进行限制等等，大家可以尝试着去操作一下。