标签: vuejs3

我尝试了以下操作： https://github.com/visualfanatic/vue-svg-loader/tree/master

但与 vue-template-compiler 存在版本冲突，因为它在 Vue 2 中使用。

我尝试过： https: //github.com/visualfanatic/vue-svg-loader

但我缺少一个特定的 vue 依赖项。

我注意到使用打字稿有一个警告，您需要声明类型定义文件。但是，我仍然得到“找不到模块 '../../assets/myLogo.svg' 或其相应的类型声明”。

这是我添加的内容：

vue.config.js

module.exports = {
  chainWebpack: (config) => 
  {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-loader-v16')
      .loader('vue-loader-v16')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
  configureWebpack: process.env.NODE_ENV === 'production' ? {} : {
    devtool: 'source-map'
  },
  publicPath: process.env.NODE_ENV === 'production' ?
    '/PersonalWebsite/' : '/'
}

垫片-svg.d.ts

declare module '*.svg' {
  const content: any;
  export default content;
}

我的组件.vue

<template>
  <div>
     <MyLogo />
  </div>
</template>

<script lang="ts">
import …

我想显示我的资产文件夹中的背景图像。当我使用图像标签时，图像会正确显示，因此图像放置得很好，但当我使用该background-image样式时会抛出 404。知道发生了什么吗？我将 Vue 3 与 TypeScript 和 Vite 2 结合使用。

这不会解析 URL：

<div style="background-image: url(./assets/img/header.png)"
></div>

但这确实：

<img src="./assets/img/header.png" alt="Header" />

MCVE

https://github.com/hyperbotauthor/minvue3cliapp

MCVE 直播

https://codesandbox.io/s/white-browser-fl7ji

我有一个 Vue 3 cli-service 应用程序，它使用带有插槽的组合 API 组件。

该HelloWorld组件渲染它在 a 中接收到的槽div：

// src/components/Helloworld.js
import { defineComponent, h } from "vue";

export default defineComponent({
  setup(props, { slots }) {
    return () => h("div", {}, slots);
  }
});

该组件在其功能中Composite使用并填充其槽：HelloWorldsetup

// src/components/Composite.js
import { defineComponent, h } from "vue";

import HelloWorld from "./HelloWorld";

export default defineComponent({
  setup(props, { slots }) {
    return () =>
      h(HelloWorld, {}, [h("div", {}, ["Div 1"]), h("div", …

在main.scss我从文件夹加载本地字体assets/styles/fonts：

@font-face {
  font-family: 'Opensans-Bold';
  font-style: normal;
  src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Opensans-Light';
  font-style: normal;
  src: local('Opensans-Light'), url(./fonts/OpenSans-Light.ttf) format('truetype');
}

然后在vite.config我加载main.scss：

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/assets/styles/main.scss";`
    }
  }
},

但是main.scss除了字体之外的所有 css 都被应用，我收到错误：

downloadable font: download failed (font-family: "Opensans-Bold" style:normal weight:400 stretch:100 src index:1): status=2152398850 source: http://localhost:3000/fonts/OpenSans-Bold.ttf

我走在正确的轨道上还是需要其他方法（与 Vue-CLI 类似）？

我正在尝试在 Nuxt 3 应用程序中使用 NuxtLink 来使用路线，它正在更改路线，但它没有显示任何内容。但是，如果我刷新或重新加载之前为空白的更新路线，那么它会正常显示其内容。

/pages/index.vue

<template>
  <div>
    <h1>It's Nuxt3!</h1>
    <p>Home Page</p>
  </div>
  <NuxtLink to="/user">User</NuxtLink>
</template>

/pages/user.vue

<template>
  <div>
    <h1>It's Nuxt3!</h1>
    <p>User Page</p>
  </div>
</template>

文件夹结构和插图：

本质上，我想构建输入字段组件（textfeids、textarea、复选框等）。由于它们共享一些属性，即（id、名称等），因此我的方法是创建一个可组合项并定义通用的 prop 定义，然后在各个组件中使用它们。然而，它似乎确实有效。有没有办法可以在 vue 3 可组合方法中实现这一目标。下面是可组合的。

// prop definition
import { defineProps } from "vue";

export const useCoreFieldProps = () => {
  const props = defineProps<{
    id?: string;
    name?: string;
    disabled?: boolean;
    required?: boolean;
  }>();

  return {
    props,
  };
};

// composable usage
<script setup lang="ts">
import { useCoreFieldProps } from "@/composables/useFields";

const { props: coreProps } = useCoreFieldProps();

</script>

我已经将我的项目从 Vite 2.x 更新到 Vite 3.0.2，突然出现以下错误：

[plugin:vite:import-analysis] 无法解析导入分析源，因为内容包含无效的 JS 语法。如果您使用 JSX，请确保使用 .jsx 或 .tsx 扩展名命名该文件。

/Volumes/Disk/Web/wce-system/src/i18n.js:51:20

i18n.js 文件中没有任何问题，因为它在 Vite 2.x 上运行良好，但我将代码放在这里以防万一您需要：

import { nextTick } from "vue"
import { createI18n } from "vue-i18n"
import axios from "axios"
import tr from "@/locales/tr.json"
import en from "@/locales/en.json"

export const SUPPORT_LOCALES = ["tr", "en"]

export function setupI18n(options = { locale: "tr" }) {
const i18n = createI18n(options)
setI18nLanguage(i18n, options.locale)
  return i18n
}

export function setI18nLanguage(i18n, locale, url) {
  if (i18n.mode === "legacy") { …

我正在尝试对使用 vite 和 vue3 创建的前端应用程序进行 dockerize。它不作为容器工作。这是错误响应。

(!) 无法从 rollupOptions 或 html 文件自动确定入口点，并且没有显式的 OptimizeDeps.include 模式。跳过依赖项预捆绑。

VITE v3.2.4  ready in 191 ms\n\n  \xc3\xa2\xc5\xbe\xc5\x93  Local:   http://localhost:5173/\n  \xc3\xa2\xc5\xbe\xc5\x93  Network: http://172.17.0.2:5173/\n(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.\n

Dockerfile

# base image\nFROM node:16.3.0-alpine\n\n# set working directory\nWORKDIR /app\n\n# add `/app/node_modules/.bin` to $PATH\nENV PATH /app/node_modules/.bin:$PATH\n\n# install and cache app dependencies\nCOPY package.json /app/package.json\nRUN npm install\nRUN npm install @vue/cli@3.7.0 -g\n# start app\nCMD …

Like the title, I want to add Axios into Vue prototype. So when I want to use it, I can use it like this.$axios instead of importing it every time.

CODE:

//plugins/axios.ts

import axios from 'axios'
import router from '../router/index'

const errorHandle = (): void => {};

const instance = axios.create({
  // baseURL: process.env.NODE_ENV == 'development' ? '' : ''
  baseURL: 'http://localhost:3000',
  timeout: 1000 * 12
});

instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

export default instance

import { createApp } from 'vue'
import …

现在我需要从父组件向子组件发出事件。我在 vue version 3 中看到$on，$off实例$once方法被删除了。应用程序实例不再实现事件发射器接口。

现在我如何可以从 vue 版本 3 中的父组件发出事件并从子组件监听？