01 2021 档案
摘要：什么是Sticky Footer？页脚footer永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。 当内容较少时，正常的文档流效果如下图 在正常的文档流中，页面内容较少时，页脚部分不是固定在视窗底部的，这时就要用到Stickyfooter布局。 Sticky f
阅读全文
摘要：filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 样式， 给header设置绝对行为，给图片设置相对定位，图片的z-index设置为最低， filter属性设置图片饱和度 效果 不设置filter属性
阅读全文
摘要：1.准备2x,3X图片，在vue项目中的assets中新建stylus文件夹，新建mixin.stylus 适配图片 //关于2X,3x图的兼容 bg-image($url) //正常情形 background-image: url($url + "@2x.png") // 3X图时 @media
阅读全文
摘要：1.已经运行了的webApp项目 在终端查看本机ip ipconfig , 查看本机ip地址， 打开草料二维码网站，https://cli.im/ 将localhost:8080/#/sellers 换成http://192.168.0.235:8080/#/sellers地址 将项目地址生成二维码
阅读全文
摘要：在retina屏中，像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的边框看起来比真的1px更宽。 本文默认你已经对视口、物理像素、逻辑像素、设备像素比、css像素等移动端基本概念已经解。 产生原因 设备像素比：dpr = window.device
阅读全文
摘要：点击路由连接(router-link)， 默认有个 "router-link-active"， 在router配置， 点击路由连接，让active类名与router-link-active"关联，active自动生效 <div> <!-- 头部 --> <v-headers></v-headers>
阅读全文
摘要：vue-cli3或者4中使用脚手架创建的项目，没有webpack.base.config.js文件，那么咋搞？ 手动创建呗？ 就可以配置一些额外的操作了，如何配置别名呢，直接上手吧。 创建vue.config.js文件 const path = require('path');//引入path模块
阅读全文
摘要：报错信息如下： Syntax Error: ValidationError: Invalid options object. Stylus Loader has been initialized using an options object that does not match the API
阅读全文
摘要：前言 在项目中安装了ESLint后，有些规则非常恶心，这时我们既想用其他的ESLint规则功能，又想禁用这些恶心的规则，听起来有些矛盾，但ESLint允许我们自定义规则。 配置语法 把自定义规则加入到 rules 配置项中即可： // 配置参数 rules: { "规则名1": [规则值, 规则配置
阅读全文
摘要：前言， vue-cli官网：https://cli.vuejs.org/zh/config/#pages 从Vue CLI 3.0 开始，Webpack的配置文件从webpack.config.js变为了vue.config.js。此外，Vue 对配置文件的写法也进行了一些改动,封装了webpack
阅读全文
摘要：一，mockjs模拟banner和floor接口操作，组件获取数据 1.在vue根目录下创建mock文件夹，创建banner.json和floor.json, mockServer.js(提供服务，模拟接口) 安装mockjs npm i mockjs mockServer.js 文件内容 //正儿
阅读全文
摘要：新建文件夹mockServe, 新建server.js, 2.将mock的数据（data.json）放入mockServer文件中， 3. npm init -y, 安装express包 npm i express 4.在server.js中搭建服务, npm start 启动服务 //引入expr
阅读全文
摘要：一，当点击点餐，评价，商家，路由组件时，会发送请求，我们需要点击一次时，对之前一个路由组件进行缓存，用到keep-alive 主要用于保留组件状态或避免重新渲染。 <template> <div> <ShopHeader></ShopHeader> <div class="tab"> <div cl
阅读全文
摘要：一，评价shopRtings页面搭建 在vuex中获取数据,商家评价列表数据 mounted(){ this.$store.dispatch('getShopRatings') }, computed:{ ...mapState(['info', 'ratings']) } 填充数据， 根据rate
阅读全文
摘要：一，搭建商品详情信息页面 注；新建shop路由组件，然后点击点餐的路由子组件（shopgoods），点击评价的路由子组件（shopratings），点击商家的路由子组件（shopInfo），顶部有个固定组件（shopheader） 在views中新建shop组件，再建shopgoods子组件，sho
阅读全文
摘要：一，shopList组件，从store获取数据，填充模板 mounted() { this.$store.dispatch('getShops') }, computed: { ...mapState(['shops']) } 二，使用svg显示加载中提示页面，如果数据还没回来，可用svg图片过渡下
阅读全文
摘要：一，首页页面情况 1.底部四个切换栏路由组件路由配置 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // 引入路由组件 import Msite from '@/views/Msite' imp
阅读全文
摘要：1. 生成打包报告 2. 第三方库启用 CDN 3. Element-UI 组件按需加载 4. 路由懒加载 5. 首页内容定制 一，利用nprogress插件添加导航进度条 1.1安装；npm install --save nprogress 1,2 // 导入 NProgress 包对应的JS和C
阅读全文
摘要：一，订单管理中订单列表页面搭建 1.1，order订单组件路由配置 import Order from '@/views/Order/Order' { path: '/home', component: Home, // 重定向 redirect: '/welcome', children: [ {
阅读全文
摘要：vue-quill-editor github地址：https://github.com/surmon-china/vue-quill-editor 官方文档地址：https://www.npmjs.com/package/vue-quill-editor vue项目中，npm安装依赖 npm in
阅读全文
摘要：一，商品管理的商品列表页面搭建 1.1，商品列表组件路由配置 import List from '@/views/Goods/List' { path: '/home', component: Home, // 重定向 redirect: '/welcome', children: [ { path
阅读全文
摘要：简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从['abc','abd','ade']数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变
阅读全文
摘要：一，商品管理中的商品参数页面搭建 1.1，商品参数组件的路由配置 import Params from '@/views/Goods/Params' { path: '/home', component: Home, // 重定向 redirect: '/welcome', children: [
阅读全文
摘要：一，商品管理中的商品分类的页面搭建 1.1，商品分类组件路由的配置 import Cate from '@/views/Goods/Cate' { path: '/home', component: Home, // 重定向 redirect: '/welcome', children: [ { p
阅读全文
摘要：如何使用vue-table-with-tree-grid树形表格组件 1、假如遇到了一个需要搭建一个树形结构的表格页面，这时候vue-table-with-tree-grid便可以派上用场。示例如下。 2、如果你是使用vue ui搭建的项目，使用时操作如下; 2.1: 在vue 控制台中点击依赖
阅读全文
摘要：一，权限管理中的权限列表开发 1.1，配置路由对象 import Rights from '@/views/Power/rights' { path: '/home', component: Home, // 重定向 redirect: '/welcome', children: [ { path:
阅读全文
摘要：10.9， 实现搜索功能， 搜索姓名，点击搜索按钮，发送请求，重置数据 点击清空输入框图标，发送请求，重置数据 <el-card> <el-row :gutter="20"> <el-col :span="18"> <el-input placeholder="请输入内容" v-model="que
阅读全文
摘要：一，home组件，侧边栏静态页面搭建， 1.1。去element-ui找组件 按需引入element组件 import Vue from 'vue' import { Button, Form, FormItem, Input, Message, Container, Header, Aside,
阅读全文
摘要：一，项目初始化 1.vue脚手架图形化配置 在控制面板输入vue ui, 创建- 桌面（项目本地存放路径）-在此创建新项目-输入项目名（英文）-初始化git仓库-手动配置项目（babel,router,vuex,linter,使用配置文件）-不选择历史路由（history），standardcono
阅读全文
摘要：一，查看某个spu下的所有sku列表 在elementUI找到el-dialog,表格嵌套dialog <el-dialog title="sku列表" :visible.sync="dialogTableVisible" :before-close="handleBeforeClose"> <el
阅读全文
摘要：一，在spu商品列表页，点击修改按钮，初始化请求页面数据 1.1。点击修改按钮，在spu组件中给子组件spuForn设置ref属性，调用子组件的函数（传递属性id,接口函数的参数），子组件调用四个接口函数，获取数据 <el-button type="primary" icon="el-icon-ed
阅读全文
摘要：写项目的时候总会遇到语法错误，一个空格错误，就会让项目进行不下去，因此关闭ESLint校验功能，如何关闭呢？ 方法一:创建项目时不要勾选Linter/Formatter选项方法二:图形化界面中关闭Linter功能方法三:直接修改配置文件vue.config.js module.exports = {
阅读全文