在某些场景下，socket 是必须要使用的。vue element admin 中，自己所做的后台中，就想使用这玩意。那么，就 websocket。
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..');
}
}
laravel8 + bootstrap + vue-element-admin（8）调整 laravel bootstrap 登录注册脚手架
先看路由，我们会看到在 routes/web.php 中增加了 Auth::routes(); 这个和以前不一样了。以前在 vendor/laravel/framework/src/Illuminate/Routing/Router.php 中，现在却在 vendor/laravel/ui/src/AuthRouteMethods.php 中，如下：
composer require laravel/ui
# 生成基本脚手架
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
# 生成 登录/注册 脚手架
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth
这里，我们使用 php artisan ui bootstrap --auth 生成登录注册脚手架，后边根据需要改
# 安装依赖包
yarn --no-bin-links
# 跑
yarn run dev
laravel8 + bootstrap + vue-element-admin（6）删除 vue-element-admin 初始化带入的不需要的模板等
安装 vue element admin 的时候，默认带入了很多路由，模板，mock，api 等。如果从 0 开始，就需要去掉这些多余的东西。
src/api 删除下边的文件，只留下 role.js 和 user.js
.
├── role.js
└── user.js
src/components 组件暂不做处理，随着项目发展，某些组件还是很有用的。
src/router/modules/ 全删掉（如果需要，可后边对比补充）
src/router/index.js 修改成如下（其实就是去掉那些不想要的）
1
如果说，两个人在一起的际遇有很多种，那不在一起的理由里“性格不合”一定排在首位。
曾看过街头随机采访情侣分手的视频，百分之九十的回答都是：
“还是性格原因吧。我们不合适。”
“他太大男子主义了，我受不了。”
“她脾气不好，要求太多，我太累了。”
或许，在我们的感情经历里，多多少少都遇到类似的经历。
本来各方面条件都还不错的对象，因为性格，最终还是因无法长久和谐的相处而分手;再多的怦然心动，也抗衡不了性格不合的互相消耗和折磨。
那是不是我们每个人在遇到性格合适的人之前，都会面临争吵、冷战、over的结局呢?
还是说这个世界上真的存在俩人一开始就十分合拍，惺惺相惜的人呢?
用我的亲身经历来回答，是有的。
这里的登录和传统的登录有一点不一样，传统的登录提交账号密码，正确就可以了。这里得先请求
/sanctum/csrf-cookie,再进行登录请求。
在 vue element admin 目录中，先修改前端页面。
src/api/user.js 中增加：
export function csrfCookie() {
return request({
url: '/sanctum/csrf-cookie',
method: 'get'
})
}
为了测试， 我们需要写入一些用户信息。
为了方便数据的丰满性，这里给用户增加了昵称，性别，头像，签名等字段，更新后的迁移数据是这样的。
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('account')->unique();
$table->string('password');
$table->string('nickname', 32)->comment('昵称');
$table->unsignedTinyInteger('gender')->default(3)->comment('性别 1 男 2 女 3 未知');
$table->string('avatar', 128)->nullable();
$table->string('email')->unique();
$table->string('signature')->nullable();
$table->rememberToken();
$table->timestamp('email_verified_at')->nullable();
$table->timestamps();
});
这里将 name 改成 account 了，email 后移了。使用 account 和 password 登录。而非 email。当然，account 你可以和 email 的数据一样。我个人喜好用手机作为 account。
laravel8 + bootstrap + vue-element-admin（4）安装 Sanctum 并添加路由配置
身份验证使用 Laravel Sanctum
https://learnku.com/docs/laravel/8.x/sanctum/9421
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate