分类前端技术下的文章

2024-08-23

要在当前页面内直接预览JS、CSS和HTML内容，可以使用iframe和blob URL。以下是实现这一功能的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedded Content Preview</title>
    <script>
        function previewContent(jsCode, cssCode, htmlCode) {
            // 创建一个新的Blob对象，类型为HTML文件
            const blob = new Blob([`<!DOCTYPE html><html><head><style>${cssCode}</style></head><body>${htmlCode}</body><script>${jsCode}</script>`], { type: 'text/html' });
            // 创建一个URL指向这个Blob对象
            const url = URL.createObjectURL(blob);
 
            // 创建或获取一个iframe，并导航到新创建的URL
            let iframe = document.getElementById('previewIframe');
            if (!iframe) {
                iframe = document.createElement('iframe');
                iframe.id = 'previewIframe';
                iframe.style = 'width:100%;height:500px;';
                document.body.appendChild(iframe);
            }
            iframe.src = url;
        }
    </script>
</head>
<body>
    <textarea id="jsCode" placeholder="JavaScript Code"></textarea>
    <textarea id="cssCode" placeholder="CSS Code"></textarea>
    <textarea id="htmlCode" placeholder="HTML Code"></textarea>
    <button onclick="previewContent(document.getElementById('jsCode').value, document.getElementById('cssCode').value, document.getElementById('htmlCode').value)">Preview</button>
    <iframe id="previewIframe"></iframe>
</body>
</html>

在这个示例中，用户可以在文本区域中输入JS、CSS和HTML代码，点击“Preview”按钮后，这些代码将被打包进一个Blob URL，然后在页面中的iframe内预览。这样可以避免任何跨域问题，因为所有的代码都在同一个源中。

- 阅读更多 -

[TS初学]无法重新声明块范围变量

System

2024-08-23

所有,typescript

报错解释：

在TypeScript中，如果你尝试在同一个块范围内（例如在一个函数体内或者一个for循环体内）重新声明一个变量，而这个变量已经被声明过，你会遇到这个错误。这是因为块范围变量应当具有唯一性，重复声明会导致歧义和错误。

解决方法：

确保你没有在同一个块范围内重复声明同一个变量。
如果你需要重新赋值给一个变量，而这个变量已经在外层作用域被声明过，你可以使用let或const来声明它，这样它就会有块级作用域。
如果你在同一个作用域内意外地声明了两个同名的变量，请重新考虑你的命名，确保每个变量都有一个独特的标识符。

示例代码：




function example() {
    let x = 10; // 正确声明
    let x = 20; // 报错：无法重新声明块范围变量x
 
    // 正确做法：
    // 1. 如果需要重新赋值，使用let或const
    let y = 10;
    y = 20; // 正确，因为y在块级作用域内
 
    // 2. 修改变量名
    let z = 10;
    let zz = 20; // 正确，因为使用了不同的变量名
}

- 阅读更多 -

vue3 ts 使用axios

System

2024-08-23

所有,typescript

在Vue 3和TypeScript中使用Axios的基本步骤如下：

安装Axios：




npm install axios

创建一个用于封装Axios的API服务模块：




// api.ts
import axios from 'axios';
 
const apiClient = axios.create({
  baseURL: 'https://your-api-url.com/',
  // 其他配置...
});
 
export default apiClient;

在Vue组件中使用该模块发送请求：




<template>
  <div>
    <!-- 组件模板内容 -->
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import apiClient from './api';
 
