模板结构主要包括四个部分：preset.jsonprompts.jsgenerator/index.jstemplate/preset.jsonpreset.json 中是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们，简称预设；prompts.js交互式的告知vue create所需，是根据用户使用需求自定义设置的信息。定义格式参考Inquirer 问题格...

键盘输入分类直接输入输入的键直接落入可输入DOM元素，为直接输入。E.g.英文输入。间接输入输入的键值不会直接落入可输入DOM元素，有一个中间态，为间接输入。E.g.中文输入。区分中英文输入因为任何输入都会触发input，而输入中文的时候才触发compositionstart和compositionend，可以以此来区分中英文输入。e.keyCode在...

移动端适配方案flexible.js出发点事故的开始总是有原因的，那思考一下，为什么使用Flexible?[ ] 为了rem布局？ >> 为什么要rem布局 ——> 高度还原[ ] 移动端适配? >> 为什么移动端适配要用Flexible ——> 同等占比[ ] 什么是移动端适配？最初点是设计图的高度还原！！！以750*1334设计稿(iPhone6)为准，...

在Vue-cli 3.X环境下，基于同一类型的活动，可以多个页面复用，大部分组件可以公用的背景Multiple处理方式每一个活动创建一个分支，在不同的分支上各自维护如果需要维护复用代码时，任选某一分支进行修改，通过git cherry-pick <commit id>进行平行迁移。Monorepo处理方式仅在同一分支下进行多项目的维护，各个功...

上节回顾 图片上传 & 存储 & 访问 工作内容 审批的增删改查 更新、删除数据时，校验当前用户是不是数据所属人 通过ref查询另一表中的数据 准备工作 npm i -S moment //分别切换到/server、/client目录下安装 把服务端/users的路由和处理逻辑拷一份，改改名 这里主要是罗列代码 业务逻辑 服务端代码 路由处理逻辑...

上节回顾 更新用户文本数据 工作内容 更新用户数据 图片上传 & 存储 & 静态化访问 准备工作 npm i -S koa-static // 先切换到/server目录下 业务逻辑 服务端文件路由配置 服务端拦截路由请求： {代码...} {代码...} koa-body支持 {代码...} multipart: true支持文件数据，这里以key:value的形式获取。 formidabl...

上节回顾 JWT相关 工作内容 更新用户数据 准备工作 无 业务逻辑 页面调用用户信息 {代码...} 在登录的时候，已经将登录用户信息存储到vuex中，通过用户ID查询用户详细信息。 服务端查询用户服务 {代码...} {代码...} 其中，userModel.findOne({_id: id})默认查出的是Schema没有设置select: false的字段，如果需要其它字...

上节回顾 嵌套路由 页面布局 状态管理 & 持久化 工作内容 身份认证 准备工作 npm i -S crypto-js // 先切换到/server目录下 npm i -S koa-jwt // 先切换到/server目录下 npm i -S jsonwebtoken // 先切换到/server目录下 业务逻辑 JWT简介 JWT对象为一个长字串，字符之间通过"."分隔符分为三个子串。JWT的三个部分：...

上节回顾 密码加密 后端参数校验 中间件的使用 & 错误处理 工作内容 vuex的简单使用 vue-router嵌套路由 vuex本地持久化 准备工作 npm install vuex --save //先切换到/client目录下 npm install --save vuex-persist //先切换到/client目录下 布局分析 期望布局 自己能实现布局的同学可以掠过"布局"这部分内容，几...

上节回顾 Element、scss、axios的使用 路由定义与跳转 登录&注册客户端逻辑 工作内容 crypto-js加密 服务端参数校验 准备工作 npm i -S crypto-js // 先切换到/client目录下 npm install -S koa-bouncer // 先切换到/server目录下 更新逻辑 前端加密 上几节保存的密码都是明文的，这里借助crypto-js加密密码。 {代码...

上节回顾 荷载的解析 服务端注册&登录逻辑 数据库的存储 & 查询 工作内容 初始化前端环境 创建前端路由 axios请求接口 准备工作 全局安装依赖 // 以便通过vue/cli初始化项目 ├── @vue/cli@4.1.2 ├── @vue/cli-init@4.1.2 vue init webpack ./ // 先切换到/client目录下 npm i -S axios // 先切换到/client目录下...

上节回顾 @koa/router的用法 用户路由的定义 koa中间件的使用 Postman基本测试 工作内容 后端：参数的获取 后端：数据库的写入与查询 Postman：接口测试 准备工作 npm i -S koa-body //对Post、Put、Patch请求参数处理 业务逻辑 参数获取 支持荷载存储到ctx.request.body {代码...} 更新注册&登录路由 调用POST方法...

上节回顾 mongoose连接数据库 数据存储结构的定义 工作内容 后端：路由拦截 Postman：测试接口 准备工作 npm i -S @koa/router //安装路由 路由拦截 基本用法 {代码...} 以nodemon配置的launch.json运行 浏览器输入localhost:3000和localhost:3000/any查看输出结果。 优化代码 这里希望将所有的路由配置提取到/server/ro...

