VueCLI 脚手架

文章目录

一、安装
二、小Tips
三、分析脚手架结构
四、为什么使用render函数
五、修改脚手架中的默认配置
六、ref属性
七、配置项props
八、mixin混入
八、自定义插件
九、scoped样式管理
十、todo案例
- 1、思路
- 2、添加数据——Vue组件中按下回车键获取value值
- 3、勾选与取消勾选
- 4、删除
- 5、统计已完成与全部完成
- 6、清除已完成的todo
- 7、总结TodoList案例
十一、浏览器本地存储WebStorage
- 1、location
- 2、session
十二、todoList案例中添加本地存储
十三、组件的自定义事件
- 1、自定义事件_绑定
- 2、自定义事件_解绑
十三、事件总线
十四、消息订阅与发布
- 1、定义：
- 2、使用步骤
十五、nextTick
十六、Vue中封装的过渡与动画
- 1、效果
- 2、实现
- - 2.1、第一种：使用动画效果实现
  - 2.2、第二种：使用过渡方式
  - 2.3、第三种：使用第三方库实现过渡效果
十七、vue脚手架配置代理
- 1、方法一
- 2、方法二

一、安装

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

npm install -g @vue/cli

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

vue create xxxx

第三步：启动项目

npm run serve

二、小Tips

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

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

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行如下命令。就会将脚手架的默认配置生成一个 output.js文件供你查看

 vue inspect > output.js

三、分析脚手架结构

当我们使用脚手架新建一个项目vue_demo时，目录结构如下

assets 存放 png、video等静态资源，
components 存放子组件
脚手架文件结构如下：

当我们运行npm run serve命令时，系统会去文件中寻找main.js入口文件，

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

首先引入App.vue文件，在App.vue文件中再引入components文件夹下的其他vue文件，如下
在public文件夹下找到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"><!-- 配置网页标题，<%= htmlWebpackPlugin.options.title %>表示package.json中的name --><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- noscript 表示当浏览器不支持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>

四、为什么使用render函数

在我们创建vm时，使用的new Vue时，使用常规的new Vue会出现以下错误

new Vue({el:'app';template:'<h1>你好啊！</h1>`;components:{App}
})

错误信息中要求我们使用完整版的vue或者使用render函数，由于在开发中使用完整版的vue占用体积相对较大，因此使用render函数【render函数中必须要有返回值】

一般的render函数写为：
render(createElement){return createElement('h1','你好啊！')
}经过使用箭头函数的缩写为：render: h => h('h1','你好啊！')

即，也可以写为：

因此，总结如下

五、修改脚手架中的默认配置

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行如下命令。就会将脚手架的默认配置生成一个 output.js文件供你查看

 vue inspect > output.js

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

六、ref属性

当我们在APP.vue中给各标签添加属性获取DOM值操作时，建议使用ref属性，来代替document,getElementById（‘title’）
通过ref属性获取到的值我们进行打印输出，发现，组件的DOM是组件的实例对象，而标签的DOM是真实DOM

因此，ref

被用来给元素或子组件注册引用信息（id的替代者）

应用在HTML标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

使用方式：
打标识：<h1 ref="xxx">...<h1>或<School ref="xxx><School>
获取：this.$refs.xxx

七、配置项props

props 实现了父组件向子组件传递数据（或方法），父组件中绑定属性（或方法），子组件中利用props接受数据（或方法）。。。若想要子组件向父组件传递数据，可利用方法传递，将参数带到方法中递回给父组件

现在有这么一个需求：在复用组件时，组件内的数据可以动态的改变，传入什么就展示什么——这就要用到props配置属性

所以，配置项props的功能就是让组件接收外部传过来的数据。

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

接收数据的方式如下

第一种：简单的声明接收【常用，只接收，对数据无特别要求】

props:['name','age','sex']

第二种：接受的同时对数据进行类型限制

props:{name:String,age:Number,sex:String
}

第三种：接受的同时对数据：进行类型限制 + 默认值的指定 + 必要性的限制
注意：default 与 required不能同时出现