export default defineComponent({
  name: 'YourComponent',
  setup() {
    // 发送GET请求
    const fetchData = async () => {
      try {
        const response = await apiClient.get('/your-endpoint');
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    };
 
    // 在mounted钩子中调用
    fetchData();
 
    // 其他逻辑...
  },
});
</script>

确保在api.ts中正确设置了API的URL和其他配置。在组件内部，你可以使用apiClient发送不同类型的HTTP请求（GET, POST, PUT, DELETE等），并处理响应或错误。

- 阅读更多 -

Vue3 + ts + pinia 写的购物车，vite ,webpacke

System

2024-08-23

所有,typescript

由于问题描述不具体，我将提供一个简化的Vue 3, TypeScript, Pinia和Vite的购物车示例。这个例子包括了购物车的基本功能，比如添加商品到购物车，更新商品数量，和从购物车中移除商品。

首先，确保你已经安装了Vue 3, TypeScript, Pinia和Vite。

创建一个新的Vue 3项目（假设你已经安装了Vite）:




npm init vite@latest my-shopping-cart --template vue-ts

安装Pinia:




npm install pinia

设置Pinia store:




// src/stores/cartStore.ts
import { defineStore } from 'pinia'
 
export const useCartStore = defineStore({
  id: 'cart',
  state: () => ({
    items: [] as { id: number; quantity: number }[]
  }),
  actions: {
    addToCart(item: { id: number; quantity: number }) {
      const existingItem = this.items.find(i => i.id === item.id)
      if (existingItem) {
        existingItem.quantity += item.quantity
      } else {
        this.items.push(item)
      }
    },
    removeFromCart(itemId: number) {
      const index = this.items.findIndex(item => item.id === itemId)
      if (index !== -1) {
        this.items.splice(index, 1)
      }
    }
  }
})

在Vue组件中使用Pinia store:




// src/App.vue
<template>
  <div id="app">
    <h1>Shopping Cart</h1>
    <div v-for="item in cartStore.items" :key="item.id">
      {{ item.quantity }} x ${item.id}
      <button @click="removeFromCart(item.id)">Remove</button>
    </div>
    <button @click="addToCart({ id: 1, quantity: 1 })">Add Item</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue'
import { useCartStore } from './stores/cartStore'
 
export default defineComponent({
  setup() {
    const cartStore = useCartStore()
 
    function addToCart(item: { id: number; quantity: number }) {
      cartStore.addToCart(item)
    }
 
    function removeFromCart(itemId: number) {
      cartStore.removeFromCart(itemId)
    }
 
    return { cartStore, addToCart, removeFromCart }
  }
})
</script>

在main.ts中安装Pinia:




import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
 
const app = createApp(App)
const pinia = createPinia()
 
app.use(pinia)
app.mount('#app')

这个购物车示例非常基础，仅包括购物车的核心功能。在实际应用中，你可能需要添加更多功能，比如结算功能、商品详情页面、购物车动画等。

- 阅读更多 -

Vue3 ref函数详解

System

2024-08-23

所有,typescript

在Vue 3中，ref() 函数是用来创建一个响应式的引用对象（reactive reference）的。这个函数通常用于跟踪单个响应式值。

ref() 函数接收一个内部值，并返回一个响应式的对象，该对象包含一个 .value 属性。你可以使用 .value 属性来访问或修改内部值。

下面是一个简单的例子：




import { ref } from 'vue';
 
const count = ref(0);
 
console.log(count.value); // 输出：0
 
count.value++;
console.log(count.value); // 输出：1

ref() 函数确保其返回的对象是深度响应式的，这意味着它可以跟踪内部值的变化，并且这些变化会被Vue的响应式系统自动跟踪和更新。

在模板中，你可以直接绑定这个引用的 .value 属性，无需在模板内显式使用 .value：




<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
 
    function increment() {
      count.value++;
    }
 
    return { count, increment };
  }
}
</script>

在上面的例子中，count 是一个响应式的引用，模板中直接使用 count 来显示当前的数值，通过点击按钮触发 increment 方法来增加计数。

System

2024-08-23

所有,typescript

错误解释：

这个错误通常表明在使用axios进行HTTP请求时，传入的URL参数格式有问题。axios期望URL是一个字符串，但是如果传入了一个对象或者其他非字符串类型的值，就可能导致toUpperCase方法不存在的TypeError。

解决方法：

确保你传递给axios的URL是一个字符串。如果你是动态构建URL，请确保构建过程中没有错误，并且在构建完成后转换为字符串。
如果你是在使用axios的配置参数中传递URL，确保配置对象正确，并且URL属性是字符串。

示例代码修正：




// 错误的使用方式
axios({ url: myUrlObject }); // 如果myUrlObject不是字符串
 
// 正确的使用方式
axios({ url: String(myUrlObject) }); // 确保对象转换为字符串
 
// 或者直接使用字符串
axios('http://example.com/api/data'); // 确保URL是字符串

如果你在特定的代码环境中遇到这个问题，请检查相关代码部分，确保所有的URL都是字符串类型。

- 阅读更多 -

Vite搭建Vue3 + TypeScript 项目(Yarn)

System

2024-08-23

所有,typescript

以下是使用Yarn创建Vue 3项目的步骤：

确保你已经安装了Node.js和Yarn。
在命令行中运行以下命令来创建一个新的Vue 3项目：




yarn create vite

在创建过程中，选择vue-ts模板作为项目基础。
输入项目名称，例如my-vue3-project。
选择Vue 3作为框架。
选择是否需要使用路由和状态管理。
最后，选择文件夹路径和是否将项目初始化为Git仓库。

以下是一个简化的命令序列示例：




yarn create vite
? Select a framework
  Vanilla
