ES6 如何引入js css等问题

html-css013

ES6 如何引入js css等问题,第1张

在ES6 中有了export default和module.exprot等 导出的概念了

自然有了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