自定义Vue-cli项目模板

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

创建可编辑区域

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

使用Flexible & swiper进行移动Web开发

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

基于Vue-cli初始化项目的多项目管理

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

Koa & Mongoose & Vue实现前后端分离--12联表查询

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

Koa & Mongoose & Vue实现前后端分离--11更新用户头像

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

Koa & Mongoose & Vue实现前后端分离--10更新用户信息

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

Koa & Mongoose & Vue实现前后端分离--09身份验证JWT&测试

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

Koa & Mongoose & Vue实现前后端分离--08前端状态管理&路由嵌套

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

Koa & Mongoose & Vue实现前后端分离--07登录加密&服务端参数校验

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

Koa & Mongoose & Vue实现前后端分离--06前端登录&注册

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

Koa & Mongoose & Vue实现前后端分离--05服务端注册&登录:业务逻辑

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

Koa & Mongoose & Vue实现前后端分离--04服务端注册&登录:用户路由配置

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

Koa & Mongoose & Vue实现前后端分离--03连接数据库

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

Koa & Mongoose & Vue实现前后端分离--02搭建服务端

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

Koa & Mongoose & Vue实现前后端分离--01序言

2020-03-05
阅读 1 分钟
2.5k
使用koa结合mongoose搭建服务端,jwt实现身份验证。vue结合element-ui实现前端渲染,axios负责网络请求,vuex负责状态管理。

实战Vue简易项目(5)模拟数据

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

Vue组件定义

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

实战Vue简易项目(4)定义视图

2018-08-04
阅读 7 分钟
4.1k
视图 包含内容#NavigationBar、#TabBar、#MainContext; 为什么#NavigationBar、#TabBar分在Layout中,而不是components中? 代码上实际上是没有差别的,只是认为#NavigationBar、#TabBar是加载一次的,而非复用,且属于页面布局内容。 App.vue Vue实例化的根组件,我们在这里进行布局: src/App.vue文件: {代码...} 在...

实战Vue简易项目(3)需求分析

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

实战Vue简易项目(2)定制开发环境

2018-07-31
阅读 4 分钟
2.3k
关于对.vue文件模块处理规则的配置依次可在build/webpack.base.conf.js->build/vue-loader.conf.js->build/utils.js文件中跟踪;

实战Vue简易项目(1)初始化环境配置

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

实战Vue简易项目(0)项目需求

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

Vue扩展

2016-06-12
阅读 1 分钟
3k
效果扩展: {代码...} 组件扩展: {代码...} 指令扩展: {代码...} 过滤器扩展 {代码...}

Vue Slot用法

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

Vue--数据传输

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

webpack--plugins

2016-04-21
阅读 3 分钟
4.6k
------通过plugins来实现;------调用plugins之前需要通过npm安装; 调用plugins:----在webpack.config.js中用require()--------除了亲儿子(内置插件)和{安装了实现lazyload的插件后}不需要require

vue-router控制切换流水线

2016-04-20
阅读 2 分钟
6.3k
任何一个钩子函数都可以终止界面切换;-------界面切换:组件更换;数据更新;每个切换钩子函数都会接受一个 transition 对象作为参数

vue-router基本用法

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