props:{name:{type:String, // name 的类型是字符串required:true, // name 是必要的},age:{type:Number,default:99 // 默认值},sex:{type:String,required:true}
}

八、mixin混入

1、功能：复用配置，可以把多个组件共用的配置提取成一个混入对象，即多个组件共享同一个配置。
2、使用方式：

将共用的内容抽取到一个js文件中
在需要用到的组件中进行引入——局部引入
在需要用到的组件中进行引入——全局引入

八、自定义插件

1、定义插件：在plugins.js文件中定义插件，install()的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据【可写】

2、使用插件：在main.js文件中引入插件：import，使用插件：Vue.use()

九、scoped样式管理

在新建组件时，会用到style样式，scoped的作用就是让样式在局部生效，防止类名相同引起冲突

十、todo案例

1、思路

2、添加数据——Vue组件中按下回车键获取value值

安装npm install nanoid，并在代码中导入并调用nanoid()函数可以生成随机的id值

第一种：使用event获取数据

<template><div><input type="text" placeholder="请输入你的信息，按回车键确认" v-model="title" @keyup.enter="add"/><div/>
</template><script>import {nanoid} from 'nanoid'export default {name:'AddMessage',methods: {add(event){// 将用户的输入包装成一个todo对象const todoObj = {id:nanoid(),title:event.target.value,done:false)}}}
</script>

第二种：使用v-model双向绑定数据

<template><div><input type="text" placeholder="请输入你的信息，按回车键确认" v-model="title" @keyup.enter="add"/><div/>
</template><script>export default {name:'AddMessage',data(){return {title:''}},methods: {add(){// 校验数据if(!this.title.trim()) return alert('输入不能为空')// 将用户的输入包装成一个对象const todoObj = {id:nanoid(),title:this.title,done:false),// 将输入框的数据进行清除this.tite = '' }}}
</script>

3、勾选与取消勾选

第一种写法：绑定点击事件

第二种方法：使用v-model布尔值的点击绑定修改，但是不推荐使用，因为修改掉了 props

4、删除

5、统计已完成与全部完成

第一种：使用foreach循环添加【不推荐使用】

第二种，使用reduce函数实现：reduce((函数)，初始变量接收值，类似于let i=0)
数组的长度为几，reduce中的函数部分就会调用几次。
pre：上一次的值
cuurrent：当前的值

使用v-model，但需要get()方法和set()方法同时使用

6、清除已完成的todo

7、总结TodoList案例

注意：vc中data、props、methods、computed中的名字不能重名

十一、浏览器本地存储WebStorage

首先，定义几个button

1、location

2、session

十二、todoList案例中添加本地存储

十三、组件的自定义事件

1、自定义事件_绑定

组件的自定义事件需要子组件向父组件进行传递数据，父组件定义函数（带参），绑定在子组件上，子组件通过props去拿到父组件传递过来的函数进行调用并将参数传递出去，从而试下子——父组件之间的传递

父组件App.vue

除此之外还可以用ref去接受，并在mounted中去触发事件

子组件Student.vue

2、自定义事件_解绑

解绑哪个事件就需要在哪个事件应用的组件上绑定解绑事件

十三、事件总线

想要在兄弟组件中互相传递数据，得用到父组件，但是非常麻烦
因此，学习事件总线可以有效的传递兄弟组件间的数据

首先在main.js文件中的实例对象vm上绑定一个事件如下

第二步在兄弟组件1——Student组件中设置方法将name通过事件总线发射出去

第三步，在兄弟组件2——School组件中的bus总线上绑定事件去接收传过来的数据

十四、消息订阅与发布

1、定义：

是一种组件间通信的方式，使用于任意组件间的通信

2、使用步骤

安装pubsub：npm install pubsub-js
引入：import pubsub from 'pubsub-js'
接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
提供数据：pubsub.publish('xxx',数据)
最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)取消订阅

十五、nextTick

语法：this.$nextTick(回调函数)
作用：在下一次DOM更新结束后执行其指定的回调
什么时候用：当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指定的回调函数中执行
案例：在点击编辑下一任务时该任务取消焦点获取，下一任务获得焦点

十六、Vue中封装的过渡与动画

1、效果

向左向右过渡移动的效果

2、实现

<template><div><button @click="isShow=!isShow">显示/隐藏</button><transition name="hello" appear><h1 v-show="isShow">{{msg}}</h1></transition></div>
</template>
<script>export default {name: 'Test',data(){return{msg:'你好啊大家！',isShow:true}},}
</script>

2.1、第一种：使用动画效果实现

1、将要过渡的内容放在<transition>标签中，添加name，在使用时对name进行过渡效果添加，添加apper表示在页面加载时开始过渡
2、在css中设置@keyframes中的移动效果
3、利用.hello-enter-active{}和.hello-leave-active{}添加进入，离开的效果

<style scoped>h1{background-color: orange;}.hello-enter-active{animation: tran 1s linear;}.hello-leave-active{animation: tran 1s linear reverse;}@keyframes tran {from{transform: translateX(-100%);}to{transform: translateX(0px);}    }
</style>

2.2、第二种：使用过渡方式

2.3、第三种：使用第三方库实现过渡效果

该库的官网
第一步：安装库：npm install animate.css
第二步：导入库：import 'animated'
第三步：使用：

十七、vue脚手架配置代理

1、方法一

2、方法二