非你网

先看一个漂亮的 点击看漂亮的

UI

操作一波

编辑 resources/sass/_variables.scss,增加下边的定义

// 定义主题颜色
$primary:       #9c27b0 !default;
$success:       #4caf50 !default;
$info:          #00bcd4 !default;
$warning:       #ff9800 !default;
$danger:        #f44336 !default;

// 修改点击按钮的时候，按钮周围的边框，好难看，强迫症要干掉。这样会把input的边框也干掉了，不好。
$input-btn-focus-width:       0 !default;
$input-btn-focus-box-shadow:  none !default;

然后，执行编译打包。

yarn run dev

打包好后，刷新登录页面，是不是发现 input框，按钮都变了呀。

下一步

主题颜色也变了，那么下一步去搞搞在 blade 中使用 vue 组件的问题。虽然大多时候不需要 vue，要不就用纯 vue 了。可偶尔某些组件用 vue 还是蛮好的。

在某些场景下，socket 是必须要使用的。vue element admin 中，自己所做的后台中，就想使用这玩意。那么，就 websocket。

websocket 的客户端创建使用是很简单，有些问题却必须要面对。

1. 怎么做断线重连。（socket.io 自身就实现了，可这里不用它）
2. 怎么解决在整个项目中的数据来回。
3. 在什么时候创建 websocket 连接。

断线重连是自己手动去建立一个心跳的方式来实现。socket.io 中叫 ping pong。这里就自定义的搞一搞。数据来回，使用全局事件的方式来处理。无论哪种语言，事件这种方式从来都不会缺失。在什么时候创建连接呢，因为这里针对的是登录后的一些功能，所以最好在登录成功后只调用创建一次。我们可以在 permission.js 中引入并创建。
继续阅读

在常规情况下，去定义组件的时候，只需要用到父子组件通讯即可。这样比较好实现。有时候，也会用到任意组件间的通讯，这个时候自定义组件的方式就有用了。不弄那么多，只弄一个。

先看常见父子通讯

# 使用组件的地方
<sky @changeColor="changeColor" />

methods: {
    changeColor(value) {

    }
}
# 组件内部，仅此而已。子组件中的数据，就可以被父组件收到了
this.$emit('changeColor', 'blue')

继续阅读

在诸多 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 安装指定的版本
  继续阅读