Vue组件引入外部的js文件的某方法或者静态数据

遇到问题

我们有时候会把一些公共方法写到一个单独的js文件，这样方便多处使用该方法，也很方便找到或者修改方法。
例：我们在写项目的时候会遇到加载本地城市列表的数据，如果放到vue组件里，是极其的不方便，我们来看看怎么解决这个问题。

解决方法

引入js的某个方法

• 方法一

1.在公共js里写方法并export导出。

export function add(a) {
  let b = 2;
  return a+b;
}

2.在组件 import 引入。

import { add } from '../../data/cityLink'

3.使用该方法。

mounted(){
      add(1);
      //打印出来是3
      console.log("add=====",add(1))
    },

• 方法二
  1.你还可以这么引入和使用。

  var Add = require("../../data/cityLink")

mounted(){
      Add.add(1);
    },

---

引入静态数组或者属性

1.在公共js里写方法并export导出。

export function staticArray(a) {
//这里原来是城市列表，代码太多顾用简单数组代替
  var tdata = [1,2,3,4,5]
  return tdata;
}

2.在组件引入并使用该方法。

import { staticArray } from '../../data/cityLink'

data () {
      return {
      //为什么这么写呢？
      //因为我这边的数据是二维数组，如果用下面的方法写一直会报错，某个属性未定义
      //简单数组两者都可
        pickData:staticArray(),
      }
    },

或者

data () {
      return {
        pickData:[],
      }
    },
mounted(){
      this.pickData = staticArray()
    },

如果js文件是一个静态数组（属性）时，也可以在组件中定义一个数组（属性）去接收js文件中的数组（属性），像这样：
this.arrayList = Add.dataArrayList ，然后在组件中使用arrayList 即可。

---

顺便一提，如何引入外部 css文件？

@import '../../css/HelloWorld.css';