Vue 脚手架配置代理ref属性props配置项

Posted YuLong~W

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 脚手架配置代理ref属性props配置项相关的知识,希望对你有一定的参考价值。

文章目录

Vue脚手架

具体安装步骤:

  • 第一步(仅第一次执行):全局安装@vue/cli。 npm install -g @vue/cli
  • 第二步:切换到要创建项目的目录,然后使用命令创建项目 vue create xxxx
  • 第三步:启动项目 npm run ser

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件

关于不同版本的Vue

  • vue.js与vue.runtime.xxx.js的区别:
    • vue.js 是完整版的Vue,包含:核心功能 + 模板解析器
    • vue.runtime.xxx.js 是运行版的Vue,只包含:核心功能;没有模板解析器
  • 因为vue.runtime.xxx.js没有模板解析器,所以不能使用template这个配置项,需要使用render函数接收到的createElement函数去指定具体内容。

vue.config.js配置文件

Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置,请使用以下方法:

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

Vue脚手架配置代理

server文件代码:

const express = require('express')
const app = express()

app.use((request,response,next)=>
	console.log('有人请求服务器1了');
	console.log('请求来自于',request.get('Host')); // 验证changeOrigin属性
	console.log('请求的地址',request.url);// 验证pathRewrite属性
	next()
)

app.get('/students',(request,response)=>
	const students = [
		id:'001',name:'tom',age:18,
		id:'002',name:'jerry',age:19,
		id:'003',name:'tony',age:120,
	]
	response.send(students)
)

app.listen(5000,(err)=>
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为:http://localhost:5000/students');
)

App.vue文件代码:

<template>
	<div>
		<button @click="getStudents">获取学生信息</button>

	</div>
</template>

<script>
	import axios from 'axios'
	export default 
		name:'App',
		methods: 
			getStudents()
				axios.get('http://localhost:8080/students').then(
					response => 
						console.log('请求成功了',response.data)
					,
					error => 
						console.log('请求失败了',error.message)
					
				)
			,
		,
	
</script>

方法一

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

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

说明:

  1. 优点:配置简单,请求资源时直接发给前端(8080)即可。
  2. 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
  3. 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)

方法二

​ 编写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. 缺点:配置略微繁琐,请求资源时必须加前缀。

ref属性

  1. 被用来给元素或子组件注册引用信息(id的替代者)
  2. 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
  3. 使用方式:
    1. 打标识:<h1 ref="xxx">.....</h1><School ref="xxx"></School>
    2. 获取:this.$refs.xxx
Vue.app文件:
<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	import School from './components/School'

	export default 
		name:'App',
		components:School,
		data() 
			return 
				msg:'欢迎学习Vue!'
			
		,
		methods: 
			showDOM()
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象(vc)
			
		,
	
</script>
-----------------------------------------

School.vue文件:
<template>
	<div class="school">
		<h2>学校名称:name</h2>
		<h2>学校地址:address</h2>
	</div>
</template>

<script>
	export default 
		name:'School',
		data() 
			return 
				name:'家里蹲大学',
				address:'home'
			
		,
	
</script>

<style>
	.school
		background-color: gray;
	
</style>

props配置项

  1. 功能:让组件接收外部传过来的数据

  2. 传递数据:<Demo name="xxx"/>

  3. 接收数据:

    1. 第一种方式(只接收):props:['name']

    2. 第二种方式(限制类型):props:name:String

    3. 第三种方式(限制类型、限制必要性、指定默认值):

      props:
      	name:
      	type:String, //类型
      	required:true, //必要性
      	default:'老王' //默认值
      	
      
      

    备注:props是只读的,Vue底层会监测对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。

App.vue文件:
<template>
	<div>
		<Student name="李四" sex="" :age="18"/>
	</div>
</template>

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

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

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:'我是一个学生',
				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>

mixin(混入)

  1. 功能:可以把多个组件共用的配置提取成一个混入对象

  2. 使用方式:

  • 第一步定义混合:

    
       data()....,
       methods:....
       ....
      
    
  • 第二步使用混入:

    • ​ 全局混入:Vue.mixin(xxx)
    • 局部混入:mixins:['xxx']

插件

  1. 功能:用于增强Vue

  2. 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。

  3. 定义插件:

    对象.install = function (Vue, options) 
    
        // 1. 添加全局过滤器
        Vue.filter(....)
    
        // 2. 添加全局指令
        Vue.directive(....)
    
        // 3. 配置全局混入(合)
        Vue.mixin(....)
    
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () ...
        Vue.prototype.$myProperty = xxxx
    
    
  4. 使用插件:Vue.use()

1、main.js文件:

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false

//应用(使用)插件
Vue.use(plugins,1,2,3)
//创建vm
new Vue(
	el:'#app',
	render: h => h(App)
)
------------------------------------------

2、plugins.js文件:

export default 
	install(Vue,x,y,z)
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value)
			return value.slice(0,4)
		)

		//定义全局指令
		Vue.directive('fbind',
			//指令与元素成功绑定时(一上来)
			bind(element,binding)
				element.value = binding.value
			,
			//指令所在元素被插入页面时
			inserted(element,binding)
				element.focus()
			,
			//指令所在的模板被重新解析时
			update(element,binding)
				element.value = binding.value
			
		)

		//定义混入
		Vue.mixin(
			data() 
				return 
					x:100,
					y:200
				
			,
		)

		//给Vue原型上添加一个方法(vm和vc就都能用了)
		Vue.prototype.hello = ()=>alert('你好啊')
	

scoped样式

  1. 作用:让样式在局部生效,防止冲突。
  2. 写法:<style scoped>

以上是关于Vue 脚手架配置代理ref属性props配置项的主要内容,如果未能解决你的问题,请参考以下文章

Vue基础系列(十九)-析脚手架-控制vue的4格缩进-vue.config.js配置文件-ref属性-props配置项-mixin(混入)-插件

vue进阶知识总结

vue进阶知识总结

vue进阶知识总结

Vue 学习总结笔记

Vue脚手架refpropsmixin混入插件scoped样式