详解VUE中常用的几种import(模块、文件)引入方式


Posted in Javascript onJuly 03, 2018

1 引入第三方插件

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 = tools

直接用 this.$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,
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
javascript每日必学之循环
Feb 19 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Vue props用法详解(小结)
Jul 03 #Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 #Javascript
详解Vue中使用Echarts的两种方式
Jul 03 #Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 #Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 #Javascript
js实现各浏览器全屏代码实例
Jul 03 #Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 #Javascript
You might like
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
在Django中创建动态视图的教程
2015/07/15 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
Python 学习教程之networkx
2019/04/15 Python
Python代码太长换行的实现
2019/07/05 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
法律进社区实施方案
2014/03/21 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
启动仪式策划方案
2014/06/14 职场文书
公司聚餐通知
2015/04/22 职场文书