Fastadmin 引入Vue

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

4205dc1725172423

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

1f8de42c45171328

配置RequireJS

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

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

js、html引入使用

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

Vue3:

下载

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

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

图片[6]-Fastadmin 引入Vue-IT网络技术分享

配置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操作一样。

THE END
喜欢就支持一下吧
点赞0 分享