crossjs.com

a Boilerplate for mobile SPAs

Check out Demonstrations for UI Components

关键技术

• Vue
  • Vuex
  • Router
• Webpack
• Babel
• PostCSS
• Karma
  • Mocha
• Nightwatch

使用 koa 过程中，碰到几次 koa-send 抛出如下错误：

Malicious Path

根本原因是 node v5.7.0 的 path.parse 有 bug：

path.parse('/path/to/file').root
// 期望: '/'
// 实际: ''

相关：

• Should the path be normalized? #51
• url.parse result differences in 5.7.x to 5.6.x #5393

使用 vue-loader 的 scoped css 有两点要注意：

1. 不要使用 @import；
2. 如果 A 组件包含 B 组件，A 的 scoped css 不应该试图定义 B 的内部元素的样式。

Q: 可是为什么呢？
A: 不解释（自己动手重现，更可加深理解）。

以下情况会导致 IE 下 @font-face 无效：
Web Font 文件请求的 headers 里包含 Pragma: no-cache 等会导致 IE 缓存失效的配置项。

相关：

• https://romixch.wordpress.com/2014/10/03/font-face-not-working-with-internet-explorer-and-http-header-pragmano-cache/
• http://stackoverflow.com/questions/13415073/on-ie-css-font-face-works-only-when-navigating-through-inner-links

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

大白话就是：通过适当的插件，你只需要写标准（现在的标准、未来的标准、或你期望的标准）的样式即可

一些插件

• autoprefixer
• import
• nested
• mixins
• sprites
• …more

在 webpack 中使用

webpackConfig = {
  module: {
    loaders: [
      test: /\.css$/,
      loaders: 'style!css?sourceMap!postcss'
  },
  postcss: [
    require('postcss-import'),
    require('postcss-nested'),
    require('postcss-mixins'),
    require('postcss-sprites')['default']({...}),
    ...
  ]
}