超炫之家

VUE

frontend

# 一、VUE基础

# SPA

SPA Single Page App 单页应用

单页应用的精髓就是：点击任何链接，都不会引起页面整体的刷新，而是通过JavaScript替换页面的局部内容。

知名的单页应用框架有：

  • Angular
  • Vue.js
  • React

# MVVM

MVVM Model - View ModelView

  • Model
  • View
  • ModelView

# Vue.js

Vue.js官网 (opens new window)

Vue.js（读音同View），是尤雨溪在2014年2月开源了一个前端开发框架。

Vue.js框架是一个MVVM的SPA框架。

  • Model：数据
  • View ：视图
  • ModelView：连接视图与数据的纽带

Vue.js 是构建 Web 界面的 JavaScript 库，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

# Vue-cli

Vue-cli 是Vue官方提供的快速构建基于webpack的vue项目的脚手架工具。

# Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

# 微信小程序

微信小程序是在微信在2017年出现的技术，基于微信。使用SPA的开发技术，运行在微信上。表现效果与原生APP几乎一样。

微信小程序的代码特点、文件组织形式及各种概念，与Vue.js是非常相似的。

# 阿里巴巴Weex

Weex官网 (opens new window)

Weex致力于使开发者能基于当代先进的Web开发技术，使用同一套代码，来构建Android、iOS和Web应用。

Weex支持了对于Vue.js2.0的直接集成，也就是可以在Weex中直接写Vue.js的代码。

# Node.js

Node.js官网 (opens new window)

Node.js安装配置 (opens new window)

Node下载地址 (opens new window)

# NPM、CNPM

名称 全称 用途 描述
NPM NPM Node Packeage Manager Node包管理器，主要作用是对第三方依赖进行统一管理。 只要安装了Node.js，就会捆绑安装该命令。
CNPM 由于NPM的服务器在国外，访问会受到限制。使用CNPM，通过淘宝提供的国内的镜像服务器，去进行管理。 cnpm淘宝镜像 (opens new window)

指定cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org
1

# NVM

Github：https://github.com/1111mp/nvm-desktop (opens new window)

nvm-windows： https://github.com/coreybutler/nvm-windows (opens new window)

Release 页面： https://github.com/1111mp/nvm-desktop/releases (opens new window)

Node.js 版本可视化管理工具：nvm-desktop。

nvm-desktop 是一个以可视化界面操作方式管理多个 Node 版本的桌面应用，使用 Electron 构建（支持 Macos 和 Windows 系统）。通过该应用，可以快速安装和使用不同版本的 Node。它完美支持为不同的项目单独设置和切换 Node 版本，不依赖操作系统的任何特定功能和 shell。

