非你网

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

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 中引入并创建。
继续阅读