上节回顾 koa搭建服务端 运行服务端代码（如何在命令行中调用本地依赖包） 借助vs code调试代码 工作内容 连接数据库 创建数据结构 准备工作 安装robo //数据库可视化工具 安装mongoDb //我已经安装过了，也没遇到什么坑，就不再演示了 npm i -S mongoose // 安装mongoose brew services start mongodb-community //启动...

工作内容 搭建服务端 运行起来 准备工作 创建目录结构 |-client|-server |--bin // 可执行文件目录 |--app.js 初始化项目 切换到server目录下cd server 初始化项目npm init -y // -y以默认值初始化 npm i -S koa //安装项目依赖koa 构建服务端 编写app.js {代码...} 运行服务端 方式一：cli 直接在项目路径server下，开...

使用koa结合mongoose搭建服务端，jwt实现身份验证。vue结合element-ui实现前端渲染，axios负责网络请求，vuex负责状态管理。

关于模拟数据，这里使用Mock.js这个库，关于用法，官网说的也比较详细，这里我就简单的带一下。 列表数据 我们先将项目中src/components/HelloWorld.vue删除，将src/router/index.js作如下修改： {代码...} 然后，在src/views/vacation/建立index.vue： {代码...} 显示效果 在手机模式下，显示效果如下： 模拟数据 在项...

简介 组件是可复用的 Vue 实例。 本质上是一个对象，该对象包含data、computed、watch、methods、filters以及生命周期钩子等成员属性。 组件结构： {代码...} 基础知识 data属性 data属性维护一个组件内部状态，其余组件正常情况下不可见。 可以通过props传递给子组件； 可以通过$emit的方式传递给父组件； 可以通过this...

视图 包含内容#NavigationBar、#TabBar、#MainContext； 为什么#NavigationBar、#TabBar分在Layout中，而不是components中？ 代码上实际上是没有差别的，只是认为#NavigationBar、#TabBar是加载一次的，而非复用，且属于页面布局内容。 App.vue Vue实例化的根组件，我们在这里进行布局： src/App.vue文件： {代码...} 在...

页面布局 App页面整体布局分上中下 || 上下部门； NavigationBar -> 导航栏，每个页面所共有； MainContext -> 页面的主体，随内容可滚动； TabBar -> Tab栏，页面可选，有的有，有的无； 可分离组件 日期组件； 审批流组件： 列表组件； 可分离的工具库 申请单类型： ‘事假’、‘病假’、‘年假’； 对应数据类型应...

关于对.vue文件模块处理规则的配置依次可在build/webpack.base.conf.js->build/vue-loader.conf.js->build/utils.js文件中跟踪；

本章以下命令都是在cmd命令行中进行的。 安装命令行 npm i -g vue-cli 安装完成后，输入vue -V返回版本号，即安装成功； 初始化项目 切换到项目目录下 项目目录，即项目所在目录。 目前，我们还没有创建项目，进入 预期项目目录 的上一级文件目录下即可。 本文以个人电脑目录演习cd /d e:/tutors/，请自动对应自己的学习...

开场白 重大的事情开始之前，都需要一个酝酿，下边是我的酒... 在这里分享一下自己学习Vue的经验，很多内容也是属于臆测的，欢迎大家怀疑与指正，我也只是一个初学者。 尽信书不如无书嘛。 由于个人电脑配置问题，所有的操作都是在win10环境下进行的，Mac || Linux系统的小伙伴们智能自行转换命令了，在此抱歉。 项目是...

效果扩展： {代码...} 组件扩展： {代码...} 指令扩展： {代码...} 过滤器扩展 {代码...}

Vue在讲组件时，建议最好不要在父作用域中传值给子组件，不知道为什么用slot； slot背景 为什么要用slot？ 个人理解： 为了保证组件内容的灵活性，组件的内容由其所在的上下文环境确定； 将组件必要的内部层级透明地展现在组件所在的上下文环境中； slot分类 默认的slot 默认的slot是指那些在调用组件时,没有指定slot属...

本文需要对Vue有一定的基础，可以通过查看文档初步了解，以下是自己对数据绑定的总结： Vue.js 模板都是可解析的有效的 HTML，从根本上不同于基于字符串的模板； 插值： {代码...} 指令： 带有前缀v-的特性；------参数，用冒号':'隔开；---修饰符，用'.'分割； {代码...} 过滤器： 添加到表达式的后面，用管道符'|'隔开...

------通过plugins来实现；------调用plugins之前需要通过npm安装； 调用plugins：----在webpack.config.js中用require()--------除了亲儿子（内置插件）和{安装了实现lazyload的插件后}不需要require

任何一个钩子函数都可以终止界面切换；-------界面切换：组件更换；数据更新；每个切换钩子函数都会接受一个 transition 对象作为参数

组件切换 就个人目前所知，Vue中切换组件有两种方式： 动态组件(:is属性绑定) <component v-bind:is="currentTabComponent"></component> 查看官网介绍 查看官网示例 注意： 使用component:is的组件必须是局部注册 | 全局注册 | 组件初始对象。 惊喜： 该方法与keep-alive更配哟，切换到另一组件时，可以保...