vue.js:浏览器方式引入vue，并解决变量定义符号的冲突

一，代码：

引入相关的库

    <!-- import vue -->
    <script src="https://unpkg.com/vue@3.5.32/dist/vue.global.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.13.7/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus@2.13.7/dist/index.full.js"></script>
    <!-- import axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

js

<script type="text/javascript">
      console.log("begin vue:");
      const { createApp, ref, onMounted } = Vue;
      const App = {
        data() {
          return {
            message: "Hello Element Plus",
          };
        },
        setup() {
                const industry_type = ref('G-54-541');
                const category_list = ref([]);
                const fetchData = async () => {
                    try {
                        // 实际开发中替换为你的接口地址：axios.get('/api/tree-data')
                        // 这里使用 Mock 数据模拟结构
                        const res = await axios.get('http://test.com/api/base/options');
                        console.log("返回的数据:");
                        //console.log(res);
                        console.log(res.data.status_code);

                        // 将扁平数据简单处理成树形结构
                        if (res.data.status_code == 200) {
                            category_list.value = res.data.data.category_list;
                            //alert("success:list:"+category_list);
                            console.log("所属行业数据获取成功");
                        } else {
                            alert("error:"+res.data.msg);
                        }
                    } catch (error) {
                        console.error('获取数据失败:', error);
                    }
                };
                onMounted(() => {
                    fetchData();
                });

                return {
                    //selectedValue,
                    //treeData
                    category_list,
                    industry_type,
                };
        },
        compilerOptions: {    //解决和页面上原有变量定义符号的冲突，重新指定
            delimiters: ['{[[', ']]}']
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
</script>

 html:

                            <span class="el-info-value">
                            <div id="app">
                        <el-tree-select v-model="industry_type" placeholder="所属行业" node-key="nodeId"
                            :data="category_list" :render-after-expand="false"
                            style="width:300px;" />
                             </div>
                            </span>