Vue 脚手架学习

🕗 发布于 2024-10-11 04:59 vue.js 学习 javascript

1.使用 Vue 脚手架

1.1 初始化脚手架

1.1.1 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三步：启动项目

npm run serve

初始化后应该配置的东西：

1、将下面代码复制进vue.config.js文件中，可以关闭脚手架的语法检查。。

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

2、在main.js文件中关闭生产提示

//关闭vue的生产提示
Vue.config.productionTip = false

备注：

1.如出现下载缓慢请配置 npm 淘宝镜像

npm config set registry http://registry.npm.taobao.org

2. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，

请执行下面代码，只提供读，不提供改。。。

vue inspect > output.js

使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh，可以提供改。

1.1.2 脚手架文件结构

创建脚手架的默认结构：

1.1.3 在Vue配置对象中配置template属性，会报错的原因

如果在Vue实例不配置render函数情况下，执行下面代码会报错

报错信息如下：

解决方案：要么将模板预编译为呈现函数（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函数去指定具体内容。

1.2 ref 和 props

1.2.1 ref 标签属性

定义：

ref 是用于在 Vue 组件中获取 DOM 元素或子组件实例的引用的机制。它可以用来直接访问子组件的方法和属性，或获取原生 DOM 元素的引用。

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

用法示例：

父组件：

<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod(); // 调用子组件的方法
    }
  }
};
</script>

子组件

<template>
  <div>
    <h1>Child Component</h1>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called!');
    }
  }
};
</script>

1.2.2 props配置项

定义：

props 是用于父组件向子组件传递数据的机制。它允许父组件将数据传递给子组件，使子组件能够使用这些数据。

1. 功能：让组件接收外部传过来的数据
2. 传递数据：```<Demo name="xxx"/>```

3. 接收数据：

1. 第一种方式（只接收）：```props:['name'] ```
2. 第二种方式（限制类型）：```props:{name:String}```

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

        ```js

        props:{

         name:{

         type:String, //类型

         required:true, //必要性

         default:'老王' //默认值

         }

        }

        ```

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

用法示例：

父组件：

<template>
  <ChildComponent :message="parentMessage" :count="5" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>

子组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  }
};
</script>

1.3 mixin(混入)

1.3.1 定义

Mixins 是一个对象，它包含了 Vue 组件的选项（data、methods、computed、watch、生命周期钩子等）。当一个组件使用一个混合时，混合的所有选项将与组件的选项合并。你可以定义一个或多个混合，然后将它们应用到不同的组件中，从而共享代码和功能。

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

注意：一般会写独立的js文件，然后要使用的地方再引入

1.3.2 如何使用 Mixins

1.需要定义一个混合对象：

// myMixin.js
export const myMixin = {
  data() {
    return {
      mixinData: 'This is data from mixin'
    };
  },
  methods: {
    mixinMethod() {
      console.log('This method is from mixin');
    }
  },
  created() {
    console.log('Mixin created');
  }
};

1.3.3 在组件中使用 Mixin

组件中使用混合：

<template>
  <div>
    <h1>{{ mixinData }}</h1>
    <button @click="mixinMethod">Call Mixin Method</button>
  </div>
</template>

<script>
import { myMixin } from './myMixin';

export default {
  mixins: [myMixin], // 使用混合
};
</script>

1.3.4 Mixins 的合并策略

当你将一个混合应用于组件时，Vue 会合并混合和组件的选项。不同选项的合并策略如下：

data：如果混合和组件都有 data 函数，Vue 会把它们的返回值合并到一个对象中。
methods：当混合和组件都有相同方法名时，组件的定义将覆盖混合的方法。
computed：和 methods 类似，如果有同名的计算属性，组件的定义将覆盖混合中的计算属性。
生命周期钩子：如果组件和混合都有生命周期钩子，Vue 会在调用组件的生命周期钩子之前调用混合的生命周期钩子。

1.4 自定义插件

1.4.1 定义插件

