笨脑壳笔记一

1. less中clac解析不正确

   div {
       height: calc(~"100% - 30px");
   }
   

2. 隐藏input中的checkBox的默认样式

   input[type='checkbox'] {
       -webkit-appearance: none;
   }

3. 把GWDTAssistant部署到公网遇到的问题

   1. 由于是静态页面，所以考虑用百度的BAE。用php可以直接路径匹配，node不熟悉所以没用。用php可以直接按照文件夹里的路径直接在地址栏打出即可。
   2. 然后build项目，直接npm run compile生成的html中引用的src都是10.1.50.30：3000开头，所以应该先修改路径的配置。通过尝试和查资料，是在webpack的publicPath配置：

   config.output = {
     filename   : `[name].[${project.compiler_hash_type}].js`,
     path       : project.paths.dist(),
     publicPath : project.compiler_public_path
   }

   而project.compiler_public_path则是在config/environments.config.js里配置：

   module.exports = {
     development : (config) => ({
       compiler_public_path : `http://${config.server_host}:${config.server_port}/`
     }),
   
     // ======================================================
     // Overrides when NODE_ENV === 'production'
     // ======================================================
     production : (config) => ({
       // 这里配置
       compiler_public_path     : 'http://kangkai.duapp.com/gw/',
       compiler_fail_on_warning : false,
       compiler_hash_type       : 'chunkhash',
       compiler_devtool         : 'hidden-source-map',
       compiler_stats           : {
         chunks       : true,
         chunkModules : true,
         colors       : true
       }
     })
   }

   注意需要配置环境变量为生产export NODE.ENV='production'然后再npm run compile

   1. 当把编译后的文件放在bae的gw二级目录中（http://kangkai.duapp.com/gw），打开网站发现react-router并没有匹配成功，然后查资料发现是BrowserRouter的问题，继续查阅react-router4的文档，尝试添加basenamne='gw'然后发现成功。

   // The base URL for all locations. If your app is served from a  sub-directory on your server, you’ll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.
   
   <BrowserRouter basename="/calendar"/>
   <Link to="/today"/> // renders <a href="/calendar/today">

4. react中在componentDidMount中拿不到某个元素的宽高

   // 问题代码
   componentDidMount () {
       const container = this.refs.arc
       const width = container.offsetWidth
       const height = container.offsetHeight
       console.log(width, height, container)
     }
   // 延迟
   componentDidMount () {
       const container = this.refs.arc
       setTimeout(function () {
         const width = container.offsetWidth
         const height = container.offsetHeight
         console.log(width, height, container)
       }, 300)
     }

5. d3.json的问题

   d3.json('data.json', function () {...})

   d3.json是==rest请求==，所以路径是相对于URL的。而不是相对于某个js文件的路径。