09 【CLI 初始化脚手架 Vue零碎的一些知识】

news2024/9/24 13:21:39

09 【CLI 初始化脚手架 Vue零碎的一些知识】

1.Vue CLI 初始化脚手架

1.1具体步骤

1如果下载缓慢请配置npm淘宝镜像npm config set registry http://registry.npm.taobao.org
2全局安装 @vue/cli npm install -g @vue/cli
3切换到创建项目的目录，使用命令创建项目vue create xxx
4选择使用vue的版本
5启动项目npm run serve
6打包项目npm run build
7暂停项目 Ctrl+C

Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行vue inspect > output.js

1.2脚手架文件结构

.文件目录
├── 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: 包版本控制文件

脚手架demo

components

就直接把单文件组件的 School.vue 和 Student.vue 两个文件直接拿来用，不需要修改。

App.vue

引入这两个组件，注册一下这两个组件，再使用。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Student></Student>
    <School></School>
  </div>
</template>

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

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

main.js:

入口文件

// 该文件是整个项目的入口文件

import Vue from 'vue'				// 引入Vue
import App from './App.vue'	// 引入App组件，它是所有组件的父组件

Vue.config.productionTip = false

new Vue({
	el:'#app',
  render: h => h(App),			// render函数完成了这个功能：将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">
      
        <!-- 配置页签图标 <%= BASE_URL %>是public所在路径，使用绝对路径 -->
        <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>
    </body>
</html>

1.3render函数

插入一个小知识：

使用 import 导入第三方库的时候不需要 加 ‘./’

导入我们自己写的：

import App from './App.vue'

导入第三方的

import Vue from 'vue'

不需要在 from ‘vue’ 加 './' 的原因是第三方库 node_modules 人家帮我们配置好了。

我们通过 import 导入第三方库，在第三方库的 package.json 文件中确定了我们引入的是哪个文件

image-20220630173839543

通过 module 确定了我们要引入的文件。

备注：这是ESM默认导入的文件，CommonJS默认导入mian中路径的文件

回到 render 函数

之前的写法是这样：

import App from './App.vue'

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

如果这样子写，运行的话会引发如下的报错

image-20220630174043948

报错的意思是，是在使用运行版本的 vue ，没有模板解析器。

从上面的小知识可以知道，我们引入的 vue 不是完整版的，是残缺的（为了减小vue的大小）。所以残缺的vue.js 只有通过 render 函数才能把项目给跑起来。

来解析一下render

// render最原始写的方式
// render是个函数，还能接收到参数a
// 这个 createElement 很关键，是个回调函数
new Vue({
  render(createElement) {
      // 这个 createElement 回调函数能创建元素
      // 因为残缺的vue 不能解析 template，所以render就来帮忙解决这个问题
      // createElement 能创建具体的元素
      return createElement('h1', 'hello')
  }
}).$mount('#app')

1.4关于不同版本的函数

来个不同版本 vue 的区别

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

1.5vue.config.js 配置文件

vue inspect > output.js可以查看到Vue脚手架的默认配置

不能修改

使用vue.config.js可以对脚手架进行个性化定制，和package.json同级目录，详见 配置参考 | Vue CLI

module.exports = {
  pages: {
    index: {
      entry: 'src/index/main.js' // 入口
    }
  },
  lineOnSave: false	// 关闭语法检查
}

2. vue 零碎的一些知识

2.1ref属性

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

  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>

image-20220630222636601

2.2 props 配置项

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

  2. 传递数据：<Demo name="xxx" :age="18"/>这里age前加:，通过v-bind使得里面的18是数字

  3. 接收数据：

    1. 第一种方式（只接收）：props:['name']

    2. 第二种方式（限制类型）：props:{name:String, age:Number}

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

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

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

vue props传Array/Object类型值，子组件报错解决办法

image-20220728124344030其实看错误信息也就知道了，就是Props在传值类型为Object/Array时，如果需要配置default值（如果没有配置default值，则不会有这个报错)，那必须要使用函数来return这个default值，而不能像基本数据类型那样直接写default：xxx

//错误写法
props: {
	rlist: {
		type:Array,
		default: [1, 2, 3, 4, 5]
	}
}

解决方法

//正确写法
props: {
	rlist: {
		type:Array,
		default: function() {
			return [1, 2, 3, 4, 5]
		}
	}
}
//当然，我们可以使用箭头函数来写，还显得简单很多
props: {
	rlist: {
		type:Array,
		default: () => [1, 2, 3, 4, 5]
	}
}

示例代码：

父组件给子组件传数据

App.vue

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

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

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

School.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: "我是一个bilibili大学的学生",
      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>

2.3mixin混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

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

例子：

const mixin = {
    data() {....},
    methods: {....}
    ....
}

使用混入

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

局部混入

src/mixin.js

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}

