vue中文件引入以及文件内外的数据套用

npm 版本

npm install xxx 

在.vue文件内部 import xxx  from xx    //eg：import * as d3 from ‘d3’

新建文件js/css 等

在很多情况下，项目需要新建公共样式css文件，或者js文件，将一些样式以及方法在我们需要的.vue文件中使用。

1.css

在assets底下新建css文件夹并新建reset.css文件，要想全局调用，也就是说在整个项目中都生效，就得到main.js文件中进行配置。

import ‘@/asset/css/reset.css’

（补充：关于样式高度的100%配置，在reset文件中默认配置

html,body{

height: 100%;

  margin: 0;

  padding: 0;

}

要想在其他vue页面生效必须给App.vue中#app的样式进行配置，然后在其他页面才能给到height：100%

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

  height: 100%;  //重点

}

  ）

2.自定义js文件

在assets文件底下新建js文件夹，并在文件夹里新建等adout.js文件

在js文件中可以导入你需要的文件 import * as d3 from d3

import * as d3 from 'd3'

//自定义function nodeGraph

function nodeGraph(table){

  var svg = d3.select('.left’)  //d3的使用

    .append('svg')

    .attr('class', 'layout')

    .attr('width', 100)

    .attr('height', 100)

  console.log('end');

  console.log(table);         //输出.vue传输过来的数据

  myself();                   //调用.vue中的method

  my();                       //调用.vue中的method

}

//自定义function get

function get(){

  console.log('this is test data')

}

//导出 function;

export {

  nodeGraph,

  get

}

在.vue文件里面

import {nodeGraph} from ‘../assets/js/about.js’
import {nodeGraph} from "../assets/js/about.js”; //导入function
import {get} from "../assets/js/about.js”;       //导入function

 export default {
    name: "admin_check",
    data(){
        return{
          table:false,
        }
    },
    methods:{
        methods1(){               //调用外部js文件的function
           nodeGraph(this.table); //外部function访问.vue的变量
        },
        methods2:function () {   //调用外部js的function
          get();
        },
        myself(){                //自定义method
          console.log('this is myself data');
        },
    },
    mounted(){
        this.methods1();         
        this.methods2();
        window.myself = this.myself; //外部调用内部的method
        window.my = this.methods2;   //外部调用内部的method
    }
}