Vue中使用js-pinyin包实现城市按首字母排序

最近做项目中，碰到了点小麻烦：

后台从接口请求回来的城市相关的数据只有城市名称，没有排序，铺页面的时候要排序就很麻烦；

面向百度编程时候找到了一个包，用它来将字符串转成拼音，就可以通过字符串截取取出拼音首字母，这样就可以进行首字母排序了。

这个包的名字叫js-pinyin。

• npm下载

  npm i js-pinyin

• 下载完了之后在main.js中引入

  import pinyin from 'js-pinyin'

这样使用环境就配置好了。

当在组件中使用时，要先在export default前引用node_modules/js-pinyin中的index.js文件：

import pinyin from '../../../node_modules/js-pinyin/index'

注意node_modules/js-pinyin的文件路径

因为我要在页面加载时就使用这个需要排序的数据，所以我将代码写入mounted()中。

在使用真实数据前，我们先写一个小demo：

在组件中使用时，要添加

let pinyin = require('js-pinyin'