在 Vue.js 项目中，使用脚手架（如 Vue CLI）创建自定义插件可以帮助你实现特定的功能需求，例如自动化构建步骤、增加额外的功能或配置等。

注意：一般会写独立的js文件，然后要使用的地方再引入。

示例代码：

 对象.install = function (Vue, options) {

        // 1. 添加全局过滤器

        Vue.filter(....)

   

        // 2. 添加全局指令

        Vue.directive(....)

   

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

        Vue.mixin(....)

   

        // 4. 添加实例方法

        Vue.prototype.$myMethod = function () {...}

        Vue.prototype.$myProperty = xxxx

    }

1.4.2 使用插件

```Vue.use()```

1.5 scoped样式

问题：

组件与组件之间的 style 会被汇总到一个对象中，因此如果选择器名称一致就会出现冲突。

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

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

1.6 TodoList案例

1.6.1 TodoList案例实现

需求：

1.根据不同的功能拆分成不同的组件（可以拆分为5个组件）

2.然后根据组件实现的局部功能，引入相应的HTML和CSS静态组件

3.再实现动态的组件，考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用

4.后面再实现交互，从绑定事件开始。

实现效果：

脚手架结构：

代码演示：

App.vue

<template>
<div id="root">
<div class="todo-container">
<div class="todo-wrap">
<MyHeader :addTodo="addTodo"/>
<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
<MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
</div>
</div>
</div>
</template>

<script>
import MyHeader from './components/MyHeader'
import MyList from './components/MyList'
import MyFooter from './components/MyFooter.vue'

export default {
name:'App',
components:{MyHeader,MyList,MyFooter},
data() {
return {
//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
todos:[
{id:'001',title:'抽烟',done:true},
{id:'002',title:'喝酒',done:false},
{id:'003',title:'开车',done:true}
]
}
},
methods: {
//添加一个todo
addTodo(todoObj){
this.todos.unshift(todoObj)
},
//勾选or取消勾选一个todo
checkTodo(id){
this.todos.forEach((todo)=>{
if(todo.id === id) todo.done = !todo.done
})
},
//删除一个todo
deleteTodo(id){
this.todos = this.todos.filter( todo => todo.id !== id )
},
//全选or取消全选
checkAllTodo(done){
this.todos.forEach((todo)=>{
todo.done = done
})
},
//清除所有已经完成的todo
clearAllTodo(){
this.todos = this.todos.filter((todo)=>{
return !todo.done
})
}
}
}
</script>

