Fork me on GitHub

发表于 | 热度 ℃
| 字数统计 137 | 阅读时长 1

git ssh 访问，只要把 ssh 公匙放到 git server 端就可以了，不需要输入账号密码

但有些情况下，不能使用 ssh 方式，比如: 万恶的公司网限制了 ssh 端口

阅读全文 »

发表于 | 热度 ℃
| 字数统计 141 | 阅读时长 1

vue 配置了 alias，如:

1
2
3
4
5
6
chainWebpack: config => {
  config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
  config.resolve.alias.set('@img', path.resolve(__dirname, 'src/assets/images'))
  config.resolve.alias.set('@js', path.resolve(__dirname, 'src/assets/js'))
  ...
}

这样在 import XXX from "@js/xxx" 后，没有代码提示了

阅读全文 »

发表于 | 热度 ℃
| 字数统计 124 | 阅读时长 1

客户端回调页面

1
2
3
4
5
6
7
8
9
10
接口回调方法名由 js 指定，类似 jsonp，否则多次连续调用同一接口只能串行
example:
web->client
Client.getUserInfo({
  callbackName : "xxx",
});
client->web
window.xxx({
  vc : 10001,
});
阅读全文 »

发表于 | 热度 ℃
| 字数统计 61 | 阅读时长 1

PHP 实现，在构造函数中:

1
2
3
4
5
6
7
8
9
10
// host 白名单
$hostList = [
  'http://xxx.xxx.xxx',
  'http://localhost:8080',
];

if( !empty($_SERVER['HTTP_ORIGIN']) && in_array($_SERVER['HTTP_ORIGIN'], $hostList)){
  header('Access-Control-Allow-Origin:'.$_SERVER['HTTP_ORIGIN']);
  header('Access-Control-Allow-Credentials:true');
}

发表于 | 热度 ℃
| 字数统计 212 | 阅读时长 1

vue-cli 默认 babel-loader 忽略 node_modules
当某个依赖(如 vue-baberrage)存在 ES6 语法时，vue 官方给出的解决方案是 transpileDependencies

1
2
3
4
5
6
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

vue.config.js
module.exports = {
  transpileDependencies : ['vue-baberrage'],   // 需要转译的依赖数组
}

但自测 transpileDependencies 无效，解决办法:

阅读全文 »

发表于 | 热度 ℃
| 字数统计 107 | 阅读时长 1

moment 体积较大，但一般只使用到几种语言，应该过滤一下

vue cli 的 vue.config.js

1
2
3
4
5
6
7
8
9
configureWebpack: config => {
  config.plugins.push(
    // 提取 monent 有效部分，减小体积。压缩前 611k->163k
    // en-gb 英国 en-us 美国(默认值) vi 越南 zh-cn 中国
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /^\.\/(zh-cn|vi)$/i)
  )
}
注: 在 moment locale 目录下并没有 en-us，默认为 en-us
moment 的这一设计也遭到不少 diss

发表于 | 热度 ℃
| 字数统计 187 | 阅读时长 1

使用vue-i18n

1
npm install vue-i18n --save

配置 main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// i18n，国际化
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': require('@/assets/languages/zh.json'),
    'en': require('@/assets/languages/en.json')
  }
});

let app = new Vue({
	router,
  store,
  // i18n，国际化
  i18n,
	render: h => h(App)
}).$mount('#app');

@/assets/languages/zh.json

1
2
3
4
5
6
7
{
  "common" : {
    "app" : {
      "name" : "app 名称"
    }
  }
}

@/assets/languages/en.json

1
2
3
4
5
6
7
{
  "common" : {
    "app" : {
      "name" : "app name"
    }
  }
}

xxx.vue

1
2
3
4
template:
{{$t("common.app.name")}}
js:
this.$t("common.app.name")

切换语言

1
this.$i18n.locale = 'en';

注:

1
2
1. 应该根据用户的地域设置默认语言
2. 用户切换语言后，应该种 cookie

发表于 | 热度 ℃
| 字数统计 76 | 阅读时长 1

vue.config.js

1
2
3
4
5
6
7
8
9
module.exports = {
  ...
  chainWebpack: config => {
    // images alias
    config.resolve.alias.set('@img', path.resolve(__dirname, 'src/assets/images'))
    ...
  },
  ...
}

在 js 中使用图片

1
2
3
require('@img/ksp_72.png')
eg: 
:style="'background:url(' + require('@img/ksp_72.png') + ')'"

在 scss 中使用图片

1
2
3
'~@img/ksp_72.png' 
eg: 
background: url(~@img/ksp_72.png)