vue中import用法
时间: 2024-04-25 12:21:19 浏览: 90
vue-typescript-import-dts-TypeScript声明文件,该文件允许将'import'与.vue文件一起使用。-Vue.js开发
5星 · 资源好评率100%
在Vue中,import的用法主要有三种情况。
第一种情况是在script标签中使用import导入常量或方法。在Vue的script标签中,可以使用import语句导入一些js方法或公用方法。但需要注意的是,在Vue模板中直接使用导入的方法时,会报方法不存在的错误。为了解决这个问题,需要在methods中声明导入的方法,或者通过自定义方法返回。例如:
```javascript
import comm, { test2, test3 } from './comm.js';
export default {
data() {
return {};
},
mounted() {
console.log('test', comm.test()); // 直接使用import导入的方法
console.log('test2', test2()); // 直接使用import导入的方法
},
methods: {
test2, // 在methods中声明的import方法,可以在template中直接使用
getPI() {
return comm.PI; // 通过方法可以直接使用import引入的常量
}
}
};
```
第二种情况是在Vue中引入工具类。在Vue中引入工具类有两种方式。一种是引入单个方法,需要使用import语句,并且需要在工具类文件中使用export导出。另一种是导入成组的方法,需要使用import * as语法,并且需要在工具类文件中使用export导出。例如:
```javascript
// 引入单个方法
import { axiosfetch } from './util';
// 引入成组的方法
import * as tools from './libs/tools';
// 在Vue中使用
Vue.prototype.$tools = tools;
```
第三种情况是在style标签中引入CSS文件。在Vue中,可以使用@import语句在style标签中引入CSS文件。例如:
```html
<style>
@import url(../../assets/css/defaultStyle.css);
</style>
```
综上所述,Vue中的import用法主要包括在script标签中导入常量或方法、引入工具类和在style标签中引入CSS文件。
阅读全文