田兴的博客

Yarn是facebook发布的一款取代npm的包管理工具。

先说面试答案：答：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的,单个路由独享的,或者组件级的。全局守卫全局前置守卫 router.beforeEach全局解析守卫router.beforeResolve全局后置钩子router.afterEach全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.b.

1. 下载dayjscnpm install dayjs --save2. 创建untils/formate.jsimport dayjs from 'dayjs'import rTime from 'dayjs/plugin/relativeTime'// 全局使用中文dayjs.locale('zh-cn')// 对时间进行格式化export function formatTime(data = new Date(), type = 'YYYY-MM-DD') { return

在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped1、stylus的样式穿透 使用 >>>备注: 不太推荐使用这种方式,据说有点问题！.wrapper >>> .swiper-pagination-bullet-active { background: #fff}2、sass 和 less 的.

前言：新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty()Vue2双向数据绑定存在的问题：关于对象： Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化，所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的。关于数组： Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] =

一、动画生命周期在进入/离开的过渡中，会有 6 个 class 切换。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter被移除)，在过渡/

1. 确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2. 搭建项目yarn，npm(cnpm) 包管理工具yarn add axios -Scnpm install axios -S-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devDependencies）2.1 从0搭

模板一源码: GitHub亲测有效: 预览地址目前 包含 动态侧边导航栏渲染,面包屑,通知,主题,富文本、可视化等…

前言Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站　点（俄文：Рамблер）开发的　　它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。。安装步骤1、下载Nginx下载地址：http://nginx.org/en/download.html （Nginx官网

github仓库地址：https://search.bilibili.com/all?keyword=%E9%BB%91%E9%A9%ACvue-element开发路线：环境搭建多环境变量axios封装sass使用 （公共变量，minxis(混入)，reset.scss）element-ui 按需引入vuex登陆页校验cookie首页布局...

keep-alive是什么？<keep-alive> 标签：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，取消组件的销毁函数，防止重复渲染DOM。当用它包裹 <router-view> 时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，它自身不会渲染一个 DOM 元素。使用 <keep-alive>...

什么是vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成：分别是：state,actions,mutations,getters,modules由五部分组成state: 数据actions:可以包含异步操作mutations: 唯一可以修改state数据的场所getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、a.

在代码规范的道路上，我们终极目标是：团队中的所有开发人员用一套代码规范规则，并且无需我们花太大的精力去为了格式而格式。希望有一套自动化工具，帮我们检测代码是否规范，如果不规范，则自动能够帮我们按照既定规范格式化。背景：新建一个vue-cli4的项目，初始化的时候没开启eslint，后面想开启的时候不好配置，这里就做个开启eslint和保存时自动修复格式的总结vscode首先安装eslint插件配置vscode的自动保存eslint格式按下：Ctrl+shift+p把下面代码复制

例一、使用混合mixins中的变量来定义一个n行文本溢出隐藏的公用样式。1、创建mixins.scss文件//文本n行溢出隐藏@mixin ellipsisBasic($clamp:2) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $clamp;}以上代码中，$clamp是变量，决定最多显

h5移动端项目模板基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架启动项目git clone https://github.com/teach-tian/h5-vue-cli4.gitcd h5-vue-cli4npm installnpm run serve目录√ Vue-cli4√ 配置多环境变量√ rem 适配方案√ vm 适配方案√ VantUI 组件按需加载√ Sa

今日目标完成项目优化完成项目上线1.项目优化实现步骤：A.生成打包报告，根据报告优化项目B.第三方库启用CDNC.Element-UI组件按需加载D.路由懒加载E.首页内容定制2.添加进度条给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress打开main.js，编写如下代码//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'...../

今日目标完成商品添加完成订单列表完成数据统计展示1.添加商品A.完成图片上传使用upload组件完成图片上传在element.js中引入upload组件，并注册因为upload组件进行图片上传的时候并不是使用axios发送请求所以，我们需要手动为上传图片的请求添加token，即为upload组件添加headers属性//在页面中添加upload组件，并设置对应的事件和属性<el-tab-pane label="商品图片" name="3"> <!-- 商品图片

今日目标完成参数管理推送代码到码云制作商品列表页面制作商品添加页面1.参数管理A.展示动态参数可选项动态参数可选项展示及操作在获取动态参数的方法中进行处理。//将获取到的数据中的attr_vals字符串转换为数组res.data.forEach(item => { item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : [] //添加一个bool值控制文本框的显示或者隐藏 item.inputVis

目录今日目标1.商品分类A.新建分支goods_cateB.创建子级路由D.请求分类数据E.使用插件展示数据F.自定义数据列G.完成分页功能H.完成添加分类I.推送代码2.参数管理A.添加子级组件B.完成组件基本布局C.完成级联选择框D.展示参数E.添加参数F.编辑参数G.删除参数今日目标1.完成商品分类2.完成参数管理1.商品分类A.新建分支goods_cate新建分支goods_cate并推送到码云git checkout -b goods_categit push -u origin

