自然有了import和require 引入的解决方法
requrie 同样也可以引入css和js
返回主页处泥泞遥,看满山花开。博客园首页联系管理随笔 - 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
这是个打包的问题。所有组件化都有这个问题。其实题主这个问题,我觉得按照页面级别打包比较好。毕竟用户进了页面a,不一定会进入页面b。按需加载啦。对于组建来说:组件颗粒度很小的时候,页面加载的角度来说整体引入css比较好。但是组建颗粒度不太小的时候,也可以把css加在js里。怎么爽怎么来。至于编出来的代码各种style标签,给浏览器看的代码,没有性能问题就好。es6不还要用babel编译成es5么,不也是各种用我表个态:我是css打在组建里的那一派。你看这个页面就有37个style。阿里旅行双11召唤页合并css派 @Saviio