NODE_ENV不是内部或外部命令
在很多前端项目中都需要配置node的环境变量，通常在package.json的scripts命令内容和webpack配置文件中可以看到NODE_ENV这个变量，值一般为production或者product，也有人简写为dev或prod。
环境win10+powershell
我在package.json文件中这样写的
12345"scripts": { "build": "NODE_ENV=production webpack", "dev": "NODE_ENV=development node dev-server.js"， "start": "NODE_ENV=production pm2 start ./server/index.js" }
原因事实上，以上两条脚本都合并两条或者多条命令，这种操作在powershell中不被支持，在cmd中也不被支持，这是Mac中bash或Linux的shell中的 ...
定时器的使用与销毁问题
最近翻阅文档发现在处理边界情况中的程序化的事件侦听器中有一个较好的写法。除了官网中的例子，是否也可以用于定时器中呢？
我在A页面写一个定时器，让他每秒钟打印一个1，然后跳转到b页面，并且如果再跳转回A页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。上图：
解决方案1：首先在data函数里面进行定义定时器名称：
12345data() { return { timer: null, };},
然后这样使用定时器：
12345count() { this.timer = setInterval(() => { console.log(1); }, 1000);}
最后在beforeDestroy()生命周期内清除定时器：
12345678910beforeDestroy() { console.log("定时器即将销毁"); clearInterval(this.timer); this.timer = ...
Vue实现返回顶部
今天我们来实现一个返回顶部的一个效果，其实某些组件库有可能会有这个组件的，但是我们也可以手动实现。本文章出自vue-element-admin后台管理项目中，因为感觉很实用，所以记录下来。源码传送门
这里是写成一个组件的形式，方便需要用到的时候可直接引用。
用到的一个知识点是vue的内置组件transition，为的就是从底部到顶部的一个过渡，不会显得这么生硬，默认是fade。可以自定义传，但是记得书写对应的动画样式喔
123456props: { transitionName: { type: String, default: 'fade' }}
我们先实现组件代码，暂且命名为/components/index.vue, 如下：
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 ...
Vue过渡
<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。
被transition标签包裹的元素在其显示隐藏时,六个不同的阶段会自动添加6个class名
元素进入的第一帧 [transition name 属性]-enter元素进入中 [transition name 属性]-enter-active元素进入的最后一帧 [transition name 属性]-enter-to元素离开的第一帧 [transition name 属性]-leave元素离开中 [transition name 属性]-leave-active元素离开的最后一帧 [transition name 属性]-leave-to
这里我们用一个demo来实现一些基本的使用，我们这里就不使用单文件来演示了。
123456789101112131415161718192021222324252627282 ...
辅助函数mapMutations解析
介绍mapMutations是Vuex的mutation的辅助函数，用于在组件中映射mutation内的方法，以便在该组件中直接使用mutation里的方法 (语法糖)
使用步骤1.在组件中导入vuex中的mapMutations1import { mapMutations } from 'vuex'
2.在组件中导入mutation里的方法名1234...mapMutations([ //使用es6的拓展运算符 'INCREASE_SHOPCART', 'DECREASE_SHOPCART' ])
这一步，是将mutation里的函数映射到组件里，在组件里 ：
1this.INCREASE_SHOPCART === this.$store.commit('INCREASE_SHOPCART') //true
在有参数的情况下，mutation的state默认参数可以省略 ：
1this.INCREASE_SHOPCART(id) == ...
commit和dispatch的区别及用法
Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
代码演示首先，我们假设state有以下数据
123456//类似组件data, 定义组件公共数据 state: { book: 'jQuery', }
然后我们要在组价中修改book, 现在mutations中定义修改的方法
123456789//类似组件methods, 定义修改state的方法mutations: { modifyBook(state, data) { // 当有提交载荷的时候就修改传入的值，否则默认修改为React state.book = data || 'React'; }},
组件中调用，提醒： mutations 和 actions 都要在组件的methods中使用 ，而state和getters都是在组件中的computed中使用
123 ...
模块化的使用
前言上一篇文章我们简单介绍了一下 Vuex 的简单使用，但随之也会产生一个问题。由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。尤其是在多人开发中会显得特别不便利。
介绍为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。深入学习可能还是要去看官方文档
语法：
在Vuex的配置中通过modules配置不同的模块，modules中模块的配置语法是模块名：{state，getters，mutations，action，modules}
1234567891011121314151617181920212223242526272829303132333435import Vue from 'vue'import Vuex from 'vuex'import commend from './commend'Vue ...
Vuex的基本使用
介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。官方文档。
注意: 并不所项目都需要Vuex,只有vue没有办法解决情况下或者是存储一些被认为是Vue应用中全局变量数据域时你才需要使用Vuex。滥用Vuex会导致全局数据污染不利于维护等问题。
VueX配置123456789101112//文件路径 /src/store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) // 将vuex 的提供的配置原型方法注册到 Vue中export default new Vuex.Store({ // 实例化 Vuex.Store对象 并公开出去 state: { value: '存放在vuex store中的全局状态' }})
123456789101112// main ...
Vue-Router的routes配置
介绍在使用vue-router的项目中,实例化VueRouter是其配置选项routes该选项指定路由与视图的组件的关系或者路由与其他路由的关系，Router配置选项中是其中最重要的配置。
routes中对象属性123456789101112131415interface RouteConfig = { path: string, component?: Component, name?: string, // 命名路由 *components?: { [name: string]: Component }, // 命名视图组件 https://router.vuejs.org/zh/guide/essentials/named-views.html#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE redirect?: string | Location | Function, props?: boolean | Object | Function, alias?: string ...
Vue-Router安装与使用
介绍Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
安装1.在已有Vue项目中手动安装vue-router
1npm install --save vue-router
使用vue-cli创建自带vue-router的新项目空格选择/取消 a全选 i反选
123456789101112131415161718192021vue create project_name#Vue 会询问你使用哪种配置Default ([Vue 2] babel, eslint)Default (Vue 3 Preview) ([Vue 3] babel, eslint)Manually select features #请选择 Manually select features,Vue会询问你当前项目需要哪些配置Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i& ...
微信公众号
公众号
学习与分享前端知识，一起学习，一起成长叭。