笔记大全

uniapp怎么import

更新时间：2023-10-19

前言

在Web开发中，我们编写的代码通常需要依赖其他的库或框架，这些依赖可以通过import关键字来实现。在uni-app项目中，同样可以使用import来导入所需的库或组件，本文将会详细介绍uni-app中import的用法及注意事项。

1. 导入组件

在uni-app中，我们可以通过import的方式来导入所需的组件，并利用这些组件来构建页面。下面是一个简单的示例，演示了如何导入uni-app官方提供的Button组件：

// 导入Button组件
import uniButton from '@/components/uni-button/uni-button.vue';

export default {
  components: {
    uniButton
  }
}

在上面的示例中，我们将uni-button组件导入到页面中，并以uniButton的名称来注册。在模板中，我们可以直接使用uniButton来引用该组件。

2. 导入外部库

除了导入组件，我们还可以通过import的方式来导入外部的JS库，比如jQuery、Lodash等。下面是一个简单的示例，演示了如何导入Lodash库：

// 导入Lodash库
import _ from '@/lib/lodash.min.js';

export default {
  data() {
    return {
      list: [1,2,3,4,5]
    }
  },
  computed: {
    filteredList() {
      // 使用Lodash库中的函数对数组进行过滤
      return _.filter(this.list, n => n % 2 === 0);
    }
  }
}

在上面的示例中，我们将Lodash库导入到页面中，并以_的名称来引用。在computed中，我们使用Lodash库中的filter函数对list数组进行了过滤。

3. 导入CSS样式

在uni-app中，我们可以通过import的方式来导入CSS样式，比如自定义的样式文件或第三方UI库的样式。下面是一个简单的示例，演示了如何导入自定义的样式文件：

/* custom.css */

.bold {
  font-weight: bold;
}

// 导入自定义样式
import '@/common/styles/custom.css';

export default {
  data() {
  return {
    message: 'Hello World!'
  }
},
}

在上面的示例中，我们将自定义的样式文件custom.css导入到页面中，并以@的路径形式来引用。在样式的定义中，我们使用了.bold类来定义粗体文本样式。

4. 注意事项

使用import时，需要注意以下几点：

导入相对路径需要以@或./开头，@表示项目根目录。
导入组件时，需要在页面的components属性中注册组件。
导入的文件必须是JS文件或具有script标签的HTML文件（样式文件除外）。

总结

通过本文的介绍，我们了解了uni-app中import的用法及注意事项。我们可以利用import关键字来方便地导入所需的组件、外部JS库或CSS样式，从而更加高效地进行开发。

c语言编程笔录