Vue复习8脚手架结构 , render函数,ref,props配置项, mixins混入 ,Vue插件,Scoped样式

本文详细介绍了Vue CLI的安装、项目创建及启动过程,包括如何配置npm淘宝镜像以解决下载速度问题。同时,文章深入探讨了Vue脚手架的默认配置、查看配置方法以及通过vue.config.js进行个性化定制。此外,还讲解了Vue组件中的ref属性、props配置、混入(mixin)机制以及Vue插件的定义和使用。最后,提到了Scoped样式在防止样式冲突中的作用,并展示了less-loader的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一步(仅第一次执行):全局安装@vue/cli。
npm install -g @vue/cli
第二步:切换目录,然后使用命令创建项目
vue create xxxx
cd xxxx
第三步:启动项目
npm run serve
如出现下载缓慢请配置 npm 淘宝镜像:
npm config set registry https://registry.npm.taobao.org
Vue 脚手架隐藏了所有 webpack 相关的配置,
若想查看具体的 webpakc 配置  vue inspect > output.js

脚手架结构 

 pbulic/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置 含义是让IE浏览器以最高的渲染级别渲染页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签的图标-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页的标题-->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript><!-- 当浏览器不支持JS 时 noscript中的元素就会被渲染-->
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器-->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 render函数

关于不同版本的Vue:
1.vue.js与vue.runtime.xxx.js的区别:
 (1).vue.js是完整版的Vue,包含:核心功能+模板解析器。
 (2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。

2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用
  render函数接收到的createElement函数去指定具体内容。

/* 
	该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件,它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false



//创建Vue实例对象---vm
new Vue({
	el:'#app',
	//render函数完成了这个功能:将App组件放入容器中
  render: h => h(App),
	// render:q=> q('h1','你好啊')

	// template:`<h1>你好啊</h1>`,
	// components:{App},
})

 个性化定制脚手架 

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


module.exports = {
  lintOnSave: false //关闭语法检查
}

ref属性:

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

<template>
  <div id="app">
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn"  @click="showDOM">点我输出上方的DOM元素</button>
     <School  ref="sch"/>
  </div>
</template>

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

<style>

</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 id="app">
    <h1 v-text="msg" ref="title"></h1>
    <!-- <button >点我输出上方的DOM元素</button> -->
     <Student  name="李四"  :age="18" sex="男" />  
      
  </div>
</template>

<script>
  import Student from './components/Student.vue'
export default {
  name: 'App',
  data() {
    return {
      msg:'APP主页面'
    }
  },
   components:{Student},

 
  }
  </script>

<style>

</style>

 

<!--Student prop接收 -->
<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() {
        return {
            msg:'我是学生',
            myAge:this.age  //prop的优先级高于data
            
        }
    },
    // 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,
    }
   },
   methods: {
     updateAge() {
        this.myAge++
     },
   },

}
</script>

 mixins混入

混合分为局部混入和全局混入

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

可以定义公用的变量或方法;组件引入mixin以后会进行合并。

2: mixin混入对象值为函数的同名函数选项将会进行递归合并为数组,

mixin的生命周期函数和组件的生命周期函数都会执行,只不过先执行mixin中的同名函数;

3. 使用方式:

 第一步定义混合:

    ```
    {
        data(){....},
        methods:{....}
        ....
    }
    ```


    第二步使用混入:

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

定义一个混合mixin.js    Student.vue School,vue    全局混入 

<!--School.vue -->
<template>
	<div>
		<h2 @click="showName">学校名称:{{name}}</h2>
		<h2>学校地址:{{address}}</h2>
	</div>
</template>

<script>
	//引入一个hunhe
	import {hunhe,hunhe2} from '../mixin'

	export default {
		name:'School',
		data() {
			return {
				name:'中南大学',
				address:'长沙',
				x:666
			}
		},
		mixins:[hunhe,hunhe2],
	}
</script>
<!-- Student.vue-->
<template>
	<div>
		<h2 @click="showName">学生姓名:{{name}}</h2>
		<h2>学生性别:{{sex}}</h2>
	</div>
</template>

<script>
	import {hunhe,hunhe2} from '../mixin'

	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
		mixins:[hunhe,hunhe2]
	}
</script>
<!--mixin.js-->
export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊!')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}
<!-- main.js-->
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {hunhe,hunhe2} from './mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false

Vue.mixin(hunhe)
Vue.mixin(hunhe2)


//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

 Vue插件

1. 功能:用于增强Vue

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

3. 定义插件:

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

定义一个插件plugins

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('你好啊')}
	}
}
<!-- 适用插件定义的内容 -->
<template>
	<div>
		<h2>学校名称:{{name | mySlice}}</h2>
		<h2>学校地址:{{address}}</h2>
		<button @click="test">点我测试一个hello方法</button>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'中男大学YYDS',
				address:'长沙',
			}
		},
		methods: {
			test(){
				this.hello()
			}
		},
	}
</script>
<template>
	<div>
		<h2>学生姓名:{{name}}</h2>
		<h2>学生性别:{{sex}}</h2>
		<input type="text" v-fbind:value="name">
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
	}
</script

Scoped样式

1. 作用:让样式在局部生效,防止冲突。

冲突顺序看的是import先引入哪个 后面冲突的样式 覆盖前面引入的

2. 写法:```<style scoped>```

less -loader中 版本89 为 webpack 5 服务

npm i less-loader@7

<template>
	<div class="demo">
		<h2 class="title">学校名称:{{name}}</h2>
		<h2>学校地址:{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'中南大学',
				address:'长沙',
			}
		}
	}
</script>

<style scoped>
	.demo{
		background-color: skyblue;
	}
</style>

 

<template>
	<div class="demo">
		<h2 class="title">学生姓名:{{name}}</h2>
		<h2 class="cs">学生性别:{{sex}}</h2>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		}
	}
</script>

<style lang="less" scoped>
	.demo{
		background-color: pink;
		.cs{
			font-size: 40px;
		}
	}
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值