@arco-plugins/vite-vue插件在vue3+vite+ts环境下无法使用

popdo commented 1 year ago

[ ] I'm sure this does not appear in the issue list of the repository

Basic Info

Package Name And Version: @arco-design/web-vue@2.39.1
Framework version: vue3.2.45
Browser: chrome107.0.0.0
"vue": "^3.2.45"
"vite": "^3.2.3",
"vue-tsc": "^1.0.9"

Steps to reproduce

@arco-plugins/vite-vue安装配置后vite直接报错，无法正常使用。之前的项目是在js环境下可以正常使用，这次是vue3+ts 直接报错了！项目运行不起来！

failed to load config from /Users/hi/www/good-web/vite.config.ts
error when starting dev server:
TypeError: vitePluginForArco is not a function
    at file:///Users/hi/www/good-web/vite.config.ts.timestamp-1669731618744.mjs:15:5
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async loadConfigFromBundledFile (file:///Users/hi/www/good-web/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62827:21)
    at async loadConfigFromFile (file:///Users/hi/www/good-web/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62712:28)
    at async resolveConfig (file:///Users/hi/www/good-web/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62336:28)
    at async createServer (file:///Users/hi/www/good-web/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:61636:20)
    at async CAC.<anonymous> (file:///Users/hi/www/good-web/node_modules/vite/dist/node/cli.js:707:24)

我的配置是这样的 vite.config

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Unocss from 'unocss/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'
import vitePluginForArco from '@arco-plugins/vite-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss(),
    vitePluginForArco({
      theme: '@arco-design/vue-webs',
    }),

    AutoImport({
      imports: [
        'vue',
        'vue-router',
        'pinia',
      ],
      resolvers: [ArcoResolver()],
      dts: "src/auto-import.d.ts"
    }),

    Components({
      dts: "src/components.d.ts",
      resolvers: [
        ArcoResolver({
          sideEffect: false
        })
      ]
    }),
  ],
  base: './',
  // 配置src目录别名
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  },
})

wan-kong commented 1 year ago

改成 import { vitePluginForArco } from '@arco-plugins/vite-vue' :>

tazyong commented 1 year ago

vite3.x 版本需要使用以下方式导入

import { vitePluginForArco } from '@arco-plugins/vite-vue'

使用 @arco-plugins/vite-vue 已支持模板方式自动导入，不再需要 unplugin-auto-import 和 unplugin-vue-components 这两个插件

Chanzhaoyu commented 1 year ago

如果对全量引入 css 大小没什么要求的话，组件库本身就自带 Tree Shaking，这些配置都可以去掉的，反而更简洁。

popdo commented 1 year ago

vite3.x 版本需要使用以下方式导入
import { vitePluginForArco } from '@arco-plugins/vite-vue'
使用 @arco-plugins/vite-vue 已支持模板方式自动导入，不再需要 unplugin-auto-import 和 unplugin-vue-components 这两个插件

问题解决了，非常感谢！

官方文档上的Usage这里的使用文档最好说明一下。我在vue3+js环境下使用没解构的方式引入是正常。使用vue3+ts方式就不行了，很容易让人有混乱感！

tazyong commented 1 year ago

vite3.x 版本需要使用以下方式导入
import { vitePluginForArco } from '@arco-plugins/vite-vue'
使用 @arco-plugins/vite-vue 已支持模板方式自动导入，不再需要 unplugin-auto-import 和 unplugin-vue-components 这两个插件
问题解决了，非常感谢！

官方文档上的Usage这里的使用文档最好说明一下。我在vue3+js环境下使用没解构的方式引入是正常。使用vue3+ts方式就不行了，很容易让人有混乱感！

纠正一下，import { xxx } from 'xxx' 不是解构，虽然和解构写法类似，但本质并不是解构。多看看前端模块化规范相关的正经文档，不要被网上那些乱七八糟的东西带偏了。在 es 模块中 import xxx from 'xxx' 这种写法其实是 import { default } from 'xxx' 的简写。

Arco 的文档中“快速上手”那块很久没更新了，当时官方写的时候用的还是 vite2，在那样的环境下是表现正常的。现在 vite3 改变了一些模块化组织的方式，以 mjs 为主，目前 @arco-plugins/vite-vue 用 default 导入是无法兼容的，但也提供了 vitePluginForArco 导出可以正常使用。

所以：

// default 导入仅 vite2 支持
import vitePluginForArco from '@arco-plugins/vite-vue'

// vitePluginForArco 导入 vite2/3 都支持
import { vitePluginForArco } from '@arco-plugins/vite-vue'

popdo commented 1 year ago

vite3.x 版本需要使用以下方式导入
import { vitePluginForArco } from '@arco-plugins/vite-vue'
使用 @arco-plugins/vite-vue 已支持模板方式自动导入，不再需要 unplugin-auto-import 和 unplugin-vue-components 这两个插件
问题解决了，非常感谢！官方文档上的Usage这里的使用文档最好说明一下。我在vue3+js环境下使用没解构的方式引入是正常。使用vue3+ts方式就不行了，很容易让人有混乱感！
纠正一下，import { xxx } from 'xxx' 不是解构，虽然和解构写法类似，但本质并不是解构。多看看前端模块化规范相关的正经文档，不要被网上那些乱七八糟的东西带偏了。在 es 模块中 import xxx from 'xxx' 这种写法其实是 import { default } from 'xxx' 的简写。

Arco 的文档中“快速上手”那块很久没更新了，当时官方写的时候用的还是 vite2，在那样的环境下是表现正常的。现在 vite3 改变了一些模块化组织的方式，以 mjs 为主，目前 @arco-plugins/vite-vue 用 default 导入是无法兼容的，但也提供了 vitePluginForArco 导出可以正常使用。

所以：
// default 导入仅 vite2 支持
import vitePluginForArco from '@arco-plugins/vite-vue'

// vitePluginForArco 导入 vite2/3 都支持
import { vitePluginForArco } from '@arco-plugins/vite-vue'

我知道是export和export default的区别。看到花括号一时口误😂 。

我用过很多个主流的vue3的ui框架。我个人可以很肯定的说你们的组件使用体验是最好的。但是帮助文档相对要差一点。特别是第一次使用你们组件库的时候，希望官方能将文档更新一下，让更多的人能更容易的体验到你们这么好用的组件！

zhuziyi1989 commented 2 weeks ago

vite3.x 版本需要使用以下方式导入
import { vitePluginForArco } from '@arco-plugins/vite-vue'
使用 @arco-plugins/vite-vue 已支持模板方式自动导入，不再需要 unplugin-auto-import 和 unplugin-vue-components 这两个插件
问题解决了，非常感谢！官方文档上的Usage这里的使用文档最好说明一下。我在vue3+js环境下使用没解构的方式引入是正常。使用vue3+ts方式就不行了，很容易让人有混乱感！
纠正一下，import { xxx } from 'xxx' 不是解构，虽然和解构写法类似，但本质并不是解构。多看看前端模块化规范相关的正经文档，不要被网上那些乱七八糟的东西带偏了。在 es 模块中 import xxx from 'xxx' 这种写法其实是 import { default } from 'xxx' 的简写。 Arco 的文档中“快速上手”那块很久没更新了，当时官方写的时候用的还是 vite2，在那样的环境下是表现正常的。现在 vite3 改变了一些模块化组织的方式，以 mjs 为主，目前 @arco-plugins/vite-vue 用 default 导入是无法兼容的，但也提供了 vitePluginForArco 导出可以正常使用。所以：
// default 导入仅 vite2 支持
import vitePluginForArco from '@arco-plugins/vite-vue'

// vitePluginForArco 导入 vite2/3 都支持
import { vitePluginForArco } from '@arco-plugins/vite-vue'
我知道是export和export default的区别。看到花括号一时口误😂 。

我用过很多个主流的vue3的ui框架。我个人可以很肯定的说你们的组件使用体验是最好的。但是帮助文档相对要差一点。特别是第一次使用你们组件库的时候，希望官方能将文档更新一下，让更多的人能更容易的体验到你们这么好用的组件！

两年过去了，没有更新文档，是否说明这个项目已经被遗弃？？？

arco-design / arco-design-vue

@arco-plugins/vite-vue插件在vue3+vite+ts环境下无法使用 #1899

Basic Info

Steps to reproduce