Vue中import篇：模块、JS文件、class类文件、数组对象文件、第三方、样式等方式集合

目录

一、引入第三方插件

二、引入函数方法

2.1 单个函数引入

2.1.1 JS中export函数

2.1.2 JS中export default函数

2.2 多个函数引入

2.3 成组全部引入

三、引入数组、对象JS文件

四、引入class类js文件

五、引入CSS文件

---

vue中经常需要import各种文件，比如样式、组件、方法、js文件、模块等，具体每种如何使用。

一、引入第三方插件

概述

第三方插件，比如echart、jquery等

引入流程

1、先install安装

npm  install 插件名称  --save

2、import导入

import echarts from 'echarts'

3、其他配置

全局引入的需要再main.js中配置，一般每个js库官网中会有说明

二、引入函数方法

2.1 单个函数引入

2.1.1 JS中export函数

1、js文件的写法

新建一个JS文件util.js

export  function  testFunciton(options){
//执行代码，注意代码中最后一般都需要return返回值
}

2、引入需要加花括号，支持多个导入

import {testFunction} from './util';   //方法名需要加花括号

2.1.2 JS中export default函数

1、js文件写法

export default function  testFunciton(options){
//执行代码，注意代码中最后一般都需要return返回值
}

//ES6写法
const testFunction=(options)=>{
let x=   ;
return x;
}
export default testFunction;

2、引入不需要花括号，只能一个个导入

import testFunction from './util';   //方法名不需要加花括号

2.2 多个函数引入

1、js文件中写函数

多个函数的引入只能用export ，不能用export default

export  function  testFuncitonA(options){
//执行代码，注意代码中最后一般都需要return返回值
}
export  function  testFuncitonB(options){
//执行代码，注意代码中最后一般都需要return返回值
}
export  function  testFuncitonC(options){
//执行代码，注意代码中最后一般都需要return返回值
}

2、函数引入

import {testFunctionA,testFunctionB,testFunctionC,} from './util';   //方法名需要加花括号

2.3 成组全部引入

1、引入方式

 import * as hydroServiceUtil from "../utils/hydroServiceUtil.js";

将整个模块当作单一对象进行导入，该模块所有的导出都会作为对象的属性存在。

2、调用方式

全局调用

main.js中先引入,然后添加vue属性配置：

Vue.prototype.$hydroServiceUtil = hydroServiceUtil;

直接用 this.$hydroServiceUtil.method调用就可以了

单个vue文件调用

直接用hydroServiceUtil.method调用

三、引入数组、对象JS文件

3.1 引入数组

//js文件
const config=[1,2,3,4,5]   //一般这种方式的数组引入的都是一个常亮，不会变了，所以const即可
export default config;

3.2 引入对象

//js文件
const config={
    id：1,
    name:"zhangsan",
}
export default config;

//调用时候，vue中先import进去，然后名称.id即可

四、引入class类js文件

有时候需要js文件写class类

//classtest.js文件中内容
class Person{
    // 构造函数
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    todoSome(){
        alert(this.x + "的年龄是" +this.y+"岁");
    }
}
export default  Person;

使用时候，先在vue文件中import进来，然后直接new即可

var test= new classtest('haha','33');
test.todoSome();

五、引入CSS文件

参考：Vue项目：style样式篇

四、引入组件