今日目标1.修改用户,删除用户2.推送代码到码云3.权限列表4.角色列表5.分配角色1.修改用户信息A.为用户列表中的修改按钮绑定点击事件B.在页面中添加修改用户对话框，并修改对话框的属性C.根据id查询需要修改的用户数据//展示编辑用户的对话框async showEditDialog(id) { //发送请求根据id获取用户信息 const { data: res } = await this.$http.get('users/' + id) //判断如果添加

vue三大核心：Vue.js 的组件化机制Vue.js 的响应式系统原理Vue.js 中的 Virtual DOM 及 Diff 原理Vue.js概述Vue 是一套用于构建用户界面的渐进式MVVM框架。那怎么理解渐进式呢？渐进式含义：强制主张最少。Vue.js包含了声明式渲染、组件化系统、客户端路由、大规模状态管理、构建工具、数据持久化、跨平台支持等，但在实际开发中，并没有强制要求开发者之后某一特定功能，而是根据需求逐渐扩展。Vue.js的核心库只关心视图渲染，且由于渐进式的特性，Vue

一、前端路由概念通过改变 URL，在不重新请求页面的情况下，更新页面视图。二、vue-Router两种模式更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：Hash — 默认值，利用 URL 中的hash("#") 、history-- 利用URL中的路径（/home）如何设置路由模式const router=new VueRouter({ mode:'history', routes:[...]})m

首先定义的 xx.vue文件在编译之后是一个类，每个地方使用这个组件的时候，相当于对这个类实例化，在实例化的时候执行data，如果不是一个函数的话，每个组件的实例的data都是同一个引用数据，当该组件作为公共组件共享使用，一个地方的data更改，所有的data一起改变。如果data是一个函数，每个实例的data都在闭包当中，就不会各自影响了...

mint-ui 的使用mint-ui官网安装npm install mint-ui -S引入项目全局引入（简单粗暴，一次引入所有组件）main.js// 引入全部组件import Vue from 'vue';import Mint from 'mint-ui';import 'mint-ui/lib/style.css'; // 有可能会报错， 找node_m...

项目名程 ：《移动端商城》技术栈Vue2.0 + vue-router +vuex + axios + mock.js(数据模拟) + ES6 + sass目录结构 src下 components assets 静态资源文件 view 一级路由组件 router 路由 ...

vuex步骤安装 npm install vuex --save创建仓库 import Vue from 'vue' import Vuex from 'vuex' //vuex 注册给vue Vue.use(Vuex); //数据中心 let state={ count:10 } //act...

mvvm概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候...

1 、基本用法 插槽指允许将自定义的组件像普通标签一样插入内容import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` <div :style="style1"> <slot></slot> // 定义插槽 ...

使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，场景如下：<template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> ...

vuex状态持久化1 . 安装npm install vuex-persistedstate2 . 在store.js里import createPersistedState from 'vuex-persistedstate'const state = { user:{},}export default new Vuex.Store({ state, ge...

better-scroll 来做下拉刷新和 上拉加载 特别方便。可直接复制在vue-cli中使用步骤：### 一、下载 better-scroll```npm install better-scroll -S```二、组件中引入<template> <div class="rules"> <p class="drop-down"...

1、安装npm install node-sass --save-devnpm install sass-loader --save-dev2、配置在build中的 webpack.base.conf.js 文件中，找到rules，添加// 在 rules中添加{ test: /\.scss$/, loaders: ['style', 'css', 'sass']}3...

element-ui组件库官网:[http://element-cn.eleme.io/#/zh-CN](http://element-cn.eleme.io/#/zh-CN)官网中有各种组件的使用教程，demo代码，方法，函数等。下面介绍vue-cli项目中如何使用element-ui1 .第一步是下载：npm i element-ui –S2 .引入 Element完整引入在...

Vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想，就是前面所说的单向数据流。下图就是Vuex实现单向数据流的示意图。Vuex状态管理跟使用传统全局变量的不同之处1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。2.不能直接修改Vuex的...

下载swipercnpm install swiper --save引入<script>import Swiper from 'swiper'</script><style>@import 'swiper/dist/css/swiper.css';</style>模板<template><div cla...

vue的一生。人从出生到童年、青年、壮年、不惑，到死亡。会经历不同的时期。vue实例也不例外。每个vue实例从创建到销毁的过程就是vue的一个生命周期，每个阶段都有对应的钩子函数，当我们想在vue的不同时期操作vue实例是，就可以在不同的钩子函数中进行。下图为Vue生命周期示意图：console 打印消息时，可以使用 %c 指定随后的文本样式； %s 可引用参数变量。beforeCre...

一、Vue路由基础用法：1 .安装 npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由：引入并创建组件import BYHome from './components/BYHome.vue'import BYNe...

组件的组织通常一个应用会以一棵嵌套的组件树的形式来组织：如图，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。组件注册组件名组件名应该始终是多个单词的，根组件 App 除外这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的单文件组件的文件名应该要么始终是单词大写开头 (Pascal...

1.计算属性Computed模板内使用js表达式是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --&gt...