vue3使用require和import方式 引入js

发布时间:2022-12-19 00:13:17 作者:yexindonglai@163.com 阅读(13076)

vue中require与import的区别

在es6之前js一直没有自己的模块语法,为了解决这种尴尬就有了require.js的出现。在es6发布之后js又引入了import的概念。使得不清楚两者之间的区别在实际使用过程中造成了自己的误解

ES6标准发布后,module成为标准,标准使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们依然采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。

1、import 用法

创建一个js文件 importIndex.js,内容如下

  1. export default {
  2. fun(){
  3. return "123"
  4. }
  5. }

创建一个vue文件About.vue,内容如下

  1. <template>
  2. <div class="about">
  3. <h1>This is an about page</h1>
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import { defineComponent } from '@vue/composition-api'
  8. import aa from '../js/importIndex'
  9. export default defineComponent({
  10. setup() {
  11. console.log(aa);
  12. // 调用func方法并打印返回值
  13. console.log("fun的返回值:"+aa.fun());
  14. // console.log(Ao.aa);
  15. },
  16. })
  17. </script>

此时项目结构如下

然后运行通过npm run serve运行vue项目,在浏览器输入网站http://localhost:8080/about 来访问about页面,控制台打印结果如下

通过 require 导入

先创建一个requireIndex.js文件,内容如下

  1. export default{
  2. aa : "hello aa!",
  3. req(){
  4. return "req"
  5. },
  6. }

接下来创建一个AboutRequire.vue文件,内容如下

  1. <template>
  2. <div class="about">
  3. <h1>This is an about page</h1>
  4. </div>
  5. </template>
  6. <script lang="ts">
  7. import { defineComponent } from '@vue/composition-api'
  8. var a = require('../js/requireIndex.js')
  9. export default defineComponent({
  10. setup() {
  11. console.log(a.default.aa);
  12. // 调用func方法并打印返回值
  13. console.log("req的返回值:"+a.default.req())
  14. },
  15. })
  16. </script>

此时项目结构如下

运行项目,在浏览器输入http://localhost:8080/aboutRequire访问后显示如下图

关键字前端