循序渐进vue.js #

第一章 前端基础 #

第二章 Vue模板应用 #

模板语法 #

插值只能用在元素的内容节点，无法用在属性节点 v-text 缺点：覆盖元素中的默认内容 v-html 用处：把带有 HTML 标签的字符串，渲染为真正的 DOM 元素 Class 与 Style 绑定v-bind<div v-bind:id="dynamicId"></div>

计算属性 computed:{} #

方法 methods: {}

条件渲染 #

v-if v-show

列表渲染 #

v-for

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

v-for 与 v-if #

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。

展示过滤或排序后的结果 #

举例来说：

data() {
  return {
    numbers: [1, 2, 3, 4, 5]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(n => n % 2 === 0)
  }
}
template
<li v-for="n in evenNumbers">{{ n }}</li>

事件处理 #

监听事件 #

v-on 指令 (简写为 @) 来监听 DOM 事件 用法：v-on:click="handler" 或 @click="handler"。

第3章 Vue组件的属性和方法 #

属性基础 在Vue组件中定义的属性数据，我们可以直接使用组件来调用 方法基础 组件的方法被定义在methods选项中

计算属性 #

计算属性定义在Vue组件的computed选项中

属性侦听器 #

使用属性侦听器可以方便地 监听某个属性的变化，以完成复杂的业务逻辑 定义Vue组件时，可以通过watch选项来定义属性侦听器

表单数据的双向绑定 #

<input type="checkbox" value="足球" v-model="checkList"/>足球
<input type="checkbox" value="篮球" v-model="checkList"/>篮球
<input type="checkbox" value="排球" v-model="checkList"/>排球
<p>{{checkList}}</p>

样式绑定 #

第4章 处理用户交互 #

事件的监听与处理 #

使用@click直接绑定单击事件方法

第5章 组件基础 #

插槽 动态组件

第6章 组件进阶 #

生命周期 组件的注册方式 Props

第7章 Vue响应式编程 #

独立的响应式值Ref的应用

组合式API的应用 #

关于setup方法

第8章 动画 #

第9章 构建工具Vue CLI的使用 #

第10章 基于Vue 3的UI组件库——Element Plus #

第11章 基于Vue的网络框架——vue-axios的应用 #

安装 npm install --save axios vue-axios

// 导入vue-axios模块
import VueAxios from 'vue-axios'
import axios from 'axios';
// 导入我们自定义的根组件
import App from './App.vue'
// 挂载根组件
const app = createApp(App)
// 注册axios
app.use(VueAxios, axios)
app.mount('#app')

import axios from 'axios';

export default {
  ...
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          // 请求成功后的操作
          console.log(response.data);
        })
        .catch(error => {
          // 请求失败后的操作
          console.error(error);
        });
    }
  },
  ...
};

第12章 Vue路由管理 #

安装 npm install vue-router@4 -s使用 创建路由器对象：在根组件（通常是main.js文件）中，导入Vue和Vue Router，并创建一个新的路由器对象。

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

const app = createApp(App);
app.use(router);
app.mount('#app');

4. 创建路由出口：在根组件的模板中，添加一个<router-view>标签作为路由出口，用于渲染匹配到的组件。

<template>
  <div id="app">
    <!-- 其他组件 -->
    <router-view></router-view>
  </div>
</template>

5. 创建导航链接：在组件中，使用<router-link>标签创建导航链接，指向不同的路由路径。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

定义全局的导航守卫 #

动态路由 #

动态添加与删除路由 在Vue Router中，动态操作路由的方法主要有两个：addRoute和 removeRoute，addRoute用来动态添加一条路由，对应的removeRoute用 来动态删除一条路由。

第13章 Vuex状态管理 #

在Vue应用中，组件状态的管理由如下几部分组成： 1．状态数据 状态数据是指data函数中返回的数据，这些数据自带响应性，由其 来对视图的展现进行驱动。 2．视图 视图是指template里面定义的视图模板，其通过声明的方式将状态 映射到视图上。 3．动作 动作是指会引起状态变化的行为，即上面代码methods选项中定义 的方法，这些方法用来改变状态数据，状态数据的改动最终驱动视图的 刷新。

安装Vuex #

npm install vuex@next --save Vuex框架的核心是store，即仓库

Vuex中的5个核心概念：

state #

状态-也就是应用中组件需要共享的数据

getter #

计算属性实际上就是Getter方法

mutation #

修改store中的某个状态数据的唯一方法是提交Mutation

action #

