01 2020 档案

摘要:添加Mock数据 前面我们使用elementUI实现了登录页面和简单的校验,现在使用接口的方式来实现登录的逻辑 使用EasyMock添加两个接口 因为要访问EasyMock 模拟接口, 所以要把 接口地址改一下,在 .env.development 文件中修改如下: 注意:改成你自已的EasyMoc 阅读全文
posted @ 2020-01-26 12:07 邹邹很busy。 阅读(4329) 评论(0) 推荐(0) 编辑
摘要:登录页面开发 先把项目根目录下components和views目录下的文件都删掉 在 src\router\index.js 中配置路由(把原有的路由配置删除),如下: import Vue from "vue"; import VueRouter from "vue-router"; Vue.us 阅读全文
posted @ 2020-01-22 21:34 邹邹很busy。 阅读(38043) 评论(0) 推荐(3) 编辑
摘要:封装axios 因为项目中很多组件中要通过Axios发送异步请求,所以封装一个Axios对象。自己封装的Axios在后续可以使用axios中提供的拦截器。 在src下创建一个utils目录,在utils目录下创建一个request.js文件 在public下创建一个db.json文件,写点数据,用来 阅读全文
posted @ 2020-01-20 21:45 邹邹很busy。 阅读(3288) 评论(1) 推荐(1) 编辑
摘要:环境准备 在前面我们学了很多vue相关的知识,学的比较独立,现在来开发一个简单的系统,使用vue全家桶和elementUI把之前学的东西都串起来。 我们基于Vue-CLI脚手架创建项目,需要安装Node.js8.9+ 安装Vue-CLI npm install -g @vue/cli 安装成功后,在 阅读全文
posted @ 2020-01-19 20:26 邹邹很busy。 阅读(2388) 评论(0) 推荐(1) 编辑
摘要:Vuex 概述 官方文档:https://vuex.vuejs.org/zh/ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 Vue 应用中的每个组件在 data() 中封装着自己数据属性 阅读全文
posted @ 2020-01-16 18:08 邹邹很busy。 阅读(362) 评论(0) 推荐(0) 编辑
摘要:前戏 在之前我们使用mockjs模拟数据的时候,都不是以服务的形式返回给我们的。在实际的项目中,我们都是以服务的方式调用接口。 Easy Mock 是一个可视化,并且能快速生成模拟数据的服务。是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 Mock 服务 。 现在 阅读全文
posted @ 2020-01-15 20:04 邹邹很busy。 阅读(594) 评论(0) 推荐(0) 编辑
摘要:介绍 前后端分离项目,前端和后端人员都是根据 API 文档进行开发项目的,不应该直接相互依赖, 前端人员不应该等待后端开发好接口后再进行测试,既然不依赖后端接口,那前端人员应该如何测试呢? 可以通过模拟数据生成器,通过一定规则 (API文档)生成模拟数据接口, 提供给前端人员进行测试。 官网:htt 阅读全文
posted @ 2020-01-14 21:24 邹邹很busy。 阅读(640) 评论(0) 推荐(0) 编辑
摘要:Eslint 配置介绍 ESLint 是一个语法规则和代码风格的检查工具,可以 用来保证写出语法正确、风格统一的代码。 如果我们开启了 Eslint , 也就意味着要接受它 非常苛刻的语法检查,包括空格不能少些或多些,必须单引不能双引,语句后不可以写 分号等等,这些规则其实是可以设置的。 我们作为测 阅读全文
posted @ 2020-01-13 09:39 邹邹很busy。 阅读(2580) 评论(1) 推荐(0) 编辑
摘要:Vue-CLI服务命令 在说Vue-CLI项目结构的时候,先来说下Vue-CLI常用的服务命令 CLI 服务 ( @vue/cli-service ) 是一个开发环境依赖。针对绝大部分应用优化过的内部的 webpack 配置; 在一个 Vue CLI 项目中, @vue/cli-service 模块 阅读全文
posted @ 2020-01-12 13:22 邹邹很busy。 阅读(7607) 评论(0) 推荐(0) 编辑
摘要:前戏 在之前我们使用webpack进行打包的时候,webpack.config.js配置都是我们自己手写的。而Vue-CLI是官方提供的,用来搭建项目脚手架的工具,它是vue.js开发的标准工具,它已经集成了webpack,内置好了很多常用配置,使得我们在使用vue开发项目时更加的标准化。 官方文档 阅读全文
posted @ 2020-01-11 14:28 邹邹很busy。 阅读(2274) 评论(0) 推荐(0) 编辑
摘要:前戏 每一次手动打包很麻烦,打包后还需要手动刷新浏览器。 采用 webpack 提供的工具: webpack-dev-server ,它允许在运行时更新所有类型的模块后,而无需手动打包和刷新页面,会自动打包和刷新页面。可以很大程度提高开发效率。 参考:https://webpack.docschin 阅读全文
posted @ 2020-01-10 20:26 邹邹很busy。 阅读(928) 评论(0) 推荐(0) 编辑
摘要:前戏 Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要结合插件来使用,这些插件在Webpack 中被称为 Loader (加载器) 来进行转换。 Loader 可以理解为是模块和资源的转换器,它本身是一个函数,参数接受的是源文件, 返回值是转换后的结果。 这 阅读全文
posted @ 2020-01-09 20:44 邹邹很busy。 阅读(2391) 评论(0) 推荐(0) 编辑
摘要:介绍 webpack是一个前端的静态资源打包工具,能让浏览器也支持模块化。它将根据模块的依赖关系 进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 官网:https://webpack.docschina.org/ webpack的作用有下面几点: webpack核心主要进行javas 阅读全文
posted @ 2020-01-05 20:49 邹邹很busy。 阅读(6726) 评论(0) 推荐(0) 编辑
摘要:前戏 如果你是使用vscode软件进行开发前端项目,进行ajax调试的时候,建议安装liveServer插件。这样我们打开一个文件的时候,会以服务的方式打开。 vue中常用的ajax库有两个,一个是vue-resource,这个是在vue1.x中广泛使用的插件。还有一个是axios,在vue2.x中 阅读全文
posted @ 2020-01-04 21:01 邹邹很busy。 阅读(613) 评论(0) 推荐(0) 编辑
摘要:生命周期 每个Vue实例在被创建时都要经过一系列的初始化过程,比如,需要设置数据监听,编译模版,将实例挂载到DOM 并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。 下图展示了实例的生命周期 生命周期分为三大阶段:初始化显示,更新显示,销毁Vue实例。 初始化阶段的钩 阅读全文
posted @ 2020-01-02 20:00 邹邹很busy。 阅读(281) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示