标签 VUE 下的文章

Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架

2024-08-07

以下是一个使用Vite2、Vue3、TypeScript和Pinia搭建的基本的企业级开发脚手架的示例：

安装项目依赖：




npm init vite@latest my-vue-app --template vue-ts
cd my-vue-app
npm install

安装Pinia：




npm install pinia

设置Vue项目使用Pinia：
在src目录下创建一个store文件夹，并添加index.ts文件：




// src/store/index.ts
import { createPinia } from 'pinia';
 
const store = createPinia();
 
export default store;

然后在main.ts中引入Pinia并挂载：




// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import './style.css';
import store from './store';
 
const app = createApp(App);
 
app.use(store);
 
app.mount('#app');

配置Vite：
在vite.config.ts中配置Pinia插件（如果需要）：




// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
export default defineConfig({
  plugins: [vue()],
});

以上代码提供了一个基本的框架，您可以根据实际需求添加更多的配置和功能，例如路由、状态管理、请求拦截等。

- 阅读更多 -

VUE3引入html文件并传值

System

2024-08-07

所有,typescript

在Vue 3中，你可以通过使用<script type="module">标签在HTML文件中引入Vue组件，并传递值。以下是一个简单的例子：

创建一个Vue组件（例如MyComponent.vue）:




<template>
  <div>{{ message }}</div>
</template>
 
<script>
export default {
  props: ['message'],
};
</script>

创建一个HTML文件，并通过<script type="module">标签引入Vue组件，并传递值：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 Component in HTML</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
 
<div id="app"></div>
 
<script type="module">
import MyComponent from './MyComponent.vue';
 
const app = Vue.createApp({});
app.component('my-component', MyComponent);
 
app.mount('#app');
</script>
 
</body>
</html>

在这个例子中，我们创建了一个Vue 3组件MyComponent.vue，它接受一个名为message的prop。然后在HTML文件中，我们通过<script type="module">标签引入并注册这个组件，并通过HTML标签传递值：




<my-component message="Hello from HTML"></my-component>

当你打开这个HTML文件时，它将显示"Hello from HTML"。

- 阅读更多 -

Vue3 typescript setup 模式下，name 属性的使用

System

2024-08-07

所有,typescript

在Vue 3中，setup模式是一种组合API的新特性，它允许我们在单文件组件（SFC）中使用组合式API（即ref, reactive, computed, watch等）。在TypeScript的环境下，name属性通常用于调试目的。

在setup函数中使用name属性，你可以直接通过props的方式传递一个名为name的属性，并在setup函数内部使用它。这里是一个简单的例子：




<template>
  <div>{{ greeting }}</div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  props: {
    name: {
      type: String,
      default: 'World'
    }
  },
  setup(props) {
    const greeting = ref(`Hello, ${props.name}!`);
    return { greeting };
  }
});
</script>

在这个例子中，我们定义了一个名为name的prop，并在setup函数内部通过props参数访问它。然后我们创建了一个响应式引用greeting，它的初始值是一个包含name属性的问候语。在模板中，我们可以直接绑定greeting来展示问候语。

- 阅读更多 -

vue3版本+TS(typescript)+简单封装api 配置反向代理

System

2024-08-07

所有,typescript

在Vue 3中使用TypeScript并简单封装API配置反向代理，你可以使用axios作为HTTP客户端库，并结合Vue的插件系统来配置反向代理。以下是一个简单的示例：

安装axios和http-proxy-middleware（如果你使用的是Vue CLI，可以通过npm或yarn安装所需依赖）：




npm install axios http-proxy-middleware

创建api.ts文件，并编写封装API调用的代码：




import axios from 'axios';
 
const apiClient = axios.create({
  baseURL: '/api/', // 设置API的基础URL
});
 
export default apiClient;

在vue.config.js中配置代理，以便将API请求反向代理到后端服务器：




const { createProxyMiddleware } = require('http-proxy-middleware');
 
