我想在没有构建和CDN的情况下使用Vue3

html5 • • 问答

https://v3.vuejs.org/guide/installation.html#download-and-self-host

https://v3.vuejs.org/guide/installation.html#from-cdn-or-without-a-bundler

如何在没有 CDN 的情况下导入 vue？

所以我关心的是没有构建步骤。一切都在纯人类可读的 js 中。

我发现这个 https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack

我将尝试在统一嵌入式浏览器中实现它https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459

挑战是我的界面无法从网络加载东西，也无法编译。

回答

  1. Create index.html

index.html (using Vue 3 - important!)

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Minimalistic Vue JS</title>
  <script type="text/javascript" src="./vue.global.prod.js"></script>
</head>

<body>
  <div>
    {{ message }}
  </div>
</body>
<script>
    var app = Vue.createApp({
      data() {
        return {
          message: "Hello world"
        }
      }
    })
    app.mount("#app")
</script>
</html>

  1. Download vue.global.prod.js from https://unpkg.com/browse/vue@3.0.11/dist/vue.global.prod.js and save it along index.html

  2. Open index.html in browser

Works just fine in Chrome or Firefox.

Notes

for the record my code is the repo I linked plus the vue libraries I downloaded and added in the root

Note: following is related to the repo linked before question was changed

The code in repo is written for Vue 2 (just try to open https://unpkg.com/vue in the browser). So if you downloaded distros for Vue 3 (for example the link I'm using above) the code from repo will not work

Even if you download Vue 2 version, the code in the repo will not work when opened from file system as it is using native ES6 modules - problem I described in the previous version of my answer:

As described here and here ES6 modules are always loaded with CORS. So just opening the index.html in the browser (without using server) will not work (definitely does not work in Chrome). Maybe Unity Embeded Browser has this restrictions weakened (as it's purpose is to be embeded) but without possibility to use desktop browser to develop and test your app, your experience will be terrible. I would reconsider the decision not to use bundler...

Update 1
Building Vue.js Applications Without webpack (sample project) will not help you either as it is again using native ES6 modules

以上是我想在没有构建和CDN的情况下使用Vue3的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>