标签: vuejs3

我正在尝试用 vite 替换 vue-cli 。我有一个 vite.config.js，所以我可以使用别名进行导入：

export default {
    alias: {
        '@': require('path').resolve(__dirname, 'src'),
    },
};

然后在我的 main.ts 中我尝试导入我的 css 文件（我尝试过使用或不使用.module：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import '@/assets/app.module.css';

createApp(App).use(router).mount('#app');

但我收到这个错误：

[vite] 无法解析模块导入“@/assets/app.module.css”。（由/src/main.ts导入）

我究竟做错了什么？

我可以通过以下方式获取 vue js 2 中的组件名称：this.$options.name。如何在 vue js 3 中获取它？

谢谢。

Vue 3 文档和民间文献中的指导是ref()针对标量和基元的，而reactive()针对对象的。

然而，在 JavaScript 中，数组是 Object 的一种特殊情况。尽管存在监视嵌套对象元素是否添加新属性和其他问题等问题，但无论从性能角度还是其他角度来看，是否存在是否将数组处理为 或 的最佳ref实践reactive？

有没有办法检测自定义组件中 modelValue 的更改？我想将更改推送到所见即所得编辑器。

我尝试监视 modelValue，但发出 modelValue 更新触发了该监视，从而创建了循环数据流。

代码：

export default {
  props: ['modelValue'],
  watch: {
    modelValue (val) {
      this.editor.editor.loadHTML(val)
    }
  },
  mounted () {
    this.editor.editor.loadHTML(val)
    this.editor.addEventListener('trix-change', 
      (event) => this.$emit('update:modelValue', event.target.value))
  }
}

<TextEditor v-model="someHtml"></TextEditor>

我正在为我的 Vue3(typescript) 应用程序使用 vue-i18n 插件。下面是我在组件代码中的设置函数

首页.vue

import {useI18n} from 'vue-i18n'

setup() {
        const {t} = useI18n()
return {
        t
     }

}

主.ts

import { createI18n } from 'vue-i18n'
import en from './assets/translations/english.json'
import dutch from './assets/translations/dutch.json'

// internationalization configurations
const i18n = createI18n({
    messages: {
        en: en,
        dutch: dutch
    },
    fallbackLocale: 'en',
    locale: 'en'
    
})
// Create app
const app = createApp(App)
app.use(store)
app.use(router)
app.use(i18n)

app.mount('#app')

代码可以正常工作并编译。但是在安装组件时，玩笑测试用例失败了

规格文件

import { mount, VueWrapper } from '@vue/test-utils'
import Home from '@/views/Home.vue'
import …

注意：我正在使用的示例可在 GitHub 存储库https://github.com/mary-perret-1986/primevue-poc上找到

我使用 Vue.js 3 + Vite + PrimeVue 创建了一个简单的项目。

到目前为止，当我正在开发并且正在为构建提供服务时（即/dist服务器提供构建（即）时，一切都像魅力一样。

但我想看看我是否可以打开/dist/index.html直接从浏览器打开......我的意思是，从技术上讲，这应该是可能的。

以下是配置部分：

package.json

{\n  "name": "my-vue-app",\n  "version": "0.0.0",\n  "scripts": {\n    "dev": "vite",\n    "build": "vite build",\n    "preview": "vite build && vite preview"\n  },\n  "dependencies": {\n    "primeflex": "^2.0.0",\n    "primeicons": "^4.1.0",\n    "primevue": "^3.2.0-rc.1",\n    "vue": "^3.0.5",\n    "vue-property-decorator": "^9.1.2",\n    "vue-class-component": "^8.0.0-0",\n    "vue-router": "^4.0.0-0",\n    "vuex": "^4.0.0-0"\n  },\n  "devDependencies": {\n    "@types/node": "^14.14.37",\n    "@vitejs/plugin-vue": "^1.2.1",\n    "@vue/compiler-sfc": "^3.0.5",\n    "sass": "^1.26.5",\n    "typescript": "^4.1.3",\n    "vite": "^2.1.5",\n    "vue-tsc": "^0.0.15"\n …

如何app.config.globalProperties 访问<script setup lang="ts">？

我已经寻找了几种方法：就像这篇 SO post 一样，并尝试组合以下元素：

\\ main.ts

import mitt from 'mitt'
const emitter = mitt()

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    emitter: typeof mitt
  }
}

app.config.globalProperties.emitter = emitter

尝试过在composition-api中使用包装..也不走运

\\ bus.ts

import { getCurrentInstance } from 'vue'

const app = getCurrentInstance()
const bus = app.appContext.config.globalProperties.emitter // app is undefined

export const useBus = () => ({ bus })

考虑以下使用 Vue 3 中的组合 API 的简单示例。我试图test在我的组件的函数中拥有可用的实例。

<script>
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  name: 'Test',
  setup(){
    let test = ref()
    
    onMounted(() => {
      doSomething()
    })

    return{
      test,
      doSomething
    }
  }
})

function doSomething(){
  console.log(test) //<-- undefined
  console.log(this.test) //<-- undefined
}
</script>

我如何进入test内部doSomething()？我的理解是，返回的任何内容都setup()应该在整个组件中可用，就像data()选项 API 中的属性一样。

正如本手册中所写的https://www.vuemastery.com/blog/vue-3-migration-build/
我更新了 package.json 添加了 vue.config.js 并运行了 yarn install 命令，并看到了此错误

Error: Cannot find module 'vue-template-compiler/package.json'
Require stack:
- /myproject/node_modules/@vue/cli-service/lib/config/base.js
- /myproject/node_modules/@vue/cli-service/lib/Service.js
- /myproject/node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
    at Function.Module._load (internal/modules/cjs/loader.js:730:27)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at /myproject/node_modules/@vue/cli-service/lib/config/base.js:73:32
    at /myproject/node_modules/@vue/cli-service/lib/Service.js:242:40
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/myproject/node_modules/@vue/cli-service/lib/Service.js:242:26)
    at Service.resolveWebpackConfig (/myproject/node_modules/@vue/cli-service/lib/Service.js:246:48)
    at PluginAPI.resolveWebpackConfig (/myproject/node_modules/@vue/cli-service/lib/PluginAPI.js:138:25)
error Command failed with exit code 1.

我尝试更改编译器版本，但没有帮助
如何修复它？
提前致谢

除了标题之外，无需添加更多内容。我希望向 quasar q-table (laravel / vue3) 添加一个自定义列，该列将保存行编辑/删除操作