module.exports = {
  devServer: {
    proxy: {
      '/api': createProxyMiddleware({
        target: 'http://backend-server.com', // 后端服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      }),
    },
  },
};

在main.ts中引入API客户端并使用：




import { createApp } from 'vue';
import App from './App.vue';
import apiClient from './api';
 
const app = createApp(App);
 
app.config.globalProperties.$api = apiClient;
 
app.mount('#app');

在组件中使用封装后的API：




<template>
  <div>
    <!-- 组件模板内容 -->
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { getCurrentInstance } from 'vue';
 
export default defineComponent({
  setup() {
    const globalProperties = getCurrentInstance()!.appContext.config.globalProperties;
    const api = globalProperties.$api;
 
    // 发起API请求
    api.get('/some-endpoint').then(response => {
      console.log(response.data);
    });
 
    // 返回响应式数据或方法
    return {
      // ...
    };
  },
});
</script>

这个示例展示了如何在Vue 3 + TypeScript项目中简单地封装API调用，并通过Vue CLI的配置使其能够通过反向代理与后端服务器通信。

- 阅读更多 -

Vue3 的 TypeScript 环境中完整对接百度统计

System

2024-08-07

所有,typescript

在Vue 3项目中使用TypeScript完整对接百度统计，你需要按以下步骤操作：

安装百度统计的npm包（如果有的话）。
在main.ts或项目启动时设置百度统计。

以下是示例代码：

首先，安装百度统计的npm包（如果有的话）。如果没有，你需要自己封装百度统计的脚本。




npm install baidu-statistics-package --save

然后，在main.ts中引入并初始化百度统计：




import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import BaiduStatistics from 'baidu-statistics-package';
 
const app = createApp(App);
 
app.use(router);
 
// 初始化百度统计，替换为你的百度统计代码
BaiduStatistics.init('你的百度统计代码');
 
app.mount('#app');

确保你的项目中有百度统计的脚本文件，并且在vue.config.js中配置了正确的外部化处理：




const { defineConfig } = require('@vue/cli-service');
 
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    externals: {
      baiduStatisticsPackage: 'BaiduStatistics'
    }
  }
});

这样，当你的Vue 3应用启动时，百度统计脚本也会随之初始化。记得替换baidu-statistics-package和你的百度统计代码为实际使用的包名和你的百度统计的代码。

- 阅读更多 -

vue3 + TS 自定义插件-全局message提示插件示例

System

2024-08-07

所有,typescript




import { App, Plugin } from 'vue';
 
interface MessageOptions {
  content: string;
  duration?: number;
}
 
const messagePlugin: Plugin = {
  install(app: App) {
    app.config.globalProperties.$message = (options: MessageOptions) => {
      // 实现消息提示逻辑，例如创建一个div来展示消息
      const duration = options.duration || 3000; // 默认3秒
      const div = document.createElement('div');
      div.textContent = options.content;
      document.body.appendChild(div);
 
      // 3秒后移除div
      setTimeout(() => {
        div.remove();
      }, duration);
    };
  }
};
 
export default messagePlugin;

这个示例创建了一个简单的消息提示插件，插件提供了一个 $message 方法，允许全局访问。在 Vue 应用中使用时，只需要在 main.ts/js 中导入并使用这个插件：




import { createApp } from 'vue';
import App from './App.vue';
import messagePlugin from './plugins/message';
 
const app = createApp(App);
app.use(messagePlugin);
app.mount('#app');

之后，在组件中可以这样使用：




<template>
  <button @click="showMessage">显示消息</button>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  setup() {
    const showMessage = () => {
      this.$message({ content: '操作成功！', duration: 2000 });
    };
 
    return { showMessage };
  }
});
</script>

点击按钮后，会在页面中显示一个持续2秒的消息提示。这个插件可以进一步完善，比如添加样式、支持多种类型的消息提示等。

- 阅读更多 -

Vue3 setup 语法糖下如何定义组件名称

System

2024-08-07

所有,typescript

在Vue 3中，使用<script setup>的组件可以通过两种方式定义组件名称：

使用name选项：




<script setup lang="ts">
import { defineComponent } from 'vue'
 
export default defineComponent({
  name: 'MyComponentName'
  // 其他选项
})
</script>

使用defineAsyncComponent定义异步加载的组件：




<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
 
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./MyAsyncComponent.vue'),
  name: 'MyAsyncComponentName'
})
</script>

在<script setup>中，组件名称通常在defineComponent或defineAsyncComponent的选项中设置。如果是使用单文件组件（SFC）的默认行为，组件名通常从文件名推断而来（kebab-case形式，即小写+连字符）。如果需要自定义组件名称，可以像上面示例中那样使用name选项。

- 阅读更多 -

vue3中使用websocket

System

2024-08-07

所有,typescript

在Vue 3中使用WebSocket可以通过创建一个WebSocket实例并在组件的setup函数中管理它来实现。以下是一个简单的例子：