> Vue
  React
  React & Vanilla
  Angular
  Svelte
? Select a variant
  JavaScript
  TypeScript
> TypeScript
? Enter a project name (e.g. my-vue-app) my-vue3-project
? Select a template (Use arrow keys)
> Vue 3
  Vue 2
? Select a style preprocessor (PostCSS, Sass, Less)
? Select a linter / formatter (ESLint with Airbnb config)
? Select additional lint features (Lint on save, Lint and fix on commit)
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
> In dedicated config files
? Save this as a preset for future projects?

完成后，Yarn会自动安装依赖并设置项目。

现在，你有了一个使用Vite搭建、基于Vue 3和TypeScript的新项目。

- 阅读更多 -

vue3+ ts +vite pinia相关总结

System

2024-08-23

所有,typescript

在Vue 3, TypeScript 和 Vite 环境下，Pinia 是一个强大的状态管理库。以下是一些常用的Pinia结构和代码示例：

安装Pinia：




npm install pinia

创建Pinia Store：




// store.ts
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore({
  id: 'main',
  state: () => {
    return { counter: 0 }
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})

在Vue应用中安装和使用Pinia：




// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { useMainStore } from './store'
 
const app = createApp(App)
 
const pinia = createPinia()
app.use(pinia)
 
app.mount('#app')

在组件中使用Pinia Store：




// MyComponent.vue
<template>
  <div>{{ counter }}</div>
  <button @click="increment">Increment</button>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue'
import { useMainStore } from './store'
 
export default defineComponent({
  setup() {
    const mainStore = useMainStore()
    return {
      counter: mainStore.counter,
      increment: mainStore.increment
    }
  }
})
</script>

以上代码展示了如何在Vue 3, TypeScript 和 Vite 项目中使用Pinia进行状态管理。通过defineStoreAPI定义状态和动作，并在Vue应用中通过createPinia创建和安装Pinia插件。在组件中通过useMainStore函数访问状态和执行动作。

- 阅读更多 -

vue3和typescript项目自动导入api和components

System

2024-08-23

所有,typescript

在Vue 3和TypeScript项目中，可以使用Vite作为构建工具来自动导入API和组件。以下是一个简化的例子，展示如何自动导入API和组件：

首先，确保你的项目设置允许从特定的路径自动导入文件。例如，在tsconfig.json中配置baseUrl和paths：




{
  "compilerOptions": {
    "baseUrl": ".", // 设置基础路径为项目根目录
    "paths": {
      "@/*": ["src/*"] // 表示src目录下的任何文件都可以通过@/来访问
    }
    // ...其他配置
  }
}

然后，在.vitepress/config.ts或你的Vue项目中的vite.config.ts配置文件中，使用Vite的插件来实现自动导入：




import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
 
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 设置别名以简化导入路径
    },
  },
});

最后，在你的组件或者API使用文件中，可以直接从对应的路径导入：




// 自动导入API
import myApiFunction from '@/api/myApi.js';
 
// 自动导入组件
import MyComponent from '@/components/MyComponent.vue';
 
// 使用API或组件
myApiFunction();

确保你的项目结构和导入路径与配置相匹配，这样就可以实现自动导入API和组件。

- 阅读更多 -

TS遍历对象，对key进行判断

System

2024-08-23

所有,typescript

在TypeScript中，你可以使用keyof关键字来遍历对象的键，并使用类型守卫进行条件判断。以下是一个示例代码，它定义了一个对象，并遍历其键，对每个键进行条件判断：




type MyObject = {
  a: number;
  b: string;
  c: boolean;
};
 
function traverseObject<T>(obj: T) {
  type Key = keyof T;
 
  Object.keys(obj).forEach((key: Key) => {
    if (typeof obj[key] === 'string') {
      console.log(`Key "${key}" is a string with value: ${obj[key]}`);
    } else if (typeof obj[key] === 'number') {
      console.log(`Key "${key}" is a number with value: ${obj[key]}`);
    } else if (typeof obj[key] === 'boolean') {
      console.log(`Key "${key}" is a boolean with value: ${obj[key]}`);
    } else {
      console.log(`Key "${key}" is of type ${typeof obj[key]}`);
    }
  });
}
 
const myObj = { a: 1, b: 'hello', c: true } as MyObject;
traverseObject(myObj);

在这个例子中，traverseObject函数接受一个泛型参数T，它是一个对象类型。keyof T会得到T所有键的联合类型，然后遍历对象的所有键。对于每个键，我们使用typeof来检查它的值类型，并根据类型执行不同的操作。

- 阅读更多 -