Vue基础-综合案例（基于vue2）

最新推荐文章于 2024-07-25 01:02:05 发布
原创 最新推荐文章于 2024-07-25 01:02:05 发布 · 794 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #ecmascript

本文介绍了如何使用vue-cli创建Vue项目，包括基于vueui的可视化创建和命令行创建。接着讲解了如何在项目中安装和配置element-ui，以及element-ui常用组件的使用。此外，还详细阐述了axios的拦截器配置，用于处理Token认证和Loading效果。最后，讨论了如何通过proxy配置解决跨域问题，以便在开发阶段进行接口调用。

一、目标

  • 能够知道如何使用vue-cli创建vue项目
  • 能够知道如何在项目中安装与配置element-ui
  • 能够知道element-ui中常见组件的用法
  • 能够知道如何使用axios中的拦截器
  • 能够知道如何配置proxy接口代理

二、目录

  • vue-cli
  • 组件库
  • axios拦截器
  • proxy跨域代理
  • 用户列表案例

vue-cli

1.什么是vue-cli

vue-cli（vue脚手架）是vue官方提供的、快速生成vue工程化项目的工具。

特点：

①开箱即用

②基于webpack

③功能丰富且易于扩展

④支持创建vue2和vue3的项目

vue-cli的中文官网首页：https://cli.vuejs.org/zh/

安装：

2.安装vue-cli

vue-cli是基于Node.js开发出来的工具，因此需要使用npm将它安装为全局可用的工具： 

2.1解决Windows PowerShell不识别vue命令的问题

默认情况下，在PowerShell中执行vue --version命令会提示如下的错误消息：

如何解决查看版本号的时候报错：

 

 解决方案如下：

①以管理员身份运行PowerShell

②执行set-ExecutionPolicy RemoteSigned命令

③输入字符Y，回车即可

3.创建项目

vue-cli提供了创建项目的两种方式：

4.基于vue ui创建vue项目

步骤1：在终端下运行vue ui命令，自动在浏览器中打开创建项目的可视化面板： 

步骤2：在详情页面填写项目名称：

 步骤4：在功能页面勾选需要安装的功能（Choose Vue Version、Babel、CSS预处理器、使用配置文件）

 步骤5：在配置页面勾选vue的版本和需要的预处理器：

 步骤6：将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置：

 步骤7：创建项目并自动安装依赖包：

vue ui的本质：通过可视化的面板采集到用户的配置信息后，在后台基于命令行的方式自动初始化项目：

项目创建完成后，自动进入项目仪表盘： 

5.基于命令行创建vue项目 

步骤1：在终端下运行vue create demo2命令，基于交互式的命令行创建vue的项目：

 步骤2：选择要安装的功能：

 步骤3：使用上下箭头选择vue的版本，并使用回车键确认选择：

 步骤4：使用上下箭头选择要是用的css预处理器，并使用回车键确认选择：

 6.梳理vue2项目的基本结构

主要的文件：

src->App.vue

src->main.js 

8.在vue2的项目中使用路由

在vue2的项目中，只能安装并使用3.x版本的vue-router

版本3和版本4的路由最主要的区别：创建路由模块的方式不同！

8.1回顾：4.x版本的路由如何创建路由模块

 8.2学习：3.x版本的路由如何创建路由模块

步骤1：在vue2的项目中安装3.x版本的路由：

 

 

 组件库

1.什么是vue组件库

在实际开发中，前端开发者可以把自己封装的.vue组件整理、打包、并发布为npm的包，从而供其他人下载和使用。这种可以直接下载并在项目中使用的现成组件，就叫做vue组件库。

2.vue组件库和bootstrap的区别

二者之间存在本质的区别：

  • bootstrap只提供了纯粹的原材料（css样式、HTML结构以及JS特效），需要由开发者做进一步的组装和改造
  • vue组件库是遵循vue语法、高度定制的现成组件，开箱即用。

3.最常用的vue组件库

