.html工程使用vue.js组件之间相互如何调用(行政区下拉组件为例)

最新推荐文章于 2023-12-06 14:49:34 发布

winner_corl

最新推荐文章于 2023-12-06 14:49:34 发布

阅读量506

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Sicily_winner/article/details/106099820

在不支持import和require的HTML工程中，使用Vue.js和Element-UI时，需要将Vue实例化和组件定义合并到单独的JS文件中，然后在每个HTML页面引用该JS文件来实现组件的全局注册和调用。在过程中可能会遇到组件未注册和Element-UI引入问题，解决办法是确保Vue实例化和组件引入的顺序正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、前言

现在我在做一个项目，但是没有node环境仅仅就是单纯的html工程，所有的内容都是通过js来写，也就是说vue中import和require语法也不支持，在这种情况下我们原先在vue工程中使用import ｛x｝来引入的方式就会不适合了，当前使用的ui为element-ui。

下面直接上手吧！

2、初步代码

首先我们先要写一个很基本vue页面在.html文件中：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head th:replace="common/header :: header">
</head>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" th:href="@{~/css/ui/reset.css}">
    <link rel="stylesheet" th:href="@{~/css/ui/index.css}">
    <script th:src="@{~/js/ui/adaptionDP.js}"></script>
    <script th:inline="javascript">
        maqueServiceUrl = [[${maqueServiceUrl}]];
    </script>
</head>


<body>
<div id="app">
    <div>
        <el-cascader :options="options" :show-all-levels="false"
                     @change="onChange" v-model="value"
                     :props="{ checkStrictly: true }"
                     placeholder="请选择" clearable></el-cascader>
        1:{
  
  {code}}

    </div>
</div>
</