处理异步 Action是我们将要接触到的一个新的Vuex中的核心概念。我们知 道，要修改store仓库中的状态数据，需要通过提交Mutable来实现。但 是Mutation有一个很严重的问题：其定义的方法必须是同步的，即只能 同步地对数据进行修改。在实际开发中，并非所有修改数据的场景都是 同步的，例如从网络请求获取数据，之后刷新页面。当然，也可以将异 步的操作放到组件内部处理，异步操作结束后再提交修改到store仓库， 但这样可能会使本来可以复用的代码要在多个组件中分别编写一遍。 Vuex中提供了Action来处理这种场景。

Action与Mutation类似，不同的是，Action并不会直接修改状态数 据，而是对Mutation进行包装，通过提交Mutation来实现状态的改变。 这样在Action定义的方法中，允许我们包含任意的一步操作。

module #

Module是Vuex进行模块化编程的一种方式

第15章 电商后台管理系统实战 #

Vue3 Vuerouter vuex

用户登录模块开发 #

项目搭建 vue create shop-admin

默认生成的Vue项目中有一个HelloWorld.vue文件，可以直接将此文 件删掉。 在components文件夹下新建两个子文件夹，分别命名为home和 login，在home文件夹下新建一个名为Home.vue的文件，在login文件夹 下新建一个名为Login.vue的文件。 Home组件用来渲染管理系统的主页，Login组件用来渲染用户登录页面，为了显示方便，我们先简单实 现这两个组件，代码如下： Home：

