html 文件添加引用 vue 文件作为自定义组件

废话不多说，直接上代码！side.vue 文件内容<template><el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s"><div style="background-color: black; height: 60

张学徒

2874人浏览 · 2022-01-21 22:23:16

张学徒 · 2022-01-21 22:23:16 发布

废话不多说，直接上代码！

需要创建两个文件：side.vue、index.html

side.vue 文件内容

<template>
  <div>这个是 {{pageName}} 页面</div>
</template>

<script>
  module.exports = {
     data: function() {
         return {
             pageName: 'Side.vue'
         }
     }
 }
</script>

<style scoped>
</style>

index.html 文件代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="shortcut icon" href="#"/>
    
    <!-- Vue -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    
  </head>
  <body>
    
    <div id="app">
        <side></side>
    </div>
    
    <script>
        new Vue({
            el: "#app",
            /* 引用 vue 文件为组件*/
            components: {
                'side': httpVueLoader('side.vue')
            }
        })
    </script>
    
  </body>
</html>

我在 HBuilder 里的执行效果

在这里插入图片描述

注意不能直接以本地打开方式进行查看，因为没有效果，必须以网络形式进行查看！ 你可以下载 HBuilder 软件在他的内置浏览器里进行查看，这个是以网络地址的形式进行查看的，不会出现跨域请求的问题。

推荐阅读：

HTML5中使用vue组件

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^