<style>
/*base*/
body {
background: #fff;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.btn-danger {
color: #fff;
background-color: #da4f49;
border: 1px solid #bd362f;
}
.btn-danger:hover {
color: #fff;
background-color: #bd362f;
}
.btn:focus {
outline: none;
}
.todo-container {
width: 600px;
margin: 0 auto;
}
.todo-container .todo-wrap {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>

MyList.vue

<template>
<ul class="todo-main">
<MyItem 
v-for="todoObj in todos"
:key="todoObj.id" 
:todo="todoObj" 
:checkTodo="checkTodo"
:deleteTodo="deleteTodo"
/>
</ul>
</template>

<script>
import MyItem from './MyItem'

export default {
name:'MyList',
components:{MyItem},
//声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的
props:['todos','checkTodo','deleteTodo']
}
</script>

<style scoped>
/*main*/
.todo-main {
margin-left: 0px;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0px;
}

.todo-empty {
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
</style>

MyItem.vue

<template>
<li>
<label>
<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
<!-- <input type="checkbox" v-model="todo.done"/> -->
<span>{{todo.title}}</span>
</label>
<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
</li>
</template>

<script>
export default {
name:'MyItem',
//声明接收todo、checkTodo、deleteTodo
props:['todo','checkTodo','deleteTodo'],
methods: {
//勾选or取消勾选
handleCheck(id){
//通知App组件将对应的todo对象的done值取反
this.checkTodo(id)
},
//删除
handleDelete(id){
if(confirm('确定删除吗？')){
//通知App组件将对应的todo对象删除
this.deleteTodo(id)
}
}
},
}
</script>

<style scoped>
/*item*/
li {
list-style: none;
height: 36px;
line-height: 36px;
padding: 0 5px;
border-bottom: 1px solid #ddd;
}

li label {
float: left;
cursor: pointer;
}

li label li input {
vertical-align: middle;
margin-right: 6px;
position: relative;
top: -1px;
}

li button {
float: right;
display: none;
margin-top: 3px;
}

li:before {
content: initial;
}

li:last-child {
border-bottom: none;
}

li:hover{
background-color: #ddd;
}

li:hover button{
display: block;
}
</style>

MyHeader.vue

<template>
<div class="todo-header">
<input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
</div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
name:'MyHeader',
//接收从App传递过来的addTodo
props:['addTodo'],
data() {
return {
//收集用户输入的title
title:''
}
},
methods: {
add(){
//校验数据
if(!this.title.trim()) return alert('输入不能为空')
//将用户的输入包装成一个todo对象
const todoObj = {id:nanoid(),title:this.title,done:false}
//通知App组件去添加一个todo对象
this.addTodo(todoObj)
//清空输入
this.title = ''
}
},
}
</script>

<style scoped>
/*header*/
.todo-header input {
width: 560px;
height: 28px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 7px;
}

.todo-header input:focus {
outline: none;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

MyFooter.vue

<template>
<div class="todo-footer" v-show="total">
<label>
<!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
<input type="checkbox" v-model="isAll"/>
</label>
<span>
<span>已完成{{doneTotal}}</span> / 全部{{total}}
</span>
<button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
</div>
</template>

<script>
export default {
name:'MyFooter',
props:['todos','checkAllTodo','clearAllTodo'],
computed: {
//总数
total(){
return this.todos.length
},
//已完成数
doneTotal(){
//此处使用reduce方法做条件统计
/* const x = this.todos.reduce((pre,current)=>{
console.log('@',pre,current)
return pre + (current.done ? 1 : 0)
},0) */
//简写
return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
},
//控制全选框
isAll:{
//全选框是否勾选
get(){
return this.doneTotal === this.total && this.total > 0
},
//isAll被修改时set被调用
set(value){
this.checkAllTodo(value)
}
}
},
methods: {
/* checkAll(e){
this.checkAllTodo(e.target.checked)
} */
//清空所有已完成
clearAll(){
this.clearAllTodo()
}
},
}
</script>

<style scoped>
/*footer*/
.todo-footer {
height: 40px;
line-height: 40px;
padding-left: 6px;
margin-top: 5px;
}

.todo-footer label {
display: inline-block;
margin-right: 20px;
cursor: pointer;
}

.todo-footer label input {
position: relative;
top: -1px;
vertical-align: middle;
margin-right: 5px;
}

.todo-footer button {
float: right;
margin-top: 5px;
}
</style>

1.6.2总结TodoList案例

组件化编码流程：

(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

1).一个组件在用：放在组件自身即可。

 2). 一些组件在用：放在他们共同的父组件上App.vue（状态提升）。

(3).实现交互：从绑定事件开始。
props适用于：

(1).父组件 ==> 子组件通信

(2).子组件 ==> 父组件通信（要求父先给子一个函数，子调用该函数，实现对数据的操作）
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，因为Vue认为只要地址没有修改就不算改过，但不推荐这样做。

1.7 组件的自定义事件

一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
2. 第二种方式，在父组件中(灵活性更高)：
```
<Demo ref="demo"/>
......
mounted(){
   this.$refs.demo.$on('atguigu',this.test)
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件：this.$emit('atguigu',数据)
解绑自定义事件
1. this.$off('atguigu') 解绑一个事件
2. this.$off('a','b') 解绑多个事件
3. this.$off() 所有事件都会被解绑
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！正常函数的this指向绑定该事件的组件对象实例。。。

1.8 全局事件总线（GlobalEventBus）

本质：本质还是自定义事件，只不过可以实现跨越组件进行数据的交互。。。。

使用：哪里要用到数据就哪里绑定事件。。。

全局事件的实现要求：

1.需要所有组件通过某种方式可以进行交互
- 原型对象上添加了一个新的属性 $bus，并且这个属性的值是当前的 Vue 实例对象。因此所有组件都可以进行交互。。
2.并且所有组件要可以拿到 $on、$off、$emit方法
- 因此可以拿到Vue实例对象中的$on、$off、$emit方法

最终展示效果：

一种组件间通信的方式，适用于任意组件间通信。

安装全局事件总线：

new Vue({
    ......
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
    },
    ......
})

使用事件总线：
1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
```
methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}
```
2. 提供数据：this.$bus.$emit('xxxx',数据)
最好在beforeDestroy钩子中，用 $off 去解绑当前组件所用到的事件，以避免内存泄漏。

1.9 消息订阅与发布（pubsub）

注意：一般用全局事件总线实现，因为订阅要引入第三方库。。。

一种组件间通信的方式，适用于任意组件间通信。
使用步骤：
1. 安装pubsub：npm i pubsub-js
2. 引入: import pubsub from 'pubsub-js'
3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
```
methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('消息名',this.demo) //订阅消息
}
```
4. 提供数据：pubsub.publish('消息名',数据)
5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

实现：

原文地址：https://blog.csdn.net/2301_77358195/article/details/142676146

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【零散技术】MAC 安装多版本node
下一篇：RelationGraph实现工单进度图——js技能提升

Java入门：10.Java中的包
类似于OS中的文件夹。用来存放一组含义类似或相同的java类（接口），方便分类和管理。对应关系：java程序中的类 --- os中的.java文件java程序中的包 --- os中的文件夹如何指定包：
阅读更多2024-10-11
QD1-P14 HTML常用标签：input输入标签
本节学习 HTML 常用标签：input 输入标签
阅读更多2024-10-11
设计一个OAuth2认证系统：支持第三方登录的实用指南
OAuth2是一种授权框架，允许第三方应用在不暴露用户凭据的情况下访问用户的资源。资源拥有者（Resource Owner）：通常是用户，拥有受保护的资源。客户端（Client）：需要访问资源的应用程
阅读更多2024-10-11
脚本增加选项，解决问题
为了防止原始文件小于指定文件块大小，分割数量是0，默认数量+1, 导致分割文件数量不是最优，修改为通过可以判断指定大小和文件大小，执行分割。原因是拼接的输出文件后缀为(1)，文件系统会默认在文件名外层
阅读更多2024-10-11
【idea】切换多个仓库到一个分支
打开个一个Project 里面包含多个子项目，每一个子项目都有一个自己的git仓库。在idea 中有没有一次性把多个项目切换到同一个分支上面。OK 涉及到的项目已经全部切换到master 分支。
阅读更多2024-10-11
vscode插件
浏览器插件。
阅读更多2024-10-11
华为Eth-trunk链路聚合加入到E-trunk实现跨设备的链路聚合
你知道e-trunk与eth-trunk的区别吗？1、企业中有重要的server服务器业务不能中断的情况下，链路故障后，仍有可用的冗余链路，确保业务的延续性。2、企业中的重要业务，可通过将eth-tr
阅读更多2024-10-11
jenkins中的allure和email问题梳理
1.Allure Jenkins Plugin 只是一个集成插件，它要求你在 Jenkins 服务器上安装 Allure 命令行工具（Allure Commandline）来实际生成报告。需要需要邮箱
阅读更多2024-10-11
[红队apt]CHM电子书攻击/电子教程攻击
CHM文档攻击思路整理
阅读更多2024-10-11
推荐一个物联网平台，支持源代码交付
ThingsKit物联网平台以其强大的功能、简单的操作和高度的可定制性，为用户提供了一个快速实现物联网项目开发的平台。如果您正在寻找一个能够快速实现物联网项目开发的平台，那么ThingsKit将是您的
阅读更多2024-10-11