非你网

在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦.

本文将介绍一些在 Vue.js 中使用第三方库的方式.

全局变量

在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:

entry.js

window._ = require('lodash');

MyComponent.vue

export default {
  created() {
    console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
  }
}

继续阅读

设想我们的后台是前后端分离的，可以和主站点同域名，也可以不同域名。当前考虑的前端框架有 ant design pro 和 vue element admin。虽然 ant design pro 是阿里的业余产品，ui 漂亮丰富，使用 react 来开发，可前端总体表现上没有 vue element admin 小，前端展示细节问题没处理好，而且一直在更新一直又不好。还是果断选择 vue element admin。

预览页： https://panjiachen.github.io/vue-element-admin

文档页：https://panjiachen.gitee.io/vue-element-admin-site/zh/

这里，使用的和主站点同域名，同环境下。这个时候就得为后台想一个好的路由前缀，暂且这么叫吧。这里使用的是 http://jk.cn/admin。 对，就是 admin，文件放在非根目录下（admin 下），打包编译的时候需要注意，可关注发布相关细节。
继续阅读

laravel 8 提供接口，bootstrap 提供自适应网页， vue-element-admin 提供后台支持。环境 homestead 。

配置站点

cd ~/Homestead
vim Homestead.yam
# 增加站点配置（域名位置映射以及数据库）
    - map: jk.cn
      to: /home/vagrant/code/study/jk.cn/public

    databases:
    - jk

# 修改本地(本地 win10)的 host ，增加映射 win + r -> drivers -> cd etc -> vim hosts
vim hosts
192.168.10.10 jk.cn

好的，域名就定位 jk.cn 了
继续阅读

vue 项目中，有这样一种场景，在相同路由间跳转，根据参数不同来做不同的处理。但是，不会触发常规的刷新。可以这么做。

操作一波

export default {
    data() {
        return {
            id: '',
        }
    },
    watch: {
        '$route': ['routeChange']
    },
    mounted() {
        this.routeChange();
    },
    methods: {
        routeChange() {
            this.id = this.$route.query.id;

            console.log('change id = ', this.id);
        }
    }

这样，就可以达到目的了。

引入 VueRouter，访问多次访问同一个路由，就会报： Error: Avoided redundant navigation to current location: 的错。虽然不影响功能，可不好看呀。

处理

在引入 VueRouter 的地方，处理：

// 解决点击重复路由报错问题
const originalPush = VueRouter.prototype.push
   VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter);
…

关于cocos creator的总结的个人经验，性能优化包体缩小，小游戏的流程接入。这个总结目前只用到的是2D版本的，但是一些思想以及方法与3D也是可以通用的。

本文大概分为两个模块:

1. 是小游戏的本身项目性能优化，项目开发中比较需要注意的点。
2. 是关于微信，QQ，抖音，OPPO等小游戏的一些注意事项。

一．游戏立项开发时注意事项

1.在我们制作一款新游戏的时候，我们需要新建一个项目，（语言的话推荐的是TypeScript ,毕竟智能提示就真香了~）那么我们各种资源怎么分布，怎么分布的对未来项目开发的时候可以条理清晰，当我们开发到后期的时候，不必面对繁杂的各种资源无从下手。

首先，我们建立的项目 无论是代码还是各种资源都在assets下，我们需要在一开始的时候就区分好。
继续阅读

时间久了，官方 node 版本一直在生，而本地的一直停滞不前。也想生到和官方一样的。咋操作呢。

操作一波

# 没错，对，就是安装 n， 这个 node 版本管理工具
npm i -g n

安装好 n 后，就可以使用它了。

常用命令

• n list 列出当前 node 的最新版本
• n stable 安装 node 最新稳定版
• n latest 安装最新版本
• n 11.12.0 安装指定的版本
  继续阅读

直接用 laravel ui 以及 webpack.mix.js 来打包编译纯 vue 项目，也会出现尴尬场面。比如，使用的路由问题，根目录问题以及路由的 rowserHistory 和 hashHistory 选择上，都会出现尴尬情况。如果只是单纯的后台，非根目录项目，还不如独立建立一个文件夹，来组织打包来的爽快。

上一篇，把基本的构建做成了。不过，页面不够完善。现在结合接口，来做一波。尽管如此，这篇没有使用的 vuex 状态管理，也是不完美的。
继续阅读

小程序 swiper 组件，没有禁止手动滑动的属性。可这个功能体验很重要。该怎么实现呢。有人觉得在上边盖一层，这样虽然可以实现禁止滑动了，可和 swiper 里边的交互就不能实现了。这样也不好。还有一种方式，在 swpier-item 上增加拦截事件。

<swiper class="swiper" :duration="600" :disable-touch="false">
    <swiper-item v-for="(item, index) in menus" :key="index" catchtouchmove="catchTouchMove" @touchstart.stop="catchTouchMove" >
        <span>{{item}}</span>
    </swiper-item>
</swiper>

...

# vue methods
catchTouchMove() {
    return false;
},