6 4 月 2026, 周一

Vue2:

下载

https://v2.cn.vuejs.org/v2/guide/installation.html#%E7%9B%B4%E6%8E%A5%E7%94%A8-lt-script-gt-%E5%BC%95%E5%85%A5

public/assets/libs 目录下创建一个vue文件夹,把下载的js文件放进去。

配置RequireJS

配置public/assets/js/backend-init.js文件

require.config({
    paths: {
        "vue": "../libs/vue/vue2"
    },
    shim: {
        'vue': {
            exports: 'Vue'
        }
    }
})

js、html引入使用

<div id="app">
        {{ message }}
    </div>
var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })


Vue3:

下载

https://unpkg.com/vue@3/dist/vue.global.js

浏览器打开上方链接,点击右键另存为,到指定的目录下。

配置RequireJS

配置public/assets/js/backend-init.js文件

require.config({
    paths: {
        "vue": "../libs/vue/vue3"//把路径换下
    },
    shim: {
        'vue': {
            exports: 'Vue'
        }
    }
})

js、html引入使用:

<div id="app">{{ message }}</div>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')

和vue2操作一样。

Avatar photo

sion932