nvm-desktop 的功能包括：

  • 支持为系统全局和项目单独设置Node引擎版本
  • 管理Node的命令行工具
  • 支持英文和简体中文
  • 支持自定义下载镜像地址 (默认是 https://nodejs.org/dist)
  • Windows 平台支持自动检查更新
  • 完整的自动化测试

# NCU

NCU（Node.js包更新检查器）是一个用于检查并升级Node.js项目中的依赖包的工具。

npm install -g npm-check-updates
1

检查 package.json文件中依赖的最新版本。

ncu
1

更新项目的 package.json 文件中的所有依赖项到最新版本。

ncu -u
npm install
1
2

# Webpack

Webpack官网 (opens new window)

Webpack是一个打包工具，可以把js、css、node_module、scss、less、图片等都打包在一起。

# ES6

ES ECMAScript

在vue项目中，使用的不是原生的JavaScript，而是一种新的语言，这个语言就是ECMAScript。

严格来说，ECMAScript是JavaScript的规范，JavaScript是ECMAScript的实现。

ECMAScript简称ES，其版本比较多，有ES 2015、ES 2016、ES 2017等。而使用ES6来泛指这三个版本。

ECMAScript实现了很多普通js无法实现的功能，在Vue项目中大量使用了ES的语法。

例如:

  • 声明常量与变量：let、var；

  • 导入代码：import；

  • 暴露代码引用：export default {}；

  • ES简写：data() {} <==> data: function() {}

  • 箭头函数：.then(response => {}) <==> .then(function(response){})

  • 同名的key、value的简写：return { title} <==> return {title: title}

  • 分号省略

有关ECMAScript，国内比较好的中文教材，是阮一峰的《ES6标准入门》。书中详细的阐述了相关的语法、概念和用法。

电子版：ES6 入门教程 (opens new window)

# SASS、SCSS、LESS

名称 全称 官网 描述
SASS SASS官网 (opens new window) SASS是CSS的预处理器。SASS的特点是去掉了大括号和分号，看起来特别简单。慢慢已被SCSS取代。
SCSS Sassy CSS，时髦的CSS SCSS（SASS 3.0）是CSS的扩展。是SASS 3 引入的新语法，继承了SASS的强大功能。SCSS大部分的用法都与SASS相同。唯一不同的是其代码编写需要使用分号和大括号。
LESS LESS官网 (opens new window) LESS也是一种CSS预处理器。其作用与SCSS一样，也是未来让代码更加精简，删除无意义的重复代码。

# 二、原生Vue.js

Vue中文官网网址： https://cn.vuejs.org/ (opens new window)

# 基础定义

挂载点、模板、实例

挂载点

Id为app的dom元素即为挂载点

<div id="app">
  {{ message }}
</div>
1
2
3

模板

指挂载点中的内容。

插值表达式:

实例

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
1
2
3
4
5
6

# 指令

Vue对象中的设置通过html指令进行关联。

指令 作用 描述
v-text、v-html 数据渲染
v-if、v-show 控制模块是否隐藏
v-bind 属性绑定 v-bind:src="imgSrc"，可简写为:src="imgSrc"
v-model 双向数据绑定
v-on 事件绑定 v-on:click=""，可简写为@:click=""
v-for 渲染循环列表 当v-if和v-for同时存在时，v-for优先级比v-if高。

# 属性

new一个Vue对象，可以设置它的属性，其有如下属性。

属性 作用 描述
data 数据属性 代表Vue对象的数据
methods 方法属性 代表Vue对象的方法
watch 侦听器 设置Vue对象监听的方法
computed 计算属性 设置Vue对象计算的内容

# 组件

一个Vue页面包含三部分：

  • template标签：HTML
  • script标签：JavaScript
  • style标签：CSS

全局组件

局部组件

父子组件

# 三、Webpack+Vue项目

# 前置安装

  • Node.js：（6.0+）
  • NPM：（3.0+）
  • Vue.js：（2.0+）

前后端对比

对比 前端 后端
环境 Node.js JDK
构建工具 NPM Maven
语言 Vue.js JAVA

安装Vue.js

需要同时安装vue和vue-cli这两个node package。

npm install vue vue-cli -g
1

  • -g （--global）表示全局使用vue。

  • Vue-cli 是Vue官方提供的快速构建基于webpack的vue项目的脚手架工具。

使用cnpm代替默认的 npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm config set registry ‘http://registry.npm.taobao.org/’
1
2
3

# 创建项目

创建项目（根据webpack模板，创建一个vue项目）

vue init webpack my-porject
1

进入项目

cd my-porject
1

安装依赖

cnpm install
1

启动项目

npm run dev
1

# 项目结构

# 总体目录结构：

node-modules              //项目的依赖。

build                      // 构建相关，放置webpack的配置文件。

config                     // 配置相关，针对开发环境、线上环境的配置。

src                        // 源代码

    api                    // 所有请求, 接口 API

    assets                 // 主题 字体等静态资源

    components             // 全局公用组件(通用组件)

    directive              // 全局指令

    filtres                // 全局filter

    mock                   // mock数据

    router                 // 路由

    store                  // 全局store管理

    styles                 // 全局样式

    utils                  // 全局公用方法

    views                   // view页面

    App.vue                // 入口页面

    main.js                // 入口 加载组件 初始化等

static                     // 第三方不打包资源

    tinymce                // 富文本

.babelrc                   // babel-loader 配置

eslintrc.js                // eslint 配置项

.gitignore                 // git 忽略项

favicon.ico                // favicon图标

index.html                 // html模板, 项目的首页

package.json               // package.json

package-lock.json               // package-lock.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# package.json

常用的主要属性：scripts、dependencies、devDependencies。

  • scripts

    用scripts字段定义脚本命令。

    scripts对象的每一个属性，对应一段脚本。

    比如，dev命令对应的脚本是vue-cli-service serve --open。

  • dependencies

    应用能够正常运行所依赖的包。

    这种 dependencies 是最常见的，用户在使用 npm install 安装你的包时会自动安装这些依赖。

    使用 npm i 【包名】 --save 安装的包，则被写入到 dependencies 对象里面去。

    npm i 【包名】 --save 

# 简写为
npm i【包名】-S
    1
    2
    3
    4

  • devDependencies

    开发应用时所依赖的工具包。通常是一些开发、测试、打包工具。

    例如 webpack、ESLint、各种loader，babel全家桶及各种webpack的插件等。

    应用正常运行并不依赖于这些包。用户在使用 npm install 安装你的包时也不会安装这些依赖。

    使用 npm i 【包名】 --save-dev 安装的包，会被写入到 devDependencies 对象里面去。

    npm install 【包名】 --save-dev

# 简写为 
npm i【包名】-D
    1
    2
    3
    4

  • 版本

    • ^ "vue": "^2.5.2", 表示最高安装至2.x.x的最高版本；
    • ~ "vue": "~2.5.2", 表示最高安装至2.5.x的最高版本；

    npm安装时候的默认符号是"^"

# package-lock.json

package-lock.json的作用就是锁定安装时的版本号并上传到git上，保证其他人在npm install时下载的依赖都保持一直。

执行npm install，就会在目录下生成该文件。

# 四、Vue详解

# Vue生命周期

钩子函数

  1. created 创建好DOM
  2. mounted 页面基本准备好了
  3. updated 手动操作触发
  4. destroyed 销毁

其中上面周期中，1、3、4都是自动触发，且每一步都有对应的beforeXyz方法。

一般使用mounted作为页面初始化时，执行的方法。

每一个Vue.js实例都会经历如下所示的生命周期。

# Vue组件

# 组件引入

  1. 通过import导入，

  2. 把局部组件注册到当前组件中，通过components属性注册

  3. 组件标签使用。

# 组件通信

# 父组件向子组件传参（props）

父组件向子组件传值，是通过属性的形式进行传递的。

使用props传值，使用$on()监听事件。

# 子组件向父组件传参（$emit）

​ 子组件向父组件传参，要通过一个发布订阅模式。

# 嵌套组件

组件之间多层传递属性是一个比较常见的业务场景。如：A --> B --> C --> D。

A组件包含B组件，B组件又包含C组件，C组件包含D组件。

vue 多级嵌套组件中属性传递的快捷方式：

<C v-bind="$attrs" v-on="$listeners"></C>
1

# 路由vue-router

Vue-router官网 (opens new window)

Vue Router 是 Vue.js (opens new window) 的官方路由。

它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

# 功能

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

# 网路请求axios

Axios官网（中文版） (opens new window)

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

# 浏览器支持

# 优势

  • 从浏览器中创建 XMLHttpRequests

  • 从 node.js 创建 http 请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求数据和响应数据

  • 取消请求

  • 自动转换 JSON 数据

  • 客户端支持防御 XSRF

# 安装

使用 npm

npm install axios
1

# Node环境变量process

process官方文档 (opens new window)

官方解释：process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。

作为一个对象，它对于 Node.js 应用程序始终是可用的，故无需使用 require()。

process（进程）其实就是存在nodejs中的一个全局变量。

# env属性

env属性文档 (opens new window)

官方解释: process.env属性返回一个包含用户环境信息的对象。

该属性能返回项目运行所在环境的一些信息。在 development和production不同环境上，配置会有些不同。

# 配置环境

  • .env.development
  • .env.production
  • .env.staging

# Vuex

Vuex，状态管理工具。

其作用是用于管理全局变量、全局状态，供任何页面在任何时候调用和修改。

Vuex与传统的全局变量相比，优点有：

  1. Vuex的变量状态是响应式改变（类似于双向绑定）；
  2. Vuex的变量无法直接进行改变，而是通过Vuex提供的接口来进行修改（mutations中的接口），外部使用store.commit("", )来调用；

# Store

Store - 仓库，用于盛放全局状态的容器。

# vuex结构

  1. getters：用于获取state的变量，外部使用this.$store.getters.变量名获取。
  2. module——state：存储变量。
  3. module——mutations：用于同步修改变量，存储的是一系列接口（方法）。
  4. module——actions：和mutations类似，支持异步修改变量。actions中的方法内其实调用的事mutations中的方法。外部使用store.dispatch("方法名").then(()=>{})调用。

# 样式隔离scoped

# scope样式隔离

在 Vue 中，样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时，Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性，以确保这些样式只对当前组件生效，从而达到样式隔离的效果。

以下是 scoped 样式隔离的基本原理：

  1. 「唯一属性添加：」 在编译过程中，Vue 会将样式块中的每个选择器都转换为一个带有唯一属性的选择器。例如，如果有一个类似 .my-class 的选择器，可能会被转换成类似 .my-class[data-v-xxxxxxx] 的形式，其中 data-v-xxxxxxx 是一个唯一的属性。
  2. 「属性注入到组件元素：」 在组件渲染时，Vue 会自动将这个唯一的属性注入到组件的根元素上。这样，样式块中的选择器就会匹配到具有相同唯一属性的元素，从而确保样式只会应用到当前组件。

下面是一个简单的示例：

<template>
  <div class="my-component">
    <p class="my-class">This is a paragraph.</p>
  </div>
</template>

<style scoped>
.my-class {
  color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11

在这个例子中，<style scoped> 中的样式会被转换，使得 .my-class 成为 .my-class[data-v-xxxxxxx]。然后，这个唯一属性 data-v-xxxxxxx 会被注入到组件根元素上，使得样式只会应用到当前组件内的元素，而不会影响到其他组件。

这种样式隔离的机制保证了组件之间的样式不会相互干扰，是 Vue 组件化开发中的一个重要特性。

# 如何打破scope的限制

在 Vue 中，scoped 样式的设计初衷是为了实现组件样式的隔离，以防止样式污染和冲突。然而，有时候可能需要打破 scoped 样式的限制。以下是一些常见的方法：

  1. 使用 ::v-deep 或 /deep/：

在 scoped 样式中，可以使用 ::v-deep 或 /deep/ 伪类选择器来打破样式的封装，以便选择子组件中的元素。需要注意的是，这两个选择器在 Vue 2.x 中是等效的，但在 Vue 3.x 中 ::v-deep 被废弃，取而代之的是 /deep/。

<style scoped>
::v-deep .my-class {
  color: blue;
}

/* 或者在 Vue 3.x 中可以使用 /deep/ */
/deep/ .my-class {
  color: blue;
}
</style>
1
2
3
4
5
6
7
8
9
10

这样可以让样式穿透到子组件中。

  1. 使用全局样式：

如果确实需要在多个组件之间共享样式，可以考虑将样式定义为全局样式而不使用 scoped 特性。

<style>
.my-class {
  color: red;
}
</style>
1
2
3
4
5
  1. 使用深度选择器：

在 Vue 3.x 中，可以使用 ::v-slotted 深度选择器来选择插槽中的元素。这在处理插槽样式时非常有用。

<style scoped>
::v-slotted(.my-class) {
  color: green;
}
</style>
1
2
3
4
5

在使用这些方法时，需要谨慎考虑样式的全局性和可维护性，以确保样式的修改不会产生意外的副作用。打破 scoped 样式的限制可能会导致不易维护的代码，因此建议仅在确实需要的情况下使用。

# deep

在 Vue 2.x 中，使用 ::v-deep 或 /deep/ 可以穿透 scoped 样式的限制的原因与其实现方式有关。这两个选择器的作用是告诉样式引擎在处理选择器时要忽略 scoped 样式中的作用域，从而可以选择到子组件中的元素。

实际上，::v-deep 和 /deep/ 是 Vue 对样式处理引擎进行了处理，使其能够正确解析这些选择器，然后将样式应用到相应的 DOM 元素上。

在 Vue 3.x 中，::v-deep 被废弃，取而代之的是 /deep/ 或 ::v-slotted。这种变化是为了更好地与 Web 标准兼容，因为 ::v-deep 不是 CSS 规范的一部分。

但是，穿透 scoped 样式的做法实际上打破了组件的封装性，可能导致样式的不可预测性和不易维护性。在使用这种方式时需要权衡利弊，并确保清晰地了解可能产生的影响。最好的做法是遵循组件的封装性原则，将样式限制在组件内部，以避免全局样式的冲突和混乱。

# 五、Vue UI库

  • 前端三要素：HTML 、JS 、CSS
  • 前端核心四要素：布局、控件、事件、网络

# ElementUI

ElementUI官网 (opens new window)

饿了么开发的一套针对vue的UI框架。

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

# 安装

推荐使用 npm 的方式安装，它能更好地和 webpack (opens new window) 打包工具配合使用。

npm i element-ui -S
1

# iView

iView官网 (opens new window)

一套基于 Vue.js 的高质量UI 组件库。主要服务于 PC 界面的中后台产品。

# 特性

  • 丰富的组件和功能，满足绝大部分网站场景
  • 提供开箱即用的 Admin 系统 (opens new window) 和 高阶组件库 (opens new window)，极大程度节省开发成本
  • 提供专业、优质的一对一技术支持
  • 友好的 API ，自由灵活地使用空间
  • 细致、漂亮的 UI
  • 事无巨细的文档
  • 可自定义主题

# 安装

使用 npm

npm install view-design --save
1

# 六、相关资料

Vue中文官网网址： https://cn.vuejs.org/ (opens new window)

VUE2实战