①PC端

  • Element UI(https://element.eleme.cn/#/zh-CN)
  • View UI(http://v1.iviewui.com/)
  • element plus

②移动端

  • Mint UI(http://mint-ui.github.io/#!/zh-cn)
  • Vant(https://vant-contrib.gitee.io/vant/#/zh-CN/)

4.Element UI

Element UI是饿了么前端团队开源的一套PC端vue组件库。支持在vue2和vue3的项目中使用：

  • vue2的项目使用旧版的Element UI(https://element.eleme.cn/#/zh-CN)
  • vue3的项目使用新版的Element Plus（https://element-plus.gitee.io/#/zh-CN）

 4.1在vue2的项目中安装element-ui

 4.2 引入element-ui

 开发者可以一次性完整引入所有的element-ui组件，或是根据需求，只按需引入用到的element-ui组件：

  • 完整引入：操作简单，但是会额外引入一些用不到的组件，导致项目体积过大
  • 按需引入：操作相对复杂一些，但是只会引入用到的组件，能起到优化项目体积的目的。

4.3 完整引入

 

 4.4按需引入

借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

步骤1：安装babel-plugin-component:

步骤2：修改根目录下的babel.config.js配置文件，新增plugins节点如下：

 步骤3：如果你只希望引入部分组件，比如Button,那么需要在main.js中写入以下内容：

 4.5把组件的导入和注册封装为独立的模块

 axios拦截器

1.回顾：在vue3的项目中全局配置axios

2.在vue2的项目中全局配置axios

3.什么是拦截器

拦截器会在每次发起ajax请求和得到响应的时候自动被触发。

 应用场景：

①Token身份认证

②Loading效果

等等

4.配置请求拦截器

通过axios.interceptors.request.use(成功的回调，失败的回调)可以配置请求拦截器。示例代码如下：

 注意：失败的回调可以被省略。

4.1请求拦截器-Token认证

 4.2请求拦截器-展示Loading效果

借助于element ui提供的Loading效果组件（https://element.eleme.cn/#/zh-CN/component/loading）可以方便的实现Loading效果的展示：

 5.配置响应拦截器

通过axios.interceptors.response.use(成功的回调，失败的回调）可以配置响应拦截器。示例代码如下：

注意：失败的回调函数可以被省略！

 5.1响应拦截器-关闭Loading效果

调用Loading实例提供的close()方法即可关闭Loading效果，示例代码如下：

 

 proxy跨域代理

1.回顾：接口的跨域问题

vue项目运行的地址：http://localhost:8080/

API接口运行的地址:http://www.escook.cn/api/users

 2.通过代理解决接口的跨域问题

通过vue-cli创建的项目在遇到接口跨域问题时，可以通过代理的方式来解决：

①把axios的请求根路径设置为vue项目的运行地址（接口请求不再跨域）

②vue项目发现请求的接口不存在，把请求转交给proxy代理

③代理把请求根路径替换为devServer.proxy属性的值，发起真正的数据请求

④代理把请求到的数据，转发给axios 

 

 注意：

①devServer.proxy提供的代理功能，仅在开发调试阶段生效

②项目上线发布时，依旧需要API接口服务器开启CORS跨域资源共享

Vue学习（二十六）——综合案例：图书管理（一）
云中、漫步的博客
10-05 1665
目录一、图书列表的展示功能1、实现静态列表效果2、基于数据实现模板效果3、处理每行的操作按钮二。添加图书1、实现表单的静态效果2、添加图书表单域数据绑定3、添加按钮事件绑定4、实现添加业务逻辑三、修改图书1、修改信息填充到表单① JS中的Array.filter()方法2、修改后重新提交表单3、重用添加和修改的方法②JS中的Array.some()方法③Js中的箭头函数 接下来我们结合之前我们所学到的知识，完成一个图书管理的案例，大致如下，完成对图书的増、删、改操作： 一、图书列表的展示功能 1、实现静态
vue学习日记10:综合案例-购物车
yinfanfff的博客
03-19 612
（2）展示 减到1就不能再减，点击删除直接删除 这里写三元表达式也可以 三元表达式是一种在许多编程语言中常见的条件表达式，它由三个操作数组成：一个条件表达式、一个真值表达式和一个假值表达式。其一般形式为： 如果写成if...else 三元写法 被勾选的被计算 5.持久化本地如果用户对其操作之后 没有持久化刷新后就会成问题（1）代码 如果没有 || （defaultArr）清除缓存后就会null崩溃 ，加上之后就会默认回到初试页面了（2）展示
Vue2项目实战
C_jiayouya的博客
12-26 1667
本文仅仅简单介绍了项目的大概框架，一些简单的页面展示及简单的组件封装，在想成为高级开发的路上还是需要不断努力地！愿每个人都能在自己热衷的道路上越走越远。
Vue2 案例
weixin_51008360的博客
07-16 1423
文本</div>
vue2基础案例---用户列表案例
努力成为自己想要的样子
03-30 823
本项目用到了vue路由、axios、element-ui的基础组件、proxy代理等知识点
VUE3 -综合实践（Mock+Axios+ElementPlus）
05-14
ElementPlus是一个基于Vue3的UI组件库，它提供了一套丰富的组件，使得开发者能够快速地构建美观且响应式的用户界面。项目中的ElementPlus组件被用来创建表格，并将虚拟或真实数据展示在表格中。这样做的目的是为了...
vue3.0 从入门到入土--------综合案例
drhrht的博客
03-09 770
目录 vue-cli ?组件库 axios 拦截器? ?proxy 跨域代理 ?用户列表案例 总结 vue-cli 1. 什么是 vue-cli vue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。 vue-cli 的中文官网首页：https://cli.vuejs.org/zh/ ① 开箱即用 ② 基于 webpack ③ 功能丰富且易于扩展 ④ 支持创建 vue2 和 vue3 的项目 2. 安装 vue-cli vue-cli 是基于 Node.js
[Vue.js] 路由 -- 基于vue-router的案例--后台管理
DeathDomain的博客
11-04 883
基于vue-router的案例 感觉好多,啊啊啊!!! 实现效果   实现步骤 抽离并渲染App根组件 将左侧菜单改造为路由链接 创建左侧菜单对应的路由组件 在右侧主体区域添加路由占位符 添加子路由规则 通过路由重定向默认渲染用户组件 渲染用户列表数据 编程式导航跳转到用户详情页 实现后退功能   抽离并渲染App根组件 首先要引入vue.js和vue-router.js <script src="https://cdn.jsdelivr.net/npm/vue/di
前端开发：基于Vue框架构建简易博客系统-Vue CLI、Vue Router、Vuex综合运用案例
02-12
内容概要：本文介绍了利用Vue框架快速搭建一个简易博客系统的全流程步骤。从环境准备、项目初始化说起，涵盖安装与配置Vue CLI工具集，通过npm命令建立新项目目录；继而介绍Vue Router用于构建单页应用(SPA)的多视图...
精选资源
vue-music：基于vue2.0的网易云音乐播放器，api来自于NeteaseCloudMusicApi，v2.0为最新版本
02-06
总的来说，Vue-Music项目展示了Vue.js 2.0与其他相关库的综合运用，包括状态管理、路由、HTTP请求和音频播放，为学习和实践现代前端开发提供了一个有价值的案例。通过深入研究这个项目，开发者可以提升对Vue生态系统...
vue2.0项目案例
08-24
基于vue2 + vue-router2 + vuex + axios 的一个webapp项目！
vue2-Demo:这是用vue2写的小例子，写到了路由和组件
05-02
vue2-Demo 如有帮助谢谢star :star::star::star::star::star: vue 步骤 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build For detailed explanation on how things work, consult the .
Vue2 示例（四）
龙哥盟
07-25 629
原文：zh.annas-archive.org/md5/e39af983af3c7de00776f3c773ad8d42 译者：飞龙 协议：CC BY-NC-SA 4.0 第九章：使用 Vue-Router 动态路由加载数据 在第八章中，我们介绍了 Vue-router 及其功能和功能。有了这些知识，我们现在可以继续使用 Vue 来创建我们的商店。在我们开始编写代码和创建之前，我们应该首先计划我们的商店将如何工作，我们需要哪些 URL 和组件。一旦我们计划好我们的应用程序，我们就可以继续创建产品页面。
vue2---前端路由小案例（后台管理小案例）
厚积薄发.
08-05 2399
前端路由小案例（后台管理小案例）1 项目整体功能演示3 主要代码进入网站自动进入登录页面： 登录成功自动存储token，然后跳转到登录成功页面： 左边功能栏可以切换： 点击用户管理的操作可以跳转到用户详情页面，并却可以回退到上一步： 完了之后可以退出登录，并清除token，然后跳转到登录页面。2 案例用到的知识点命名路由路由重定向导航守卫嵌套路由动态路由匹配编程式导航......
Vue在综合案例中使用
qq_45181415的博客
02-27 353
1、Vue 高级使用 1.1、自定义组件 学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如<el-button>就是对<button>的封装 本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义 定义格式 Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 }) 代码实现 <!DOCTYPE html> <htm
Vue_综合案例
qq_44509920的博客
09-24 1321
文章目录1.1 案例需求1.2 数据库设计与表结构1.3 服务器端1.3.1 创建SpringBoot项目1.3.2 导入jar包1.3.3 配置文件（application.properties）1.3.4 创建springboot引导类1.3.5 创建实体1.3.6 创建Dao1.3.7 创建Service1.3.8 创建Controller1.4 浏览器端1.4.1 user.html1.4.2 查询所有1.4.2.1 UserService1.4.2.2 UserController1.4.2.3
Vue2 示例（一）
龙哥盟
07-25 1239
本书将介绍 Vue.js 2 的使用。Vue 可以作为前端框架通过包含一个 JS 文件来使用，也可以作为后端框架与 Node.js 一起使用。本书是使用前端版本的框架编写的，尽管会指出，如果需要的话，它可以很容易地转换为使用 Node 版本，因为这两个版本的框架的基本原理是相同的。Vue 是一个可以用于简单数据显示和创建完整 Web 应用程序的框架。本书将尝试涵盖这两个方面，并介绍插件和附加组件，以帮助创建更大的应用程序。
vue2 案例入门
记录工作历程
05-28 1067
vue init webpack appname:vue 脚手架使用webpack模块化初始化一个appname项目。参考官网：https://v2.cn.vuejs.org/v2/guide/installation.html。文件->首选项->配置用户代码片段->vue.code-snippets。建立项目目录C:\xx\work\code\vue\vue-demo。成功后再次执行vue init webpack vue-demo。访问http://localhost:8080 搭建成功。
Vue&综合案例
xglfire的博客
07-01 2904
Vue&综合案例 Vue 高级使用 自定义组件 学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如<el-button>就是对<button>的封装。 本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义。 定义格式 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
vue基础综合案例
最新发布
10-31
<think>首先，用户查询是：“我想查找Vue基础综合案例”，意思是“我想查找Vue基础综合案例”。系统指令要求我基于提供的引用内容来回答。 提供的引用包括： - 引用[1]: 提到了Vue基础综合案例，并讨论了Vue组件库与Bootstrap的区别。 - 引用[2]: 展示了Vue基础综合案例中的HTML片段，使用v-show和v-for。 - 引用[3]: 关于Vue基础-Options API的书籍购物车案例，展示了计算属性的使用。 - 引用[4]: Vue基础小案例分享，讨论了v-for的复用策略。 - 引用[5]: Vue实战综合案例，使用了Bootstrap进行页面布局。 用户的要求是“查找Vue基础综合案例”，所以我需要综合这些引用内容来提供一个关于Vue基础综合案例的概述或例子。 系统指令的关键点： - 使用中文回答。 - 结构清晰，帮助用户逐步解决问题。 - 生成相关问题（在末尾）。 - 在回答中引用的段落末尾添加引用标识，例如[^1]。 - 对于数学公式，使用指定格式，但这里是Vue.js主题，可能没有数学公式，所以不需要。 - 代码块需要使用反引号格式。 我的回答应该： 1. 结构化：先介绍Vue基础综合案例是什么，然后可能给出例子。 2. 基于引用：引用提供的片段。 3. 添加引用标识：在提到引用内容时添加。 4. 生成相关问题：在末尾。 从引用中提取关键信息： - 引用[1]：Vue组件库的概念，以及它与Bootstrap的区别[^1]。 - 引用[2]：一个案例片段，使用v-show和v-for来显示标签内容[^2]。 - 引用[3]：书籍购物车案例，展示计算属性的使用，如字符串拼接、分数判断、单词反转[^3]。 - 引用[4]：讨论v-for的复用策略[^4]。 - 引用[5]：实战综合案例，使用Bootstrap布局[^5]。 用户查询的是“Vue基础综合案例”，所以我可以整合这些案例。 结构回答： 1. **介绍**：解释什么是Vue基础综合案例，基于引用。 例如：Vue基础综合案例是用于练习Vue.js核心概念的实际项目，如组件、指令、数据绑定等。 2. **例子**：提供一到两个综合案例的例子，从引用中提取。 - 从引用[3]，书籍购物车案例，展示计算属性。 - 从引用[2]，标签切换案例。 - 从引用[5]，使用Bootstrap布局的案例。 3. **代码块**：如果需要，展示代码片段，使用反引号格式。 4. **引用**：在描述每个例子时，添加引用标识。 5. **结尾**：生成相关问题。 最终回答结构： - 开头：简要回应查询。 - 主体：描述几个综合案例的例子。 - 结尾：生成相关问题。 生成相关问题： - 基于主题，如：如何优化Vue案例？常见的Vue基础案例有哪些？等。 确保回答真实可靠：基于提供的引用内容。 </think>### Vue基础综合案例介绍 Vue基础综合案例是用于练习Vue.js核心概念（如数据绑定、指令、计算属性、生命周期等）的实际项目实例。这些案例通常结合多个功能点，帮助开发者巩固基础知识并应用到真实场景中。根据您提供的引用内容，我将综合几个典型案例进行说明，每个案例都源自引用片段，我会在描述末尾添加引用标识。 #### 1. **标签切换案例（基于v-show和v-for）** - 这个案例演示如何使用Vue的指令实现动态内容切换。例如，一个标签页组件：用户点击不同标签时，显示对应的内容区域。 - **关键代码片段**： ```html <!-- 引用中的示例代码 --> <template> <div> <!-- 标签栏 --> <button v-for="(tab, i) in tabData.tabs" :key="i" @click="curActive = i">{{ tab }}</button> <!-- 内容区：基于当前激活索引显示 --> <div class="content" v-show="i === curActive" v-for="(v, i) in tabData.contents" :key="i">{{ v }}</div> </div> </template> ``` - 解释：`v-for` 循环渲染标签按钮，`v-show` 根据 `curActive` 控制哪个内容div显示。这体现了Vue的响应式数据绑定和指令复用[^2]。 #### 2. **书籍购物车案例（使用计算属性）** - 这个案例展示计算属性（computed）的应用，用于数据处理和缓存。例如，实现一个书籍清单系统，包括名称拼接、分数判断和文本反转。 - **关键代码片段**： ```html <div id="app"> <!-- 案例1: 名字拼接 --> <h2>{{ fullName }}</h2> <!-- 案例2: 分数等级显示 --> <h2>{{ scoreLevel }}</h2> <!-- 案例3: 单词反转 --> <h2>{{ reverseMessage }}</h2> </div> <script> const app = Vue.createApp({ data() { return { firstName: "chen", lastName: "yq", score: 50, message: "my name is chenyq" }; }, computed: { fullName() { return this.firstName + " " + this.lastName; // 拼接名字 }, scoreLevel() { return this.score >= 60 ? "及格" : "不及格"; // 判断分数 }, reverseMessage() { return this.message.split(" ").reverse().join(" "); // 反转文本 } } }); app.mount("#app"); </script> ``` - 解释：计算属性 `fullName`、`scoreLevel` 和 `reverseMessage` 自动更新视图，避免重复计算（缓存机制）。这强调Vue的Options API优势[^3]。 #### 3. **表单布局案例（集成Bootstrap）** - 这个案例结合Vue和Bootstrap，实现响应式页面布局。常用于表单或列表项目，展示Vue与其他库的集成能力。 - **关键代码片段**： ```html <!-- 引用中的基础页面结构 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Bootstrap案例</title> <script src="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"> </head> <body> <div id="app"> <!-- Bootstrap表单布局 --> <form class="form-inline"> <div class="form-group"> <input type="text" class="form-control" v-model="inputValue" placeholder="输入内容"> </div> <button class="btn btn-primary" @click="handleSubmit">提交</button> </form> </div> <script> var vm = new Vue({ el: "#app", data: { inputValue: "" }, methods: { handleSubmit() { console.log("提交值:", this.inputValue); } } }); </script> </body> </html> ``` - 解释：这里使用Bootstrap快速搭建UI，Vue处理数据绑定和事件（如 `v-model` 和 `@click`）。引用提到vue组件库与Bootstrap的区别在于前者是可复用的Vue组件，后者是CSS框架[^1][^5]。 #### 通用注意事项 - **v-for策略**：在循环渲染时，Vue默认使用“就地复用”策略（即不移动DOM元素，仅更新内容），这能优化性能但在动态排序时需谨慎处理[^4]。 - **组件库开发**：高级开发者可将这类案例打包为npm组件库，便于团队复用[^1]。 这些案例覆盖了Vue基础的综合应用，适合初学者练手。如果您有具体需求（如某个案例的完整代码），请提供更多细节，我可以进一步优化解释！
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

再学习一点

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值