Write the Code. Change the World.

分类目录
8月 13

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);
        }
    }

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

8月 12

引入 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);
…
8月 06

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

本文大概分为两个模块:

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

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

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

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

8月 06

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

操作一波

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

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

常用命令

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

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

8月 04

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

7月 29

小程序 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;
},
7月 28

项目弄好了,就要做发布的准备。主要是部署的非根目录的配置。

这里,配置在根目录下的 admin 目录。

修改 config/config.ts,增加下边的配置:

  …
  base: '/admin/',
  outputPath: '../../public/admin',
  publicPath: '/admin/',
  manifest: {
    basePath: '/admin/',
  },

修改 nginx, 增加下边的配置:

    location /admin  {
        index index.html index.htm;
        try_files $uri $uri/ /admin/index.html;
    }
7月 28

linux 下使用 ant design pro 安装依赖的时候,会出现 /bin/sh: 1: umi: not found 问题。需要更改编译模式。

cd /bin

ls -lh sh

# 结果 lrwxrwxrwx 1 root root 4 Jan 21  2020 sh -> dash

下边将 dash 改成 bash。

sudo dpkg-reconfigure dash

# 选择 no 保存即可。

# 然后再执行 ls -lh sh 发现结果是

lrwxrwxrwx 1 root root 4 Jul 28 11:09 sh -> bash

好了,就这样了。

7月 24

还是那句话,喜欢简洁,有强迫症,就是想弄。那么,从路由和注册登录开始。先去掉其他路由,仅仅保存注册登录和welcome。去掉其他页面,从零开始。

修改路由

编辑 /config/config.ts,修改路由配置如下:

  routes: [
    {
      path: '/user',
      layout: false,
      routes: [
        {
          name: 'login',
          path: '/user/login',
          component: './user/auth',
        },
        {
          name: 'register',
          path: '/user/register',
          component: './user/auth',
        }
      ],
    },
    {
      path: '/welcome',
      name: 'welcome',
      icon: 'smile',
      component: './Welcome',
    },
    {
      path: '/',
      redirect: '/welcome',
    },
    {
      component: './404',
    },
  ],

注册和路由都进同一个 component, 然后根据路由进行不同的渲染。
继续阅读