VUE的组件和脚手架

一、VUE的组件有computed(计算)、watch(监听)、class和style、components、directive(自定义指令)操作dom。

computed组件针对于任何包含响应式数据的复杂逻辑，从现有数据计算出新的数据。watch(监听)事件，一般用于数据变化时执行异步或开销较大的操作，监听事件需要添加处理器handler与deep。class和style属于内联样式属性，可以对所需标签进行样式设置如：<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>。directive(自定义指令)除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令如：

const app =Vue.createApp({directives: {focus: {mounted(el) {el.focus()}}}}).mount("#app")。

二、Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件组件进入和离开 DOM 的钩子 使用内置的 <transition> 组件。该组件可以实现动画效果。

动画效果的实现一般有三种，在进入/离开的过渡中，会有 6 个 class 切换：v-enter-from 进入开始 v-enter-to 进入结束 v-enter-active进入整个状态 v-leave-from 离开开始 v-leave-to 离开结束 v-leave-active离开整个状态。

另外动画的实现还可以通过定义关键帧(@keyframes)和引入第三方(animate动画库)。定义关键帧的程序如下：@keyframes fadeIn{

from{opacity: 0;}   

 to{ opacity: 1;} } @keyframes fadeOut {   

 0%{ opacity: 1;}     

100%{ opacity: 0;} }

 .fade-enter-active{ animation: fadeIn ease 1s;}  .fade-leave-active{ animation: fadeOut ease 1s;}。第三方引入需要下载css文件，通过link引入。

三、脚手架的安装有一定的步骤，先win键加r打开运行窗口，输入cmd后回车。可以通过网盘名+":"切换盘如：d：，就可以进入d盘了。cd切换目录，dir查看目录文件，md创建目录，rd删除目录。./是当前目录，../是上层目录，/是根目录。

NPM是随同NodeJS一起安装的包管理工具，npm-v查看版本。淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。npm config set registry https://registry.npm.taobao.org。

初始化项目：npm init：引导你创建一个package.json文件，包括名称、版本、作者这些信息。

VUE脚手架：Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架。

脚手架安装：npm install -g @vue/cli，查看版本 vue -V， 创建项目（安装在当前目录） vue create 项目名称。