Vue系列教程
关注
分享
扫一扫
文章平均质量分 85
学习Vue的基础知识、开发工具以及项目实战
杨林伟
像火箭科学家一样思考！
展开
-
Vue项目实战（09）- svg图标的使用
文章目录1. 引言2. 项目使用svg图标2.1 下载svg图标2.2 注册svg组件2.3 使用svg组件3. 总结1. 引言在前面的章节，已经讲解了部分vue-element-admin的知识：《Vue项目实战（01）-vue-element-admin项目结构分析》《Vue项目实战（02）-Vuex状态管理模式》《Vue项目实战（03）-alias》《Vue项目实战（04）-axios封装》《Vue项目实战（05）-多环境配置》《Vue项目实战（06）- 钩子方法触发失败的解决》《原创 2021-07-21 10:10:08 · 846 阅读 · 0 评论 -
Vue项目实战（08）- css预处理器
文章目录1. 引言2. css预处理器2.1 什么是css预处理器？2.2 属性分析2.2.1 lang属性2.2.2 scoped属性2.2.3 sass和scss2.3 sass使用案例2.3.1 安装使用2.3.2 结构化与模块化2.3.2.1 分散式2.3.2.1 集中式3. element项目分析4. 总结1. 引言在前面的章节，已经讲解了部分vue-element-admin的知识：《Vue项目实战（01）-vue-element-admin项目结构分析》《Vue项目实战（02）-Vu原创 2021-07-19 16:59:32 · 1428 阅读 · 0 评论 -
Vue项目实战（07）- 登录权限分析
文章目录1. 引言2. 思路3. 流程分析3.1 token获取分析3.1.1 界面层3.1.2 store层3.1.3 响应内容处理3.2 权限分析3.2.1 界面层3.2.2 全局钩子函数3.2.3 主页4. 小结1. 引言在前面的章节，已经讲解了部分vue-element-admin的知识：《Vue项目实战（01）-vue-element-admin项目结构分析》《Vue项目实战（02）-Vuex状态管理模式》《Vue项目实战（03）-alias》《Vue项目实战（04）-axios封装原创 2021-07-13 15:24:31 · 2116 阅读 · 16 评论 -
Vue项目实战（06）- 钩子方法触发失败的解决
文章目录1. 引言2. 引出问题3. 解决方案1. 引言在前面的章节，已经讲解了部分vue-element-admin的知识：《Vue项目实战（01）-vue-element-admin项目结构分析》《Vue项目实战（02）-Vuex状态管理模式》《Vue项目实战（03）-alias》《Vue项目实战（04）-axios封装》《Vue项目实战（05）-多环境配置》本文要讲解的是钩子触发失败的问题。2. 引出问题有时候我们使用router-view的时候，因为是同一个组件conpome原创 2021-07-13 11:25:49 · 1495 阅读 · 0 评论 -
Vue项目实战（05）-多环境配置
文章目录1. 引言2. 多环境配置2.1 配置pacakge.json2.2 配置内容1. 引言在前面的章节，已经讲解了部分vue-element-admin的知识：《Java程序员从零开始学Vue（25）-element开源项目-项目结构分析》《Java程序员从零开始学Vue（26）-element开源项目-Vuex》《Java程序员从零开始学Vue（27）-element开源项目-alias》《Java程序员从零开始学Vue（28）-element开源项目-axios》本文主要讲原创 2021-07-12 18:04:24 · 904 阅读 · 6 评论 -
Vue项目实战（04）- axios封装
文章目录1. 引言2. 网络请求共性3. axios封装1. 引言在前面的章节，已经讲解了部分vue-element-admin的知识：《Java程序员从零开始学Vue（25）-element开源项目-项目结构分析》《Java程序员从零开始学Vue（26）-element开源项目-Vuex》《Java程序员从零开始学Vue（27）-element开源项目-alias》本文主要讲解的是axios，在前面已简单的讲解过《Java程序员从零开始学Vue（12）- 异步通信（Axios）》，但是原创 2021-07-12 17:13:52 · 712 阅读 · 0 评论 -
Vue项目实战（03）- alias
文章目录1. 引言2. alias2.1 alias使用方式3. element项目详解1. 引言在前面的章节，已经讲解了部分vue-element-admin的知识：《Java程序员从零开始学Vue（25）-element开源项目-项目结构分析》《Java程序员从零开始学Vue（26）-element开源项目-Vuex》本文主要讲解的是alias别名。2. alias我们知道，在日常的开发中，要引入一个文件，经常要写一连串的东西，如下：import stickTop from '..原创 2021-07-12 16:50:46 · 2551 阅读 · 0 评论 -
Vue项目实战（02）-Vuex状态管理模式
文章目录1. 引言2. Vuex2.1 什么是Vuex？2.2 Vuex解决什么问题？3. Vuex入门案例3.1 添加vuex依赖3.2 配置vuex3.3 使用vuex4. 详解Vuex4.1 Vuex核心成员4.1.1 Mutations4.1.1.1 Mutations 修改数据4.1.1.2 Mutations 增删数据4.1.1.3 Mutations 传值4.1.2 Getters4.1.3 Actions4.1.4 modules4.1.4.1 modules细节4.2 标准的目录结构5.原创 2021-07-12 16:25:41 · 805 阅读 · 0 评论 -
Vue项目实战（01）-vue-element-admin项目结构分析
文章目录1. 引言2. 目录结构分析2.1 .editorconfig2.2 .env.*2.3 .eslintignore2.4 .eslintrc.js2.5 .gitignore2.6 .travis.yml2.7 babel.config.js2.8 jest.config.js2.9 jsconfig.json2.10 plopfile.js2.11 postcss.config.js2.12 vue.config.js 3. 小结1. 引言在前面的教程里，大致把Vue的基础讲解完了，有兴趣的原创 2021-07-12 10:43:15 · 1745 阅读 · 2 评论 -
Vue系列教程（24）- 阶段总结
文章目录1. 脑图总结2. 文章列表3. 说到最后1. 脑图总结《Java程序员从零开始学Vue》专栏到此基本讲完，下面是我整理的一份脑图：2. 文章列表以下是文章的列表：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《Java程序员从零开始学Vue（05）- 基础原创 2021-07-01 11:55:11 · 412 阅读 · 0 评论 -
Vue系列教程（23）- npm小结
文章目录1. 引言2. npm详解2.1 什么是npm2.2 安装与升级npm2.3 国内cnpm2.4 包安装方式2.4.1 本地local安装2.4.2 全局global安装2.4.3 兼容本地和全局2.5 package.json2.6 npm 脚本2.6.1 npm run2.6.2 npm start 2.7 发布包2.8 命令总结2.8.1 查看命令帮助2.8.2 列出各命令2.8.3 查看安装信息2.8.4 卸载包2.8.5 更新包2.8.6 搜索包2.8.7 列出npm的配置2.8.8 列出原创 2021-06-30 17:35:40 · 574 阅读 · 0 评论 -
Vue系列教程（22）- 路由钩子
文章目录1. 引言2. 路由钩子3. 案例1. 引言通过前面的章节，我们知道了如何定义404页面 ，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《Java程序员从零开始学Vue（05）- 基础知识快速补充（html、css、js）》《Java程原创 2021-06-30 16:11:26 · 564 阅读 · 0 评论 -
Vue系列教程（21）- 自定义404页面&路由模式
文章目录1. 引言2. 案例3. 路由模式1. 引言通过前面的章节，我们知道了不同页面间的参数传递 ，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《Java程序员从零开始学Vue（05）- 基础知识快速补充（html、css、js）》《Java原创 2021-06-30 15:55:14 · 521 阅读 · 0 评论 -
Vue系列教程（20）- 参数传递（:to）
文章目录1. 引言2. 案例2.1 路由配置定义路径参数别名2.2 传参2.3 接收参数2.4 演示3. 小结1. 引言通过前面的章节，我们知道了嵌套路由的使用 ，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《Java程序员从零开始学Vue（05原创 2021-06-30 15:00:10 · 1438 阅读 · 0 评论 -
Vue系列教程（19）- 嵌套路由（ElementUI）
文章目录1. 引言2. 案例2.1 创建子路由2.2 引用子路由2.3 定义子路由2.4 运行程序1. 引言通过前面的章节，我们已经熟悉了ElementUI的使用 ，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《Java程序员从零开始学Vue（0原创 2021-06-30 09:58:06 · 553 阅读 · 0 评论 -
Vue系列教程（18）- 集成UI框架（ElementUI）
文章目录1. 引言2. ElementUI案例2.1 创建项目2.2 安装依赖2.3 创建页面2.4 配置路由2.5 运行程序1. 引言通过前面的章节，我们已经学会了使用vue-router来实现页面的跳转，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调原创 2021-06-29 18:05:03 · 894 阅读 · 4 评论 -
Vue系列教程（17）- 路由（vue-router）
文章目录1. 引言2. 什么是vue-router2. vue-router案例2.1 创建项目2.1.1 项目初始化2.1.2 新增需要跳转的两个模块2.2 vue-router路由配置2.2.1 安装vue-router插件2.2.2 配置路由表2.2.3 导入声明2.3 使用路由1. 引言通过前面的章节，我们已经学会了使用webpack来对vue项目进行打包，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境原创 2021-06-28 11:58:41 · 533 阅读 · 2 评论 -
Vue系列教程（16）- 模块打包器（webpack）
文章目录1. 引言2. 什么是webpack3. webpack安装4. webpack项目案例4.1 创建webpack项目4.2 打包4.3 使用打包后的js文件4.4 小结1. 引言通过前面的章节，我们已经学会了Vue的事件内容分发，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vu原创 2021-06-28 10:34:37 · 530 阅读 · 0 评论 -
Vue系列教程（15）- 事件内容分发（$emit）
文章目录1. 引言2. 设计思路3. 案例1. 引言通过前面的章节，我们已经学会了使用插槽slot来做模块化开发，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《Java程序员从零开始学Vue（05）- 基础知识快速补充（html、css、js）》原创 2021-06-25 11:41:47 · 444 阅读 · 2 评论 -
Vue系列教程（14）- 插槽（slot）
文章目录1. 引言2. Slot插槽2.1 案例代码2.2 代码分析1. 引言通过前面的章节，我们已经学会了使用计算属性computed来做内存优化，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《Java程序员从零开始学Vue（05）- 基础知识原创 2021-06-25 10:29:47 · 620 阅读 · 2 评论 -
Vue系列教程（13）- 计算属性（computed）
文章目录1. 引言2. 计算属性2.1 案例3. 小结1. 引言通过前面的章节，我们已经学会了使用Axios通信框架来进行网络请求，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《Java程序员从零开始学Vue（05）- 基础知识快速补充（html原创 2021-06-25 09:30:20 · 518 阅读 · 0 评论 -
Vue系列教程（12）- 异步通信（Axios）
文章目录1. 引言2. Axios2.1 什么是Axios2.2 Axios案例2.2.1 创建模拟数据2.2.2 代码实现3. 小结1. 引言通过前面的章节，我们已经学会了vue的组件，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《Java程序原创 2021-06-24 18:04:09 · 659 阅读 · 2 评论 -
Vue系列教程（11）- 组件详解（Vue.component、props）
文章目录1. 引言2. 组件2.1 注册组件（Vue.component）2.2 传递参数（使用props属性）3. 注意事项1. 引言通过前面的章节，我们已经学会了vue的Model内容数据双向绑定，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》原创 2021-06-24 16:53:29 · 1542 阅读 · 0 评论 -
Vue系列教程（10）- Model数据内容双向绑定（v-model）
文章目录1. 引言2. Model数据双向绑定3. 表单示例3.1 单行文本3.2 多行文本3.3 单选框3.4 复选框3.5 单选按钮3.6 下拉框1. 引言通过前面的章节，我们已经学会了vue的事件绑定，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsC原创 2021-06-24 16:15:14 · 1276 阅读 · 2 评论 -
Vue系列教程（09）- 事件绑定（v-on:*）
文章目录1. 引言2. 事件绑定1. 引言通过前面的章节，我们已经学会了vue的基本语法，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《Java程序员从零开始学Vue（05）- 基础知识快速补充（html、css、js）》《Java程序员从零开原创 2021-06-24 15:41:30 · 573 阅读 · 0 评论 -
Vue系列教程（08）- 基本语法（v-bind、v-if、v-for）
文章目录1. 引言2. 绑定（v-bind）3. 判断3.1 v-if， v-else3.2 v-else-if4. 循环（v-for）1. 引言通过前面的章节，我们已经完成了vue的第一个程序，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《J原创 2021-06-24 15:21:31 · 875 阅读 · 2 评论 -
Vue系列教程（07）- Vue第一个程序（MVVM）
文章目录1. 引言2. MVVM设计理念2.1 什么是MVVM2.2 为什么要用MVVM模式？2.3 MVVM组成2.3.1 View2.3.2 Model2.3.3 ViewModel2.4 Vue里面的MVVM3. 第一个Vue程序3.1 新建项目3.2 创建第一个文件3.3 启动程序并演示VM1. 引言通过前面的章节，我们已经了解了Vue的开发要素以及前端的基础知识了，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）-原创 2021-06-24 14:44:10 · 599 阅读 · 0 评论 -
Vue系列教程（06）- Vue调试神器（vue-devtools）
文章目录1. 引言2. 下载3. 安装4. 配置插件5. 添加插件6. 使用1. 引言通过前面的章节，我们已经了解了Vue的开发要素以及前端的基础知识了，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- 前端发展史》《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》《Java程序员从零开始学Vue（04）- VsCode断点调试》《Java程序员从零开始学Vue（05）- 基础原创 2021-06-24 11:39:52 · 883 阅读 · 2 评论 -
Vue系列教程（05）- 基础知识快速补充（html、css、js）
1. 引言通过前面的章节，我们的对Vue有一个整体的认知了，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（02）- Vue开发利器VsCode》《Java程序员从零开始学Vue（03）- VsCode断点调试》在深入学习Vue之前，需要了解一些基础的知识，就是本文要讲解的一些前端基础知识，即html、css及js。2. 说说html、css及js相信大家都有学习过html、css和js，但是一直在做后端原创 2021-06-23 15:19:28 · 1138 阅读 · 0 评论 -
Vue系列教程（04）- VsCode断点调试（Debugger for Chrome）
1. 引言在前面的章节，已经讲解了Vue的环境搭建以及VsCode的安装使用，有兴趣的同学可以参阅下：《Java程序员从零开始学Vue（01）- Vue环境搭建、项目创建及运行》《Java程序员从零开始学Vue（02）- Vue开发利器VsCode》本文主要讲解Vue项目在VsCode下的断点调试。2. 断点调试1.首先下载Debugger for Chrome，按下图依次操作2.创建launch.js，按下图依次点击操作：在项目，可以看到生成launch.js文件，其内容如下：原创 2021-06-15 18:04:33 · 3456 阅读 · 3 评论 -
Vue系列教程（03）- Vue开发利器（VsCode）
文章目录1. 前言2. 下载安装3. 创建并导入vue项目3.1 插件安装3.2 使用脚手架安装项目3.3 导入项目3.4 运行项目4. 快捷键设置1. 前言工欲善其事必先利其器，就像Java开发需要IDEA一样，Vue的开发也需要利器，便是：VsCode介绍：VsCode是微软开发并开源，同时可以免费使用的轻量级IDE。它与VisualStudio的区别，没有VS 那么重。 下面是官方的FAQ的回答:Visual Studio Code is a streamlined code edi原创 2021-06-15 16:24:11 · 1065 阅读 · 0 评论 -
Vue系列教程（02）- Vue环境搭建、项目创建及运行
文章目录1. 介绍2. 安装2.1 安装node2.2 安装Vue3. 项目创建3.1 创建项目3.2 目录结构3.3 两个文件（App.vue及main.js））4.运行项目4.2 如何部署到别的环境1. 介绍Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完原创 2021-06-15 14:34:53 · 1882 阅读 · 2 评论 -
Vue系列教程（01）- 前端发展史
1. 前言声明：本文转载至视频里面的内容，视频地址：https://www.bilibili.com/video/BV18E411a7mC?p=3前端演进到现在，各种技术框架已经层出不穷了，作为一名开发少不了要干一些前端的活儿，那么整个前端的架构体系是怎样的呢？让我们一起来了解回顾一下。2. 前端三要素HTML(结构): 超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容CSS(表现): 层叠样式表(Cascading Style Sheets)，设转载 2021-06-23 18:05:22 · 955 阅读 · 0 评论