website·Indexed 30 days ago
https://lxuan1997.github.io/iCode/A collection of technical notes and guides covering frontend development and tooling, including Vue.js, Pinia, Vue Router, JavaScript, CSS, Git, GitHub Actions, Nginx, ECharts, and Fabric.js integration.
To cache specific pages in a Vue application, use the <keep-alive> component in conjunction with the meta property in the Vue Router configuration. By checking for a custom property (e.g., keepAlive) in $route.meta, you can determine whether a component should be cached or re-rendered.
Critical Warning: Do not place the v-if directive directly on the <keep-alive> component; instead, place it on the <router-view> inside the <keep-alive> wrapper to ensure the caching mechanism functions correctly.
<!-- App.vue or router configuration template -->
<template>
<div
>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
// router.js configuration
const routes = [
{
path: '/cache',
component: CacheComponent,
meta: {
keepAlive: true
}
},
{
path: '/no-cache',
component: NoCacheComponent,
meta: {
keepAlive: false
}
}
]
</script>cherry-pick feature in IntelliJ IDEA when you need to select and move specific commits from one Git branch to another without merging the entire branch. This is particularly useful for collaborative environments where only a subset of changes from a feature branch is required in the target branch.Tree-Shaking is the process of removing dead code (code that will never be executed). For Tree-Shaking to work, modules must use ESM (ES Modules) because the process relies on the static structure of ESM.
Because JavaScript is dynamic, static analysis cannot always determine if a function call has side effects (e.g., modifying a global variable). To explicitly tell build tools like Rollup.js or Webpack that a piece of code is pure and has no side effects, add the /*#__PURE__*/ comment before the function call.
/*#__PURE__*/ someFunction();-webkit-autofill pseudo-class and set -webkit-background-clip: text to remove the default browser background color when an input is autofilled.input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
-webkit-background-clip: text;
}README.md file. The workflow is configured to run daily at 00:30 UTC, install dependencies, execute a Node.js script, and commit the changes back to the main branch.name: Node.js CI
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
schedule:
- cron: '30 0 * * *'
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [ 14.x ]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npm run start --if-present
- name: Commit git
run: |
git config --local user.email 'lxuan2497@gmail.com'
git config --local user.name 'lxuan'
git pull
git add README.md
git commit -m 'update README.md'
- name: Push changes
uses: ad-m/github-push-action@master
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
branch: main| Store Concept | Option API (data) | Composition API (setup) |
|---|---|---|
| state | data | ref() |
| getters | computed | computed() |
| action | methods | function() |
fabric.Image.fromURL to load an image. It is common to calculate an initial scale based on the image width to ensure it fits the desired canvas area.function addImage(url) {
fabric.Image.fromURL(url, (image) => {
const {width} = image
const initialScale = 200 / width
image.set({
scaleX: initialScale,
scaleY: initialScale,
// options
})
canvas.add(image)
canvas.setActiveObject(image)
})
}in:file qualifier in the GitHub search bar.in:file# Initialize local repository
git init
# Add all modified files to the staging area
git add .
# Commit changes with a descriptive message
git commit -m '项目初始化'
# Connect to the remote repository
git remote add <shortname> <url>
# Push the master branch to the remote server
git push -u <shortname> mastertoJSON() and restored using loadFromJSON().// Import data
function dataImport(data) {
canvas.loadFromJSON(data, () => {
// callback
})
}
// Export data
function dataExport() {
return canvas.toJSON()
}function saveAsImage() {
const dataUrl = canvas.toDataURL('image/jpeg')
const link = document.createElement('a')
link.download = 'canvas.png'
link.href = dataUrl
link.click()
}