- ⚡ I'm a Front-end Developer 5y+ and a Freelance Developer 3y+.
veraaaaaliu / blog Goto Github PK
View Code? Open in Web Editor NEW隨手筆記
隨手筆記
待補
外包案子需要安裝套件時的步驟:
1. make exe 進入 container
2. npm install 套件名稱
3. 若有顯示warning,依照說明執行修復指令 ex: npm audit fix --force
4. 以上指令會直接修改 package.json 以及 package-lock.json
5. 打 exit 退出 container,打開 VSCode
6. 修改 package.json 版本,把^刪除(固定版本)
目的為統一 icon 大小,隔線選 24px
<i> tag
)ps. 執行過的心得:開啟路徑管理員面板,試試看哪一種可以達到目的
download 下來後,只需要上傳 json 的版本就好
等要維護的時候,匯入 json,再進行後續處理
如果使用 rem ,你可以透過改變 base,就做到伸縮的效果,這裡的 r 是 root 的意思
如果設計稿有些尺寸沒有出,你可以透過改變 base 就做到改變畫面的過度效果
設定 base
html{
font-size: 14px;
@media screen and (min-width: 821px) {
font-size: 16px;
}
}
// 使用
.logo{
width: 10rem;
padding: 0.135rem;
}
em 是相對於父層來說,你可以在父層定義 base
如果是元件,使用 em,在搬運到其他地方用的時候,可以比較客製化情境
設定 base
header{
font-size: 14px;
@media screen and (min-width: 821px) {
font-size: 16px;
}
}
// 使用
.logo{
width: 10rem;
padding: 0.135rem;
}
px 就是寫死單位大小
像是 padding 如果一直都是 20px,就還是會使用 px,去固定他的間距
為了使根目錄乾淨,.env
可以放進 env 的資料夾
如圖的 .env
分為三個,.env
是全部環境共用的 env 檔案,.env.development
是測試機專用的,.env.production
則是正式機,
但其實還可以多個 .env.staging
,是 for 上測試後但還未發正式機的情況,他可能是 beta-
之類的,也會跟正式和測試有區別。
只在本地有效的變量 .env.local
有時候你可能有一些不應該提交到程式碼倉庫中的變數。
這種情況下你應該使用一個 .env.local 檔案取而代之。本地環境檔案預設會被忽略,且出現在 .gitignore 中。
.local 也可以加在指定模式的環境檔案上,比如 .env.development.local 將會在 development 模式下被載入,且被 git 忽略。
nuxt3 - 1
// nuxt.config.ts
import { resolve } from "path";
const pathResolve = (dir: string) => {
return resolve(__dirname, dir);
}
export default defineNuxtConfig({
vite: {
envDir: pathResolve('./env'),
},
});
nuxt3 - 2
// .env
COOKIE_NAME=__session
COOKIE_SECRET=superdupersecret
// nuxt.config.ts
export default defineNuxtConfig({
runtimeConfig: {
cookieName: process.env.COOKIE_NAME || "__session",
cookieSecret: process.env.COOKIE_SECRET || "secret",
},
});
npm install --save-dev eslint @nuxt/eslint-config
Add .eslintrc.cjs to the root folder of your Nuxt app.
// .eslintrc.cjs
module.exports = {
root: true,
extends: ['@nuxt/eslint-config'],
}
// settings.json
"scripts": {
...
"lint": "eslint .",
"lint:fix": "eslint . --fix",
...
},
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
// .eslintrc.cjs
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'@nuxt/eslint-config',
'@vue/airbnb',
],
parserOptions: {
parser: '@babel/eslint-parser',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vuejs-accessibility/label-has-for': 'off',
'vuejs-accessibility/form-control-has-label': 'off',
},
};
qzone: 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITLE}}&desc={{DESCRIPTION}}&summary={{SUMMARY}}&site={{SOURCE}}&pics={{IMAGE}}',
qq: 'http://connect.qq.com/widget/shareqq/index.html?url={{URL}}&title={{TITLE}}&source={{SOURCE}}&desc={{DESCRIPTION}}&pics={{IMAGE}}&summary="{{SUMMARY}}"',
weibo: 'https://service.weibo.com/share/share.php?url={{URL}}&title={{TITLE}}&pic={{IMAGE}}&appkey={{WEIBOKEY}}',
wechat: 'javascript:',
douban: 'http://shuo.douban.com/!service/share?href={{URL}}&name={{TITLE}}&text={{DESCRIPTION}}&image={{IMAGE}}&starid=0&aid=0&style=11',
linkedin: 'http://www.linkedin.com/shareArticle?mini=true&ro=true&title={{TITLE}}&url={{URL}}&summary={{SUMMARY}}&source={{SOURCE}}&armin=armin',
facebook: 'https://www.facebook.com/sharer/sharer.php?u={{URL}}',
twitter: 'https://twitter.com/intent/tweet?text={{TITLE}}&url={{URL}}&via={{ORIGIN}}',
google: 'https://plus.google.com/share?url={{URL}}'
解方:使用 object-hash 套件
npm install object-hash
但要注意 item 結構不會有完全一樣的情況發生,如果有,還是可以加上 index 確保他的唯一性
有些物件如果需要 cache 住也可以在他上面綁上 :key,目前沒有用但下次可以試試看。
// .vue
import hash from "object-hash";
<SwiperSlide
v-for="item in props.propsData"
:key="hash(item)"
>
v-for 的 key 必須是唯一值,才可以讓 Vue 在更新 v-for 所產生的列表時,能準確更新節點。相反,如果使用 index 作為 key,或者不綁定 key,Vue 就會以該節點的位置作為 key,有機會因為錯誤套用之前渲染過的節點而造成錯誤。
1.設定 local
git config --global user.email [email protected]
find . -name .DS_Store -print0 | xargs -0 git rm -f --ignore-unmatch
如果元素也沒有指定顏色,那它就會從父級去繼承,直到文檔的根結點 html 標籤都還沒有指定顏色,就會應用上瀏覽器預設的顏色。
使用方式:
.container{
color: #3CAADB;
border: 4px solid currentColor;
}
可以在 tool 裡面更好找你的元件,必須要取名
1.
export default {
name: '',
data() {
return {
};
},
.
.
.
<script setup lang="ts">
definePageMeta({
layout: 'default',
name: '',
})
</script>
ps:
interface PageMeta {
validate?: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
redirect?: RouteRecordRedirectOption
name?: string
path?: string
alias?: string | string[]
pageTransition?: boolean | TransitionProps
layoutTransition?: boolean | TransitionProps
viewTransition?: boolean | 'always'
key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
keepalive?: boolean | KeepAliveProps
layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
[key: string]: unknown
}
nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
})
beforeCreate 和 created 在 server side 和 client side 都會跑,可理解為從 beforeMount 開始就正式進入 client side render 的部分
如果要寫在 beforeCreate 和 created 應該要區分好是 server side 還是 client side 要跑的
在 CSS 中使用 @font-face 規則引入字型檔案時,如果字型檔案不是從同一個域載入,瀏覽器會進行 CORS 檢查。
如果伺服器沒有正確配置 CORS 標頭,或者沒有允許來自其他域的字型檔案請求,瀏覽器就會拒絕載入字型檔案,並在控制台中顯示 CORS 錯誤訊息。
讓他形成閉包,互不影響
;(function(window, document, undefined){
.
.
.
})(window, document)
;(function(window, document, undefined){ ... })(window, document);
這是一個 IIFE,用分號開始,以確保在連接其他可能存在的程式碼時不會造成問題。
這個函式接受三個參數:window、document、以及undefined(這裡 undefined 是參數名稱,但實際上傳遞的值是 undefined)。
這些參數是為了防止在程式碼執行期間被重新定義。
ex:
let a = items.value[0].item.data
let b = a.name
<script setup>
defineOptions({
name: 'CustomName',
inheritAttrs: false,
customOptions: {},
})
</script>
<component :is="data[active]" />
的寫法const active = ref('tab1');
const data = ref({
'tab1': PageAboutTabContent1,
'tab2': PageAboutTabContent2,
'tab3': PageAboutTabContent3,
'tab4': PageAboutTabContent4,
});
<component :is="data[active]" />
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.