由于公司的项目是需要单点登录的，我们的项目不能直接用vue，只能用传统的方法，然后为了组件化，最好是使用vue，试过用httpVueLoader，但由于不能使用import，而作者又出了vue3-sfc-loader。
此次测试是以vue2和element ui为例子，如果是vue3和element ui plus的请自行去官网查看用法哦，谢谢！
（请注意css文件的import的路径哦！）
html引入vue.js，vue可以import js文件和css文件！

目录结构如下：
test02
–components
----unit03.vue
----unit04.vue
–css
----index.css
–js
----unit01.js
–testVueSfc.html

代码如下：
testVueSfc.html

<!DOCTYPE html>
<html>
<body>
  <div id="app"></div>
  <!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue2-sfc-loader.js"></script>
  <!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- <link rel="stylesheet" href="./css/index.css"> -->
  <script type="module">
    const { loadModule } = window['vue2-sfc-loader'];

    const options = {
      moduleCache: {
        vue: Vue
      },
      async getFile(url) {
        
        const res = await fetch(url);
        if ( !res.ok )
          throw Object.assign(new Error(res.statusText + ' ' + url), { res });
        return {
          getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
        }
      },
      addStyle(textContent) {

        const style = Object.assign(document.createElement('style'), { textContent });
        const ref = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, ref);
      },
    }

    loadModule('./components/unit03.vue', options)
    .then(component => new Vue(component).$mount('#app'));
  </script>
</body>
</html>

unit03.vue

<template>
  <div>
    <div class="fontSty">{{msg}}</div>{{a}}
    <el-button type='primary' size='mini' @click='handleClick'>按钮</el-button>
    <i class="el-icon-edit"></i>
    <unit04 :content='msg'></unit04>
  </div>
</template>
<script>

import unit04 from './unit04.vue'
import {toBeTest} from '../js/unit01.js'
export default {
  components:{unit04},
  data(){
    return {
      msg:'我是unit03组件',
      a:'213'
    }
  },
  methods:{
    handleClick(){
      this.a = toBeTest()
      // console.log(a);
    }
  }
}
</script>
<style scoped>

</style>

unit04.vue

  <div>
    <div class="fontSty2">{{content}}</div>
    <div class="a">{{msg}}</div>
    <el-button type='success' size='mini'>按钮</el-button>
    <i class="el-icon-edit"></i>
  </div>
</template>
<script>
export default {
  props:['content'],
  data(){
    return {
      msg:'我是unit04组件'
    }
  }
}
</script>
<style scoped>
@import "css/index.css";
.a{
  color:blue;
}
</style>

index.css

.fontSty{
  color:red;
}
.fontSty2{
  color: green;
}

unit01.js

function toBeTest(){
  console.log('测试');
  return '测试'
}
module.exports = {
  toBeTest
}
# vue.js # javascript
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