转自：https://blog.51cto.com/u_15061951/4263737 原来的没有封装的代码： <FormItem label="适用胸型" prop="chestShape"> <S…
分类：Vue
【原创】Vue 项目上线配置
通过 Node 创建 Web 服务器 创建 node 项目，安装 express，通过 express 快速创建 web 服务器。 创建项目文件夹 vue_test，在该文件夹下运行 npm init 初始化。 创建 a…
【原创】Vue 项目优化
为项目添加 loading 效果 使用 nprogress 包。 安装：npm install --save nprogress 导入并使用 main.js import NProgress from 'npr…
【原创】lodash 中的 cloneDeep 用法（深拷贝）
使用场景 例如做商品添加时，分类id需要传值 1,2,3 的形式，但基于计算或判断方便，在form 的 cateId 字段绑定的是数组，并且该字段参与了 validate 校验。 待商品添加调 API 接口时，需对该字段…
【原创】Vue 中使用 echarts
引入 import * as echarts from 'echarts'; 页面 <div id="main" style="width: 600px; heig…
【原创】Vue 时间过滤器
Vue.filter('dateFormat', function (originValue) { const dt = new Date(originValue); const y = dt.get…
【转载】Vue 校验邮箱和手机号
// 自定义校验规则 -- 验证邮箱 // rule:校验规则, value:校验的值, cb:回调函数 var checkEmail = (rule, value, callback) => { // 验证邮箱的…
【原创】Vue 项目实战之用户管理
用户列表高亮问题 用户列表作为 home 组件的子组件，被点击时并不会高亮。 menu 组件有一个 default-active 属性，可以设置高亮链接，值为当前激活菜单的 index。 单击时高亮 &&…
【原创】Vue 项目实战之主页布局
使用布局组件 home.vue <el-container> <el-header>Header</el-header> <el-container> <el-asi…
【原创】Vue 项目实战之登录和注销
清除无用代码和组件内容 安装 Vue-Router npm install --legacy-peer-deps vue-router@3.5.2 文件代码 main.js import Vue from 'v…
【原创】Vue 2 安装 Vue-Router 失败的解决办法
错误信息内容： npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While res…
【转载】Vue 电商后台管理系统
转自：https://www.jianshu.com/p/0ef4dc905e07 电商项目概述 如何运行项目 代码地址：Vue 电商后台管理系统 运行服务端接口项目（vue_api_server） 接口文档地址：htt…
【原创】Vue 项目实战
创建项目 使用 vue-cli 初始化项目 vue create proname 需要 node + webpack + 淘宝镜像 项目目录说明 node_modules : 项目依赖目录 public : 一般放置静态…
【原创】Vue 常用组件库
移动端常用 UI 组件库 Vant Cube UI Mint UI PC 端常用组件库 Element UI IView UI NutUI Element UI 引入全部 main.js import ElementUI…
【原创】Vue 路由其他
<router-link> 的 replace 属性 作用：控制路由跳转时操作浏览器历史记录的模式。 浏览器的历史记录有两种写入方式，分别是 push 和 replace，push 是追加历史记录,repla…
【原创】Vue 路由传参
query 参数 传参 字符串写法 <router-link :to="`/home/message/detail?${m.id}&${m.title}`">跳转</rout…
【原创】Vue-Router
什么是 Vue-Router Vue-Router 是 Vue 的一个插件库，专门用来实现 SPA 应用。 什么是 SPA 单页面 Web 应用（single page web application） 整个应用只有一个…
【原创】Vue 插槽
插槽的作用 让父组件可以向子组件插入 HTML 结构，也是一种组件间的通讯方式，适用于父组件===>子组件。 插槽的分类 默认插槽 // 父组件中 <Category> <div>html …
【原创】Vue 全局事件总线 Global Event Bus
全局事件总线 可以实现任意组件间的通信。 new Vue({ el:'#app', render:h=>h(App), beforeCreate(){ Vue.property.$bus = t…
【原创】Vue 组件化编码流程
编码流程 拆分静态组件：按照功能点拆分，命名不要与 HTML 元素相冲突。 实现动态组件：考虑好数据组件的存放位置，数据是一个组件在用，还是一些组件在用。 1.一个组件在用，放在自身即可。 2.一些组件在用，放在他们共同…
【转载】Vue 组件通信的几种方式
转自：https://blog.csdn.net/piaojiancong/article/details/122861309 组件是需要通信的，在开发中，常用到的通信方式有：vuex、eventBus、以及props与…
【原创】Vue 的生命周期
Vue 的生命周期 什么是生命周期 生命周期又名生命周期回调函数、生命周期函数、生命周期钩子。 Vue 在关键时刻帮我们调用的一些特殊名称的函数。 生命周期函数的名称不可更改，但内容是根据开发者的需求编写的。 生命周期函…
【原创】Vue mixin
mixin 混入 两个组件共享一个配置 plugin Vue.use(pluginName) scoped 限定 style 的作用范围，让样式在局部生效，防止冲突。
【原创】Vue 创建项目
安装 vue-cli npm install -g @vue/cli 切换镜像源：npm config set registry https://registry.npm.taobao.org 创建项目 vue crea…
【转载】el-select默认值设置
转自：https://www.lebang2020.cn/details/2102262gqihrnn.html <el-select v-model="defaultvalue" placeholder="请选择…
【转载】Vue2与Vue3的区别
转自：https://juejin.cn/post/6989061523943473159 响应式原理api的改变 Vue2响应式原理采用的是defineProperty，而vue3选用的是proxy。这两者前者是修改对…
【转载】搭建自己的mock服务器
转自：https://www.jianshu.com/p/01c32ad94bfc 仓库地址：https://gitee.com/sunny123sunny/mockServer Mock.js 0.1 文档：https…
【转载】Vue.js is detected on this page解决方法
转自：https://segmentfault.com/q/1010000008482156 我这边的问题是未在开发环境下运行 转到开发环境下运行，就正常提示Open DevTools and look for the …
【转载】vuex的使用
转自：https://blog.csdn.net/qq_43363884/article/details/95948884 vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有…