SOURCE

// vue3的 Composition API 的奥义，
// 不要傻傻的把代码都写到setup里面了，分出来写才是王道。
// 便于复用，可以写到单独的js文件里面
const testManage = () => {
    const value = Vue.ref('你好，世界') // 相当于data
    const click = () => { // 相当于 methods 里面的事件
        value.value = '好的，收到！' + new Date()
    }

    return {
        value,
        click
    }
}

// 定义 vue3 的对象
const vue3Composition = {
    data() {
        return {
            show: true,
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]
        }
    },
    mounted() {
console.log(this.$refs)
    },
    setup() { // 传说中的setup
        // 使用上面的定义的“类”，分散setup内部的代码
        const { value, click } = testManage()

        return { // 返回给模板，否则模板访问不到。这里返回的是对象。
            value,

            click
        }
    }
}
// 创建vue3的实例
const vm = Vue.createApp(vue3Composition)
    //   .use(myVuex) // 挂载vuex，myVuex在下面介绍
    //   .use(router) // 挂载路由，router 在下面介绍
    //   .use(antd) // 加载 Ant Design Vue
    .use(ElementPlus) // 加载ElementPlus
    //   .use(vant) // 加载vant
    .mount('#app') // 挂载Vue的app实例

console.log(vm)

<script src="https://unpkg.com/vue@next/dist/vue.global.js">
</script>
<script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js">
</script>
<script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js">
</script>
<!-- element-plus 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css">
<!-- element-plus 引入组件库 -->
<script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js">
</script>


<script src="https://cdn.jsdelivr.net/npm/three@0.123.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/controls/OrbitControls.min.js"></script>

<div id="app">
    <el-dialog v-model='show' class="c6666"></el-dialog>

     <el-image ref='img'
    style="width: 100px; height: 100px"
    :src="url"
    :preview-src-list="srcList">
  </el-image>
</div>