在Vue3中引入import问题

学习Vue3,尝试使用如下代码
/demo.html/
/vue.global3.js和demo.html在同一个目录下/
< script type=“module” >
import { ref } from ‘vue’

运行的时候出错
Uncaught TypeError: Failed to resolve module specifier “vue”. Relative references must start with either “/”, “./”, or “…/”.

  import { ref } from './vue.global3.js'

根据提示进行修改,运行的时候还是出错
Uncaught SyntaxError: The requested module ‘./vue.global3.js’ does not provide an export named ‘ref’

哪个地方出错了,有完整的例子吗?

首先,vue3不是这么玩的,具体方法可以看官网。
然后,我猜你大概是想,,,
其实吧,可以用vite创建一个vue的项目看看,虽然使用了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

但是

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
import './index.css'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

然后

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  {{a}}ww
  <el-button type="success" @click="show">成功按钮</el-button>
</template>

<script>
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup () {
    const a = ref('3333')
    const show = () =>{
      alert('aadd')
    }
    return {
      a,
      show
    }
  }
  
}
</script>

最后你会发现,还是有

node_modules

这个文件夹,而且项目不能直接在浏览器里面运行。

最后,import 只是加载js的一种方法,没啥特殊的。
type = “module”
指的是js可以异步加载。

========================

最最后,我尝试了一下这样

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title></title>

    <script src="js/vue.global.js"></script>

  </head>

  <body>

    <div id="app">

        {{mm}}

    </div>

    <script type="module">

        import { test } from './vite.js'

        console.log('test', test)

        const { a1 } = test()

        console.log('a1', a1)

    </script>

  </body>

</html>
export function test () {

  alert('aa')

  const a1 = Vue.ref('aaa')

  return {

    a1

  }

}

但是,感觉然并卵。

目前只想到了这些。

直接使用请使用vue.esm-browser.js

  • vue(.runtime).esm-browser(.prod).js:
    • For usage via native ES modules imports (in browser via <script type="module">.
    • Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build.