觀念css(未完)

what is global in css : https://www.gatsbyjs.com/docs/global-css/  看到Adding global styles without a layout component

should i use css modules: https://medium.com/@gajus/stop-using-css-in-javascript-for-web-development-fa32fb873dcc 未看

從Chrome源碼看瀏覽器如何計算CSS (不小心找到的東西，可以看看，未看)

 https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/744434/#outline__2_3

CSS-Modules(好像跟現在的專案還有關係呢), PostCSS (未完)

 http://www.ruanyifeng.com/blog/2016/06/css_modules.html

https://github.com/postcss/autoprefixer

https://github.com/postcss/postcss

https://cythilya.github.io/2018/08/10/postcss/

未看

https://github.com/postcss/autoprefixer

https://github.com/postcss/postcss

https://cythilya.github.io/2018/08/10/postcss/

定制哈希类名：

CSS Modules: localIdentName=[path][name]---[local]---[hash:base64:5]

呈現: <h1 class="demo03-components-App---title---XSDrm">Hello World</h1>

意思是: 資料夾位置 /demo03/components 下的App.vue---local css name 為title---hash取5個字

v.s.

現行專案: localIdentName: "[name]__[local]__[hash:base64:5]"

呈現: <div class="HeaderSearchDropDownMenu__headerSearchDropDownMenu__TfL4d>Hello World</div>

意思是: HeaderSearchDropDownMenu.vue__local css name 為headerSearchDropDownMenu__hash取5個字

學習概要：

1. CSS-Modules
2. 哈希字符串
3. composes
4. :global
   :local
5. PostCSS -- 後處理器
   step1: npm install postcss postcss-loader autoprefixer precss --save-dev
   step2: 在 Webpack 設定檔加入 postcss-loader

        step3: 在 PostCSS 設定檔（postcss.config.js）加入需要用到的套件 precss 和 autoprefixer。小提醒，擴充功能都要列在 PostCSS 設定檔中才能使用噢。

        其功能由所掛的擴充而定，可加入的plugin功能有：

• autoprefixer : 加入各家瀏覽器的前綴詞（prefix），例如：-webkit-、-moz-。
• 將先進的功能轉為目前主流瀏覽器所能支援的語法。
• 語法檢查和報錯。
• 支援 Grid System。
• precss : 使用類似 SASS 的功能，例如：變數。
• postcss-modules：產生 CSS Modules / Scoped CSS
  
  因為plugin體積小，所以處理速度較預處理器(SASS，LESS等)快。而缺點就是必須自己研究和測試，找出符合需求、仍在維護的 plugin，這是比較花時間的。

    6. Precss
        https://www.jianshu.com/p/cc2386eb9a33

    7. stylelint
        https://stylelint.io/
        https://dotblogs.com.tw/explooosion/2018/09/30/141005

GIT本地删除除master以外所有分支

 

主要命令

git branch | grep -v "master" | xargs git branch -D


注意点


 
执行前需要切换到master分支执行
当前分支未做修改

增强命令

git stash && git checkout master && git branch | grep -v "master" | xargs git branch -D

reference: http://www.huuinn.com/archives/234

報錯: grep: 無法辨識

原因: vscode沒辦法使用Linux指令

解法: 開Cygwin再輸入指令

gitlens: git vscode extension

 https://medium.com/@aar0nTw/%E5%BC%B7%E5%A4%A7%E7%9A%84-git-extension-gitlens-vs-code-extension-how-to-editor-%E7%B7%A8%E8%BC%AF%E8%80%85-5-e1800d9d87bc

nuxt-i18n 的 numberFormat 寫在另一支檔案，在import或require進去都會報錯-- Cannot find module './locale-settings.js' (未解)

 3|nuxt-stage  |  FATAL  Cannot find module './locale-settings.js'

3|nuxt-stage  | Require stack:
3|nuxt-stage  | - /data/wwwroot/officalsite_nuxt/nuxt.config.js
3|nuxt-stage  | - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/config/dist/config.js
3|nuxt-stage  | - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/cli/dist/cli-index.js
3|nuxt-stage  | - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/cli/dist/cli.js
3|nuxt-stage  | - /data/wwwroot/officalsite_nuxt/node_modules/nuxt/bin/nuxt.js
3|nuxt-stage  |   Error: Cannot find module './locale-settings.js'
3|nuxt-stage  |   Require stack:
3|nuxt-stage  |   - nuxt.config.js
3|nuxt-stage  |   - node_modules/@nuxt/config/dist/config.js
3|nuxt-stage  |   - node_modules/@nuxt/cli/dist/cli-index.js
3|nuxt-stage  |   - node_modules/@nuxt/cli/dist/cli.js
3|nuxt-stage  |   - node_modules/nuxt/bin/nuxt.js
3|nuxt-stage  |   at Object.<anonymous> (nuxt.config.js:1)
3|nuxt-stage  |   at Generator.next (<anonymous>)
3|nuxt-stage  |    ╭───────────────────────────────────────────────────────────────────────────────╮
3|nuxt-stage  |    │                                                                               │
3|nuxt-stage  |    │   ✖ Nuxt Fatal Error                                                          │
3|nuxt-stage  |    │                                                                               │
3|nuxt-stage  |    │   Error: Cannot find module './locale-settings.js'                            │
3|nuxt-stage  |    │   Require stack:                                                              │
3|nuxt-stage  |    │   - /data/wwwroot/officalsite_nuxt/nuxt.config.js                             │
3|nuxt-stage  |    │   - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/config/dist/config.js   │
3|nuxt-stage  |    │   - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/cli/dist/cli-index.js   │
3|nuxt-stage  |    │   - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/cli/dist/cli.js         │
3|nuxt-stage  |    │   - /data/wwwroot/officalsite_nuxt/node_modules/nuxt/bin/nuxt.js              │
3|nuxt-stage  |    │                                                                               │
3|nuxt-stage  |    ╰───────────────────────────────────────────────────────────────────────────────╯
3|nuxt-stage  | npm ERR! code ELIFECYCLE
3|nuxt-stage  | npm ERR! errno 1
3|nuxt-stage  | npm
3|nuxt-stage  |  ERR! officalsite@1.0.0 stage: `PORT=3333 node ./node_modules/nuxt/bin/nuxt.js start`
3|nuxt-stage  | npm ERR! Exit status 1
3|nuxt-stage  | npm
3|nuxt-stage  |  ERR! 
3|nuxt-stage  | npm ERR! Failed at the officalsite@1.0.0 stage script.
3|nuxt-stage  | npm ERR!
3|nuxt-stage  |  This is probably not a problem with npm. There is likely additional logging output above.

declare module

npm install vue-click-outside

但要用在typescript裡會有紅線，如下：

確定它沒有@types/的檔案，須自己建一個.d.ts的檔案並且宣告，如下

https://www.npmjs.com/package/vue-click-outside

(maybe: 可以思考下 -- https://juejin.im/post/6844903882309500942 )