<template>
主页
</temmplate>
<script>
export default {
name:"Login"
</script>

Login:

<template>
登录页面
</tempIate>
<script>
export default {
name:"Login"
}
</script>

下面对项目的入口做一些管理，由于此后台系统的任何功能页面都 需要登录后操作，因此需要使用路由来进行全局的页面管理，在每次页 面跳转前都检查当前的用户登录状态，如果是未登录状态，则将页面重 定向到登录页面。

在工程的src文件夹下新建一个名为tools的文件夹，在 tools文件夹下新建一个名为Storage.js的文件，此文件用来进行全局状态 配置，编写代码如下：

完整的项目代码 #

https://gitee.com/jaki/shop-admin 地址演示 http://jaki.gitee.io/shop-admin/#/login

项目搭建 #

如以上代码所示，模拟登录后，我们会将用户输入的用户名和密码 进行存储，只要有用户名存在，就认为当前用户已经登录。当然，这只 是方便我们学习的一种模拟登录方式，在实际的业务开发中，当用户输 入了用户名和密码后会请求后端服务接口，接口会返回用户的身份认证 标识token，真实的应用程序中会通过token来判定用户的登录状态。

在tools文件夹下新建一个名为Router.js的文件，用来进行路由配 置。编写代码如下
在上面的代码中，我们暂时只配置了两个路由，分别对应管理后台 的主页和用户登录页，并且使用全局的前置守卫进行页面跳转前的登录 状态校验。
修改App.vue文件如下，为其添加路由的渲染出口
最后，在main.js文件中完成基本的初始化工作，代码如下：
至此，我们已经创建了后台管理系统项目的入口框架。运行代码， 无论输入怎样的页面路径，页面都会被重定向到登录页面，如图15-1所 示。后面再来完善登录页面的展示和功能。

用户登录页面的开发 #

涉及Vue项目的页面开发，离不开Element Plus组件库，先为当前 Vue项目引入Element Plus模块：
npm install element-plus --save 在main.js文件中添加Element Plus模块的相关初始化代码：

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

注意，别忘了引入Element Plus对应的CSS样式文件。做完这些后， 可以正式开始用户登录页面的开发。
首先修改Storage.js文件，为其添加两个修改用户状态的方法，代码 如下 后面会通过store对象提交clearUserInfo和registUserInfo这两个操作 来模拟用户的注销和登录动作。
在Login.vue组件中完善用户登录页面，完整代码如下 : 此用户登录页面本身并不复杂，当登录成功后，我们让路由跳转到 后台管理系统的主页。需要注意，上面的代码中使用到的背景图片素材 放在Vue工程的assets文件夹下，你可以将其替换成任意喜欢的背景。运 行工程，效果如图15-2所示。
可以尝试输入任意的用户名和密码，单击“登录”按钮后会执行登录 操作，页面会跳转到后台管理系统的首页。当然，目前管理后台的主页 还没有任何内容，下一节再来进行主页的开发。

项目主页搭建 #

前面完成了电商管理后台的登录页面，本节我们来搭建管理系统的 主页框架。

主页框架搭建 #

总体来说，电商后台管理系统还是略显复杂的，其包含商品管理、 订单管理、店铺管理等多个管理模块，我们可以通过嵌套路由的方式来 管理主页中的管理模块。首先在Router.js文件中修改路由的定义，新增 订单管理模块的路由如下：
对于订单模块，参数type用来区分类型，本电商后台管理系统支持 普通订单和秒杀订单两种商品订单。当用户登录完成后，访问系统主页 时，我们默认将其重定向到订单模块。
电商系统的主页中需要包含一个侧边栏菜单和一个主体功能模块。 侧边栏用来进行主体功能模块的切换，修改Home.vue中的模板代码如 下 : 如以上代码所示，在侧边栏导航中，我们将所有包含的功能模块都 添加了进来，不同的功能模块以对应不同的组件，后面只需要逐个模块 地进行开发即可。需要注意，为了保证导航栏的选中栏目与当前页面路 由相匹配，我们将导航item的index设置为路由的path，并将el-menu组件 的default-active属性绑定到当前路由的path属性上，这样就自动实现了 联动效果，非常方便。

在components文件夹下新建一个名为order的子文件夹，并在其内新 建一个名为Order.vue的文件，用来简单演示本节所编写代码的效果。在 Order.vue文件中编写如下代码
将此组件在Router.js文件中进行引用。运行工程代码，效果如图15- 3所示。 现在，我们已经完成了管理系统的框架搭建，后面在进行具体功能 模块开发时，只需要专注于各个模块组件内部的逻辑即可。

完善注销功能 #

上一节我们已经将后台管理系统的主页部分基本搭建完成了，但是 还有一个细节尚未完善：缺少用户注销的功能。本节将此功能补充完 善。关于模拟登录与注销操作的方法，之前在Storage.js文件中已经有了 封装，我们只需要在主页添加一个公用的头视图，在其中布局一个注销 按钮即可。
修改Home.vue文件中的el-main组件如下：
logout方法的实现如下：
运行工程，可以看到主体功能模块的上方已经添加了一个公用的头 视图，单击其中的注销按钮会清空登录数据，返回登录页面，如图15-4 所示

订单管理模块的开发 #

本节将开发电商后台管理系统中的第一个功能模块：订单管理模 块。由于此实战项目不包含后端和数据库相关功能，为了完整地完成前 端功能，我们将采用模拟数据来进行逻辑演示。

使用Mock.js进行模拟数据的生成 #

Mock.js是一款小巧的JavaScript模拟数据生成器，在Vue项目中，我 们可以使用其生成随机数据，方便实现前端开发过程中的调试页面功 能。首先安装Mock.js模块：
npm install mockjs --save 安装完成后，在项目的src文件夹下新建一个名为mock的子文件 夹，在其中新建一个名为Mock.js的文件，编写代码如下：
如以上代码所示，提供了一个获取订单列表的getOrder方法，此方 法将返回生成的模拟数据。关于Mock.js模块的使用语法，本书中不再 详细介绍，读者只需要了解通过上面的方法将返回一组模拟的订单数据 即可。
现在，尝试运行此项目，在控制台打印getOrder方法返回的数据， 可以体会到Mock.js模块的强大之处。

编写工具类与全局样式 #

在编写具体的功能模块前，可以先分析一下这些功能模块是否有通 用的部分。某些样式是可以通用的，例如容器样式、输入框样式等，可 以将这些可通用的样式定义为全局样式，这样在之后编写其他功能模块 时就会方便很多。另外，对于一些工具方法，也可以将其整合到一个单 独的JavaScript模块中，方便复用。
首先在App.vue文件中编写如下样式代码，这些CSS样式都是全局生效的：
后面在编写HTML模板时，对于这些通用的样式直接使用即可。
在工程的tools文件夹下新建一个名为Tools.js的文件，编写代码如 下
我们暂时只实现一个导出JSON文件的方法，在订单管理模块的订 单导出相关功能中会使用这个方法。

完善订单管理页面 #

前面已经做完了所需的准备工作，要完成订单管理页面，剩下的无 非是搭建HTML模板结构，将数据绑定到对应的页面元素上，最后为可 交互的页面元素绑定事件，实现事件函数。Order.vue文件中完整的示例 代码如下：
上面的代码中并没有特别复杂的逻辑，且每个方法的功能都有注 释。运行工程，效果如图15-5所示。现在我们已经完成了订单模块前端 开发完整的功能，可以尝试操作体验一下订单管理的各个功能，需要数 据都是模拟的，但交互流程已经非常完整。

商品管理模块的开发 #

有了订单模块开发的经验，相信你再来编写商品管理功能模块会非 常容易。商品管理模块与订单管理模块的开发过程基本类似，先布局页 面，再将获取到的数据绑定到页面上，最后处理用户交互即可。相比订 单管理模块，商品管理模块的新增商品功能略微复杂一些。

商品管理列表页的开发 #

首先，在工程的components文件夹下新建一个good子文件夹，在其 中创建两个Vue组件文件，分别命名为Goods.vue和AddGood.vue。本节 先只做商品列表页的开发，对于AddGood.vue文件可以先不做处理。 在Router.js文件中注册新创建的这两个组件，首先引入组件：
import Goods from '../components/goods/Goods.vue'import AddGood from '../components/goods/AddGood.vue' 在home路由下新增两个子路由：
在开始编写商品管理功能模块的代码前，先在Mock.js文件中新增 一个获取商品数据的方法，代码如下：
下面给出完整的商品列表页面Goods.vue中的代码。
此页面没有过多的交互逻辑，需要注意的是，如果数据本身无法直 接支持页面的渲染，需要转换后才能使用，我们可以通过创建新的计算 属性来实现。运行当前工程，商品列表页面如图15-6所示。可以尝试单 击页面中的交互元素检验对应方法的执行是否正确。

新建商品的基础配置 #

在商品管理列表页有一个新建商品的按钮，单击后会跳转到新建商 品页面，在此页面需要对商品的诸多属性进行设置，可以使用el-tab组 件来将商品设置分成几个模块，如基础设置、价格库存设置和详情设置 等。每一个设置模块都可以封装成一个独立的组件。
首先，在工程的goods文件夹下新建一些文件，分别为 GoodBaseSetting.vue、GoodPriceSetting.vue和GoodDetailSetting.vue。在 AddGood.vue中引入这3个子组件即可。在AddGood.vue中编写如下代 码 下面需要逐一对每个独立的商品设置模块进行开发。首先编写 GoodBaseSetting组件的代码如下：

新建商品的价格和库存配置 #

价格和库存配置模块相对简单，只需要布局一些输入框来接收用户 的输入配置即可。在GoodPriceSetting.vue中编写如下代码：

新建商品的详情设置 #

商品的详情定制性较强，通常在上架添加商品时进行定制化的设 置。商品详情可以采用富文本编辑器来进行编辑。富文本编辑器可以提 供将富文本转换成HTML文本的功能，使用起来十分方便。虽然看上去 一款富文本编辑器支持各种样式的文本、图片、超链接等功能，实现比 较复杂，但是互联网上有很多优秀的富文本插件可以直接使用，无须我 们重复开发。
首先，在Vue工程目录下执行如下指令安装wangEditor富文本编辑 器插件：
npm i wangeditor -S 安装成功后，在goods文件夹下新建一个名为GoodEdit.vue的文件， 在其中编写如下代码
上面的代码有着详细的注释，通过一些简单的配置即可使用此富文 本组件，修改GoodDetailSetting.vue文件的代码如下：

添加商品分类 #

商品分类管理模块相对简单，只需要通过一个列表来展示已有的分 类，并提供对应的删除和新增分类功能。在goods文件夹下新建一个名 为GoodCategory.vue的文件，编写如下示例代码
运行代码，效果如图15-10所示。不要忘记在Router.js中补充对应的 路由配置，并且为新增商品模块中的新增分类添加对应的跳转功能。

店长管理模块的开发 #

店长管理模块用来对店长进行统计、审核等操作，技术上都是通过 列表来展示店长相关信息，通过检索条件来与后端数据接口交互进行数 据获取。开发此模块在技术上并没有太大的难度。
首先在工程的components文件夹下新建一个名为manager的子文件 夹，用来存放店长管理的相关组件。在manager文件夹下新建3个文件， 命名为ManagerList.vue、ManagerOrder.vue和ManagerReqList.vue。

我们先来编写店长列表模块的开发。首先在Mock.js中添加一个新 的方法，用来模拟店长数据：
将新建的3个组件注册到对应的路由中，在Router.js文件中添加如下 路由配置：
编写ManagerList.vue组件的代码如下

店长审批列表与店长订单 #

略

数据统计功能模块开发 #

数据统计模块是此电商后台管理系统的最后一个功能模块，此模块 需要使用一个图表绘制的工具，可以使用echarts模块方便地实现图表绘 制。首先在工程根目录下执行如下指令来安装echarts：
npm install echarts --save 安装完成后，在工程中的financial文件夹下新建一个名为Charts.vue 的文件，编写如下代码
Charts是我们自定义的一个图表组件，再在financial文件夹下新建一 个名为DataCom.vue的文件，进行常规的路由配置后，在其中编写如下 代码
现在，我们还需要一些模拟数据的支持，在Mock.js文件中添加两 个新的数据模拟方法，代码如下：
至此，我们已经使用Vue完成了一个完整的电商后台管理系统。此 项目虽然略微复杂了一些，但是可以帮助你积累一些宝贵的实践经验。 在动手实现的过程中遇到任何问题，都可以参考本书附带资料中的代码 资源。也可以从如下地址找到