<template>
  <div>
    <button @click="connect">Connect</button>
    <button @click="sendMessage" :disabled="!socket.readyState">Send</button>
    <button @click="disconnect" :disabled="!socket.readyState">Disconnect</button>
    <div>
      Status: {{ socket.readyState }}
    </div>
    <div>
      Messages:
      <ul>
        <li v-for="message in messages" :key="message">{{ message }}</li>
      </ul>
    </div>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const socket = ref(null);
    const messages = ref([]);
 
    function connect() {
      socket.value = new WebSocket('wss://your-websocket-server');
 
      socket.value.onopen = function(event) {
        console.log('WebSocket connected: ', event);
      };
 
      socket.value.onerror = function(error) {
        console.error('WebSocket error: ', error);
      };
 
      socket.value.onmessage = function(event) {
        messages.value.push(event.data);
      };
 
      socket.value.onclose = function() {
        console.log('WebSocket disconnected');
      };
    }
 
    function sendMessage() {
      if (socket.value && socket.value.readyState === WebSocket.OPEN) {
        socket.value.send('Your message here');
      }
    }
 
    function disconnect() {
      if (socket.value) {
        socket.value.close();
        socket.value = null;
      }
    }
 
    return {
      socket,
      messages,
      connect,
      sendMessage,
      disconnect
    };
  }
};
</script>

在这个例子中，我们创建了一个WebSocket连接，并在组件的setup函数中定义了连接、发送消息和断开连接的方法。我们还监听了WebSocket的打开、错误、接收消息和关闭事件，并将它们与Vue响应式数据（messages数组和socket实例）相关联。

请确保将'wss://your-websocket-server'替换为您的WebSocket服务器地址。此外，这里的WebSocket URL使用的是wss协议，如果您的服务器支持ws（非加密的WebSocket），您也可以使用'ws://your-websocket-server'。

- 阅读更多 -

vue-cli@4 vue3 +ts autoimport报错问题解决

System

2024-08-07

所有,typescript

报错问题："vue-cli@4 vue3 +ts autoimport" 报错可能是指在使用 Vue 3 和 TypeScript 时，使用 VSCode 或其他编辑器的自动导入插件（例如，Auto Import）时出现的问题。

解释：

这个报错可能是因为 Auto Import 插件无法识别 Vue 3 项目中新的组合式 API（Composition API）的导入提示，或者是因为 TypeScript 配置问题，导致自动导入功能无法正确工作。

解决方法：

确保你的项目中已经安装了所有必要的依赖，包括 @vue/cli、vue 和 vue-tsc。
检查 tsconfig.json 文件，确保它正确配置了对 .vue 文件的支持，可能需要添加 "vue" 到 compilerOptions 下的 types 数组中。
更新 Auto Import 插件到最新版本，以确保它支持 Vue 3 和 TypeScript 的最新特性。
如果问题依然存在，可以尝试禁用 Auto Import 插件，然后重新启用，或者重启 VSCode。
如果上述方法都不能解决问题，可以考虑在项目的 jsconfig.json 或 tsconfig.json 中添加相应的配置，或者在 VSCode 的设置中禁用 Auto Import 插件，改用其他自动导入工具，如 eslint-plugin-import 的自动修复功能。

示例 tsconfig.json 配置：




{
  "compilerOptions": {
    "types": [
      "vue/setup-compiler-macros"
    ]
    // 其他配置...
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.vue",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

请根据你的项目具体情况调整上述解决方法。

- 阅读更多 -

在vue3 + ts + vite项目里找不到node相关模块

System

2024-08-07

所有,typescript

报错：在Vue3 + TypeScript + Vite项目里找不到Node相关模块

解释：

这个报错通常意味着项目试图在客户端代码中引入了Node.js专有的模块，而这些模块只能在服务器端代码中使用。例如，fs模块是Node.js中的文件系统模块，通常不应该在前端JavaScript中使用。

解决方法：

检查代码中导致问题的部分，确认是否错误地将Node.js专有模块引入了前端代码中。
如果你确实需要在客户端代码中使用某些文件操作或其他Node.js特有功能，考虑使用浏览器兼容的库或者将这部分逻辑移到服务器端。
如果是在Vite配置文件中引入了Node模块，确保那部分配置是在Node环境中执行，不要将其放在客户端代码中。
如果是通过条件编译来区分服务器和客户端代码，确保条件判断正确，服务器端的代码应该用适当的构建标记来区分，例如在Vite配置中使用define: 'process.env.DEFINE'并在环境变量中设置DEFINE。

示例：




// 错误的例子
import fs from 'fs';
 
// 正确的例子
// 如果确实需要文件操作，可以考虑使用browserify-fs或类似库
import { fs } from 'browserify-fs';
 
// 或者将文件操作逻辑移到服务器端

- 阅读更多 -