import及export介绍--仔细理解

import及export介绍

vue框架进来的访问流程

• public/index.html里面有一个<div id="app"></div>;首先它会走道项目的入口(全局脚本文件)src/main.js中,src/main.js中的$mount('#app')就挂载到public/index.html的<div id="app"></div>中了;
• src/main.js里面import App from './App.vue';App.vue的内容就输出来了;

• 大概访问流程就是这样;

全局脚本文件main.js(项目入口)

• import和require是JS模块化编程使用;
• require和exports是CommonJS/AMD中为了解决模块化语法而引入的;
• import/export ; 导入/导出,是ES6引入的新规范,因为浏览器引擎兼容问题,需要在node中用babel将ES6语法编译成 ES5语法;

import 引入使用详解

• import fs from 'fs'
  • from ‘fs’: from后面的’fs’一般是某个文件,引入某个文件;
  • import fs: import后面的fs是对from 'fs’这个’fs’文件的重命名;
  • main.js中import Vue from 'vue'意思就是引入了node_modules插件中的vue,vue是其下面的一个目录,不用单独加其他的;相当于我们引入的vue的js插件类库,import 后面的Vue自己随便定义,是一个别名(重命名),这边定义了别名, 后面就可以直接使用;这个引入表示引入了一种工具;
  • main.js中import App from './App.vue',引入当前目录下的文件App.vue,命别名为App,还可以省略.vue,写成import App from './App;这种一般写成相对路径就可以,一般会加一个./;

export 导出

• export default {};导出的一个默认的配置,里面写一些配置;可以理解为vue.compontent(’’,{
  data
  methods
  create
  });和这个用法类似;可以理解为vue实例;