import { Link } from 'react-router'
/* 导入组件样式 */
import styles from './styles'
/*根据这个例子，在render的时候，最外部的className就采用{`${styles}`}的写法，这个方括号内的style就是你自己写的样式名*/
export class Header extends Component {
render() {
return (
<header className={`${styles}`} ref="header">
<div className="container">
<div className="row">
<div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<nav>
<Link to="/home" activeClassName="active">
Home
</Link>
<Link to="/list" activeClassName="active">
Redux
</Link>
</nav>
</div>
</div>
</div>
</header>
)
}
}
在vue中导入自定义的css文件或js文件
css文件
在main.js中导入公共的css
import '../static/css/common.css' //引入公用css
在页面中引入单独css
<style scoped>
@import '../../static/css/header.css'
</style>
Js文件
自定义js 中写：
function title(t){
alert(t)
}
export {
title //多个方法在此处json中export出去
}
页面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>
<script>
import {title} from './js/common.js' //可以选择需要的方法引入
export default {
data(){
return{
}
},
methods:{
clickme(){
title('你点我了')
}
}
}
</script>
或者
import Comjs from './js/common.js' //引入公用js
Vue.prototype.$comjs = Comjs//添加到vue属性中
自定义js 中写：
const comjs = {
}
comjs.title = function (title) {
alert(title)
}
export default comjs
页面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
clickme(){
this.$comjs.title('你点我了')
}
}
}
</script>
返回主页处泥泞遥，看满山花开。博客园首页联系管理随笔 - 57 文章 - 14 评论 - 0 阅读 - 30870
vue中常用的几种import（模块、文件）引入方式，export，export default，全部/部分文件的导出/导入
一，import（模块、文件）引入方式
1 引入第三方插件
import echarts from 'echarts'
2.导入 css文件
import 'iview/dist/styles/iview.css'
如果是在.vue文件中那么在外面套个style
3.导入组件
import name1 from './name1'
import name2 from './name2'
components:{
name1,
name2,
},
4．import '@…'的语句
@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径
5.引入工具类
第一种是引入单个方法
import {axiosfetch} from './util'
下面是写法，需要export导出
export function axiosfetch(options) {
}
第二种 导入成组的方法
import * as tools from './libs/tools'
其中tools.js中有多个export方法,把tools里所有export的方法导入
vue中怎么用呢？
Vue.prototype.tools=tools直接用this.tools.method调用就可以了
说到这 export 和 export default 又有什么区别呢？
下面看下区别
先是 export
import {axiosfetch} from './util'//需要加花括号 可以一次导入多个也可以一次导入一个，但都要加括号
如果是两个方法
import {axiosfetch,post} from './util'
再是 export default
import axiosfetch from './util'//不需要加花括号 只能一个一个导入
二，export,import和export default的关系
export 与import是es6中新增模块功能最主要的两个命令。
1.export与expor
