Vue学习记录5，单文件组件，配置Vue脚手架，分析并使用脚手架，render函数，脚手架的默认配置，ref属性，props配置，mixin(混入)，插件，scoped样式

最新推荐文章于 2024-03-14 15:51:45 发布

小婵婵不怕鬼

最新推荐文章于 2024-03-14 15:51:45 发布

阅读量421

点赞数

分类专栏： Vue 文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/qq_49080239/article/details/126101486

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了VueCLI的安装配置过程，以及如何使用Vue脚手架创建项目和理解其目录结构。通过App.vue和Student.vue组件的示例，阐述了单文件组件的结构和工作原理。此外，还讲解了Vue中的ref属性、props配置、mixin混入和插件使用，以及scoped样式的功能。

摘要由CSDN通过智能技术生成

单文件组件

School.vue

在这里插入代码片

Student.vue

<template>
    <div class="demo">
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <button @click="showName">点我提示名称</button>
    </div>
</template>
<script>
    export default {
        name: "Student",
        data(){
            return{
                name:'谭瑞曦',
                age:3
            }
        },
        methods:{
            showName() {
                alert(this.name)
            }
        }
    }
</script>

<style>

</style>

App.vue

<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>
<script>
    //引入组件
    import School from './School'
    import Student from './Student'

    export default {
        name: "App",
        components:{
            School,
            Student
        }
    }
</script>
<style>
    
</style>

main.js

import App from './App.vue'

new Vue({
    el:'#root',
    template: `<App></App>`,
    compoents:{App}
})

index.html

<body>
<!--准备一个容器-->
<div id="root"></div>
</body>

在这里插入图片描述

Vue CLI

Vue CLI（Vue Command Line Interface）Vue脚手架，Vue官方提供的标准化开发工具（开发平台）

配置Vue脚手架

第一步：全局安装@vue/cil（前提：配置了npm淘宝镜像）
管理员身份执行命令行输入：npm install -g @vue/cli
命令行输入：vue不报错及安装成功
第二步：切到要创建项目的目录，然后使用命令创建项目
vue create xxxx
2.1找到目的文件夹，点击路径输入cmd回车即可快速进入
在这里插入图片描述 2.2 输入vue create xxxx
2.3 若出现提示是否使用淘宝镜像，则输入Y回车即可
2.4 选择自己使用的vue版本再回车
2.5 关掉窗口，进入新建的xxxx文件，以2.1的方式再次进入命令窗口
输入命令：npm run serve
得到的第一个url即是你的内置服务器，第二个是同局域网的其他人可以使用
脚手架配置完毕
如果要停止工程:连按两次Ctrl+C即可

分析脚手架结构

├── 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：包版本控制文件

main.js

/*该文件是整个项目的入口文件*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vue实例对象
new Vue({
  //将App组件放入容器中
  render: h => h(App),
}).$mount('#app')

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>
<!--  当浏览器不支持js时，noscript中的元素就会被渲染-->
    <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>

使用脚手架

在这里插入图片描述如图：App.vue直接放在src文件夹内，其他小组件放在compons文件夹内。
终端打开最外层文件夹，即上方2.2新建的文件夹，输入npm run serve，点击出现的url地址即可。
注意!!：如果有报错，即可能是组件名应该用双驼峰命名法，例：SchoolName

render函数

vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。正因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

render: h => h(App)

等价于

render(createElement){
    return createElement(App)//具体内容在App组件中
  }

为什么要引入残缺的vue呢？

vue.js是完整版的Vue，由核心和模板解析器组成。模板解析器占用的内存太大，开发完成后并不需要模板解析器。

脚手架的默认配置

vue.config.js配置文件

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

ref属性

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

<h2 v-text="msg" ref="title"></h2>
<SchoolName ref="sch"/>

console.log(this.$refs.sch)//SchoolName组件的实例对象
console.log(this.$refs.title)//真实DOM元素

props配置

功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：
第一种方式（只接收）：props:['name']
第二种方式（限制类型）：props:{name:String}
第三种方式（限制类型、限制必要性、指定默认值）：

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

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

案例

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

<script>
    export default {
        name: "StudentInformatin",
        data(){
            return{
                msg:'我是一个大傻瓜！',
                myAge:this.age
            }
        },
        methods: {
            updateAge(){
                this.myAge++
            }
        },
        // props:['name','sex','age']//简单声明接收

        //接收的的同时对数据进行类型限制
        // 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(混入)

功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合：

export const mixin = {
    methods: {
        showName(){
            alert(this.name)
        }
    }
}

第二步使用混入：
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件：

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}