vue基础知识回顾及CLI脚手架

vue基础知识回顾

vue中的mvvm

mvvm（model数据 view视图 viewmodel视图模型）

数据劫持的原理（vue2：Object.defineProperty vue3：Proxy）被数据劫持的数据被称为响应式数据

观察者模式来实现对数据变化的监听

vue中的相关指令

  • v-html

  • v-text

  • v-show

  • v-if

  • v-else

  • v-else-if

  • v-for

  • v-bind(:)

  • v-on(@)

  • v-model

  • v-pre

  • v-cloack

  • v-once

  • v-slot(#)(2.6版本以上可用)

vue动画

transition（动画）

transition-group（分组动画）

vue相关属性

el：用于指定vue实例对象挂载的元素

data：存储的数据

methods 方法定义

filters 过滤器（VUE3中废弃）

computed 计算属性（内置get和set，默认使用get）

watch 监听属性（handler处理函数 deep是否深度监听 immediate立即执行）

template 模板（优先采用template，大于el）

生命周期
  • beforeCreate
  • beforeCreated
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed
img

axios

axios是一个封装好的http请求库

返回的方法都是promise

返回的数据和发送的数据都是JSON类型（会多嵌套一个data）

axios.defaults.baseUrl

axios.defaults.timeOut

相关方法
  • axios.get(参数必须在对象中，且属性名必须为params)
  • axios.post
  • axios.put
  • axios.delete
  • axios.all
axios的拦截器

请求拦截、响应拦截（可完成对应axios的二次封装）

vue中的组件

相关概念

组件分为全局组件（Vue.component注册）和局部组件（componets属性中注册）

组件是抽取html+JavaScript+css形成一个模块，可在各处复用。

因为组件需要在各处使用，故本身没有数据，依赖于传递

组件中的data是一个函数来返回数据（避免数据的污染）

Vue实例是最大的一个组件

组件动态切换（component是内置组件，通过is来指定对应的组件名）

组件通信

父传子（父组件利用属性传值，子组件利用props属性接收值）

子传父（子组件通过$emit来派发和执行事件，父组件利用v-on来监听对应事件，在处理函数的参数接收数据）

bus（通过创建一个公共的vue实例对象（bus对象）通过$emit和 $on来进行事件的发布和订阅）

provide inject （基于父子关系provide用于数据传递，inject接收对应数据）

作用域插槽传递（扩大对应的子组件的作用域）

ref传参（通过$ref来获取对应的组件对象）

插槽

插槽简单来讲就是组件预留的一个入口，帮助你将内容放到组件中

通过标签来指定对应的插槽，通过name属性来指定对应的插槽名

  • 匿名插槽（有一个默认名default）
  • 具名插槽
  • 作用域插槽（利用slot-scope=”scope”来获取插槽中通过属性传递过来的数据）（2.6版本后可用v-slot代替slot及slot-scope属性（v-slot:header=”scope”））
组件封装的原则
  • 所有数据都应该来源于外界的传递（例如props）
  • 所有的事件都应该调用的父组件处理（$emit派发事件）
  • 至少具备一个插槽

路由

相关对象

  • router 路由对象（传递给vue实例对象）

    相关属性：

    • mode（hash、history、abstract）

    相关方法：

    • addRoutes 添加路由表

  • routes 路由表（包含多个route配置对象）

  • route 路由配置对象

    相关的属性：

    • path 路由
    • name 路由名
    • component 对应的组件
    • hildren 子路由（子路由的path不能以/开头）
    • redirect 重定向
    • meta 相关配置属性
    • props 传递给对应组件的数据
相关标签

router-link 路由切换（to属性 tag标签 exact精确匹配）

router-view 路由视图

KeepAlive 是否缓存（对应的组件会有两个钩子函数activated和deactivated）

路由传参

query传参 ？拼接

params传参 /后面接数据，定义对应的path路径:key来接收

Vue脚手架

Vue CLI

⚠️ Vue CLI 现已处于维护模式!

现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。 另外请参考 Vue 3 工具链指南 以了解最新的工具推荐。

概述

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

  • 通过 @vue/cli 实现的交互式的项目脚手架。

  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

  • 一个运行时依赖 (@vue/cli-service)，该依赖：

    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置；
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。

  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

​ Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

起步

使用下列命令安装vue-cli：

1
npm install vue-cli@版本号 -g

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

1
vue --version
使用init webpack创建项目
1
vue init webpack vue-cli2-project

image-20230403113614586

该命令创建的项目使用vue run dev启动

使用create创建项目（vue-cli5版本）
1
vue create vue-cli5-project

前两项为默认构建项目,最后一项为自定义构建，这里第三项选择自定义构建

image-20230403115535908

选择需要安装的模块

image-20230403120820372

选择vue版本

image-20230403121118809

选择路由模式

image-20230403121219105

选择css预编译器

image-20230403121247491

选择eslint语法检查方式

image-20230403121808847

选择校验规则生效时间

image-20230403121915736

选择规则的保存位置

image-20230403122007324

是否保存这个项目配置，以便后续使用，并重命名项目名

image-20230403122052165

整体预览

image-20230403122240269

该指令创建的项目使用vue run serve启动

Vite

使用vie创建vue3项目

1
npm create vite@latest vite-project --template vue

使用npm run dev启动项目

vite和webpack构建项目的比较

webpack：

image-20230403143509321

vite：

image-20230403143529791

项目目录（vue2）

vue-cli5构建的项目

image-20230403145237162