非你网

markdown 写技术博客的必须品。这里记录下 vue 中使用 tui-editor 的过程

代码： https://github.com/nhn/tui.editor

preview： https://ui.toast.com/tui-editor

操作一波

npm install tui-editor

安装好后，先定义一个组件，我们在组件里组织 markdown 编辑器相关的逻辑。

那么就在 src/components/ 下吧。

src/components/MarkdownEditor/index.vue
继续阅读

eleme ui 的 el-select 组件会自动清除数据空格，无论空格在左边，右边还是中间。某些场景下，这个让人难以接受， 怎么办了。方法是有的。

操作一波

<el-select v-model="form.id" clearable placeholder="请选择">
    <el-option
           v-for="item in list"
           :key="item.id"
           :label="item.raw"
           v-html="item.label"
           :value="item.id">
     </el-option>
</el-select>

# list 的内容
let list = [
   {
      id: 1,
      label: '        凤舞九天',
      raw: '凤舞九天'
   }
]

这样就可以了。babel 看情况需要，加上 v-html ，用   代替空格。

el-tree 蛮好使用的，就是排版的方向永远都是从上到下。同一级没办法，合向并着展示。那么，想要实现这种效果，就得自己改代码，操作了。

操作一波

vue 中，el-tree 的默认节点和数据如下：
继续阅读

在某些场景下，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);
…