import echarts from 'echarts'
2 引入工具类
第一种是引入单个方法
import {axiosfetch} from './util'
下面是写法，需要export导出
export function axiosfetch(options) {
}
第二种 导入成组的方法
import * as tools from './libs/tools'
其中tools.js中有多个export方法,把tools里所有export的方法导入
vue中怎么用呢？
Vue.prototype. tools.method调用就可以了
export 和 export default 又有什么区别呢？
下面看下区别
先是 export
import {axiosfetch} from './util'
//需要加花括号 可以一次导入多个也可以一次导入一个，但都要加括号
如果是两个方法
import {axiosfetch,post} from './util'
再是 export default
import axiosfetch from './util'//不需要加花括号 只能一个一个导入
3.导入 css文件
import 'iview/dist/styles/iview.css'
如果是在.vue文件中那么在外面套个style
<style>
@import './test.css'
</style>
4.导入组件
import name1 from './name1'
import name2 from './name2'
components:{
name1,
name2,
}
安装
npm install xlsx --save
npm installiview--save
main入口引入
import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
使用
<button @click="exportExcel">导出excel
:columns="columns1" :data="data1"></Table>
JS引入封装excel
import excelfrom '../../config/excel'
data(){
return{
columns1: [
{
title:'Name',
key:'name'
},
{
title:'Age',
key:'age'
},
{
title:'Address',
key:'address'
},
],
data1: [
{
name:'John Brown',
age:18,
address:'New York No. 1 Lake Park',
date:'2016-10-03'
},
{
name:'Jim Green',
age:24,
address:'London No. 1 Lake Park',
date:'2016-10-01'
},
{
name:'Joe Black',
age:30,
address:'Sydney No. 1 Lake Park',
date:'2016-10-02'
},
{
name:'Jon Snow',
age:26,
address:'Ottawa No. 2 Lake Park',
date:'2016-10-04'
},
],
methods: {
exportExcel() {
if (this.data1.length) {
const cloneData =this.data1
const params = {
title: ['Name', 'Age', 'Address', ],
key: ['name', 'age', 'address', ],
data: cloneData,
autoWidth:true,
filename:'工单列表'
}
excel.export_array_to_excel(params)
}else {
this.$Message.info('表格数据不能为空！')
}
}
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>莱医特普教官网</title>
<link rel="stylesheet" href="./css/iview.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/componentCss.css">
<link rel="stylesheet" href="./css/journalism.css">
<script src="js/public/jquery.min.js"></script>
<script src="js/public/vue.js"></script>
<script src="js/public/iview.js"></script>
<script src="./component/footerPage.js"></script>
<script src="./component/headePage.js"></script>
<script src="./component/slideshow.js"></script>
<script src="js/journalism.js"></script>
</head>
<body>
<div id="journalism">
<heade-page navname="新闻"></heade-page>
<div class="content">
<slideshow text="查看详情" link="./images/journalism/banner.png"></slideshow>
<div class="banner journalism-in">
<div class="listTitle">最新新闻</div>
<ul class="journalism-list">
<li v-for="(item,index) in journalism" :key="index">
<div class="pic">
<img :src="item.link" alt="">
</div>
<div class="introduce">
<div class="title" :title="item.title">{{item.title}}</div>
<div class="text" :title="item.text">
{{item.text}}
</div>
<div class="time">发布日期{{item.time}}</div>
</div>
</li>
</ul>
<div class="journalism-page"><page :total="100" show-elevator /></div>
</div>
</div>
<footer-page></footer-page>
</body>
</html>