export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

src/components/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>

src/components/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>

全局混入

src/main.js

import Vue from 'vue'
import App from './App.vue'
import {mixin} from './mixin'

Vue.config.productionTip = false
Vue.mixin(hunhe)		// 全局混合引入
Vue.mixin(hunhe2)	// 全局混合

new Vue({
    el:"#app",
    render: h => h(App)
})

这样所有组件就自动使用这些配置了，不推荐使用全局混入

备注

  1. 组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先
var mixin = {
	data: function () {
		return {
    		message: 'hello',
            foo: 'abc'
    	}
  	}
}

new Vue({
  	mixins: [mixin],
  	data () {
    	return {
      		message: 'goodbye',
            	bar: 'def'
    	}
    },
  	created () {
    	console.log(this.$data)
    	// => { message: "goodbye", foo: "abc", bar: "def" }
  	}
})
  1. 同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用
var mixin = {
  	created () {
    	console.log('混入对象的钩子被调用')
  	}
}

new Vue({
  	mixins: [mixin],
  	created () {
    	console.log('组件钩子被调用')
  	}
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

2.4plugin 插件

1.功能：用于增强Vue
2.本质：包含install方法的一个对象，install的第一个参数是Vue构造函数，第二个以后的参数是插件使用者传递的数据
3.定义插件（见下 src/plugin.js）
4.使用插件：Vue.use()

Vue.use执行之后，会自动调用install方法，所有组件就可以使用里面定义的东西。

src/plugin.js

export default {
  install(Vue,x,y,z){
    console.log(x,y,z)
      
    //定义全局指令
    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('你好啊')}
  }
}

src/main.js

import Vue from 'vue'
import App from './App.vue'
import plugins from './plugins'	// 引入插件

Vue.config.productionTip = false

Vue.use(plugins,1,2,3)	// 应用（使用）插件

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

src/components/School.vue

<template>
  <div>
    <h2>学校名称：{{ name | mySlice }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="test">点我测试一个hello方法</button>
  </div>
</template>

<script>
  export default {
    name:'School',
    data() {
      return {
        name:'数据测试atguigu',
        address:'北京',
      }
    },
    methods: {
      test(){
        this.hello()
      }
    },
  }
</script>

src/components/Student.vue

<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>

2.5scoped

scoped样式

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

具体案例：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/611092.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

递增子序列

递增子序列

1题目 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0c;也可以视作递增序列的一种特殊情况。 示例 1…
阅读更多...
苹果MacOS系统傻瓜式本地部署AI绘画Stable Diffusion教程

苹果MacOS系统傻瓜式本地部署AI绘画Stable Diffusion教程

Stable Diffusion的部署对小白来说非常麻烦&#xff0c;特别是又不懂技术的人。今天分享两个一键傻瓜式安装包&#xff0c;对小白来说非常有用。下面两个任选一个安装就可以。 一、DiffusionBee 简单介绍 DiffusionBee是基于stable diffusion的一个安装包&#xff0c;有图形…
阅读更多...
BIO NIO AIO之间的区别与联系

BIO NIO AIO之间的区别与联系

目录 前言五种I/O模型1.同步阻塞I/O, BIO2.同步非阻塞I/O, NIO3.多路复用IO4.信号驱动I/O5.异步I/O&#xff0c;AIO 同步阻塞&#xff1f;异步非阻塞&#xff1f;1.阻塞I/O 与 非阻塞I/O2.同步I/O 与 异步I/O Netty采用了哪种I/O模型? 前言 Unix系统下的五种基本I/O模型 blo…
阅读更多...
【Jenkins】什么？前端还能用Jenkins一键部署？

【Jenkins】什么？前端还能用Jenkins一键部署？

前置要求&#xff1a; Jenkins安装nodejs插件&#xff08;本篇文章会教&#xff09; Linux安装Node.js&#xff08;图文解说详细版&#xff09; 如果你是一名前端工程师&#xff0c;那么你可能会对Jenkins这个自动化构建工具并不陌生。但是&#xff0c;你有没有想过在前端项目中…
阅读更多...
Python+Django图书商城网站前后端

Python+Django图书商城网站前后端

程序示例精选 PythonDjango图书商城网站前后端 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<PythonDjango图书商城网站前后端 >>编写代码&#xff0c;代码整洁&#xff0c;规…
阅读更多...
飞行器姿态计算

飞行器姿态计算

在飞行器的控制中&#xff0c;姿态计算是至关重要的一步。姿态计算的目标是确定飞行器相对于参考坐标系的姿态&#xff0c;通常以欧拉角&#xff08;滚转、俯仰和偏航&#xff09;或四元数的形式表示。 以下是姿态计算的原理和常用方法的简要介绍&#xff1a; 原理&#xff1a…
阅读更多...
数据库系列：数据库高可用及无损扩容

数据库系列：数据库高可用及无损扩容

1 背景 在大型互联网场景中&#xff0c;数据库的高可用性显得尤为重要&#xff0c;为了保证稳定性&#xff0c;一般需要采用强化的架构模式&#xff0c;以保证数据层能够提供持续有效的稳定支撑。 2 高可用架构的基本演进过程 2.1 基本的数据库架构 每个服务对应一个存储服…
阅读更多...
FinancesOnline 2022/2023 10大IT趋势预测

FinancesOnline 2022/2023 10大IT趋势预测

在过去几十年的时间里&#xff0c;全世界的计算能力达到了万亿倍的增长。太空、军事和工业研究促成了范式的转变。与此同时&#xff0c;新冠肺炎大流行等不可预见的事件迫使人们去迎接新的技术&#xff0c;采用与以往不同的技术路径&#xff0c;这导致了IT趋势越来越难以跟上。…
阅读更多...
阿里云轻量服务器--Docker--Rabbitmq安装

阿里云轻量服务器--Docker--Rabbitmq安装

1 Rabbitmq 介绍&#xff1a; RabbitMQ 是一个开源的消息代理软件&#xff0c;通常用于构建分布式系统&#xff0c;支持多种消息传递协议&#xff0c;并支持多种编程语言。RabbitMQ 基于 AMQP (Advanced Message Queuing Protocol) 协议开发&#xff0c;是一个高可用、高可靠、…
阅读更多...
3.完成ODS层数据采集操作

3.完成ODS层数据采集操作

将原始数据导入mysql 1 选中mysql 运行脚本 2 验证结果 数据存储格式和压缩方案 存储格式 分类 1.行式存储(textFile) 缺点：可读性较好 执行 select * 效率比较高 缺点：耗费磁盘资源 执行 select 字段 效率比较低 2.列式存储(orc) 优点：节省磁盘空间. 执行 select 字段…
阅读更多...
配电网可靠性评估(4)—(顶刊复现)基于线性规划的配电网可靠性评估

配电网可靠性评估(4)—(顶刊复现)基于线性规划的配电网可靠性评估

之前的博客中介绍了配电网可靠性评估的三种方法、分别是解析法中的最小路法&#xff0c;以及序贯蒙特卡罗模拟法及非序贯蒙特卡洛模拟法&#xff0c;顺带提到了含有分布式电源的配电网可靠性评估方法。 配电网可靠性评估&#xff08;一&#xff09;最小路法和非序贯蒙特卡洛模…
阅读更多...
Elai.io：AI视频生成平台

Elai.io：AI视频生成平台

【产品介绍】 Elai.io是一个基于人工智能的AI视频生成平台&#xff0c;可以让你只用文本就能制作出有真人主持的专业视频。无论你是想做教育、营销、企业沟通或者其他类型的视频内容&#xff0c;Elai.io都可以帮你节省时间和成本&#xff0c;提高效率和质量。Elai.io的技术结合…
阅读更多...
618数码产品攻略，列举几款2023年618必入的数码产品

618数码产品攻略，列举几款2023年618必入的数码产品

​一年一度大型促销的618节日转眼间第一波就已经过去了&#xff0c;在这种各类优惠活动接踵而至的日子里&#xff0c;很多人都是准备着更换新东西的时刻&#xff0c;不过也会存在着一部分人&#xff0c;想要入手数码好物&#xff0c;但又不知道该如何去挑选&#xff0c;毕竟现在…
阅读更多...
2.2 事件驱动的reactor网络设计模型

2.2 事件驱动的reactor网络设计模型

在网络io、io多路复用select/poll/epoll、基于事件驱动的reactor中介绍了多种网络I/O方式&#xff0c;特别是事件驱动的reactor。其开发效率比直接使用IO多路复用要高&#xff0c;它一般是单线程的&#xff0c;设计目标是希望一个线程使用CPU的全部资源。 并且&#xff0c;相对…
阅读更多...
Rxjava2系列：RXjava2.1.7源码下载

Rxjava2系列：RXjava2.1.7源码下载

找到github项目地址&#xff1a;https://github.com/ReactiveX/RxJava/ 找到右侧的release&#xff0c;点击打开。 搜索2.1.7 (2.1.7是这篇文章&#xff1a;RxJava 是如何实现线程切换的&#xff08;上&#xff09;的源码版本&#xff09; 找到Assert&#xff0c;下载 解…
阅读更多...
计算机专业应届毕业生有没有必要参加IT培训？

计算机专业应届毕业生有没有必要参加IT培训？

大学学习的计算机专业&#xff0c;毕业还需要进行IT培训吗&#xff1f;我想&#xff0c;这个问题也困扰着你们吧。那今天小课就带着你们分析一下&#xff0c;计算机专业毕业的应届生到底有没有必要进行培训。 了解企业的技术需求 考虑培训不培训&#xff0c;首先要了解一下现在…
阅读更多...
Vue.js 中的数据双向绑定是如何实现的？

Vue.js 中的数据双向绑定是如何实现的？

Vue.js 中的数据双向绑定是如何实现的&#xff1f; Vue.js 是一款流行的前端框架&#xff0c;它的核心功能之一是数据双向绑定。本文将介绍 Vue.js 中数据双向绑定的实现原理&#xff0c;并附上相关代码实例。 什么是数据双向绑定&#xff1f; 在传统的前端开发中&#xff0c…
阅读更多...
Matlab论文插图绘制模板第98期—大小不同多子图（Subplot）

Matlab论文插图绘制模板第98期—大小不同多子图（Subplot）

上一篇文章分享了Matlab多子图的绘制模板&#xff1a; 但假如子图的大小不是相同的&#xff0c;该怎么操作呢&#xff1f; 本期就来分享一下大小不同多子图的绘制模板。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;本期内容『数据代码』已上传资源群中&#xff0c;…
阅读更多...
java SSM 房屋管理系统统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

java SSM 房屋管理系统统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM 房屋管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和 数据库&#xff0c;系统主要采用B…
阅读更多...
Linux - 第22节 - 网络基础（其他重要协议或技术）

Linux - 第22节 - 网络基础（其他重要协议或技术）

1.DNS协议 • DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;协议&#xff0c;是一个用来将域名转化为IP地址的应用层协议。 • DNS协议属于应用层协议&#xff0c;由UDP实现其域名解析功能。 1.1.DNS背景 TCP/IP中通过IP地址和端口号的方式&#xff0c;来…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023