ECMAScript 6 模块之import 和 export

文章目录

      • ES6 模块化的导入和导出
        • 第一步
        • 第二步
        • 第三步
        • 第四步
        • 整体代码结构

ES6 模块化的导入和导出

*注!*本篇是根据个人理解所写的一个非常简单的导入导出,有帮助则用之,有错或者有更好的理解可以提出,共同学习。

注:下面后缀.js文件的命名都是自己命名的!

第一步

先创建好自己文件夹,创建HTML页面,然后在页面中,添一个vue的坑

,然后引入,在src中引入"./build.js" 注:build这个命名根据个人喜好自己命名记住不要管自己文件夹中有没有这个build.js这个文件,在后面会通过命令行安装

第二步

在根目录文件夹中创建一个 main.js,在这个文件中是要写 整个程序的入口。

  • 首先在 main.js 中引入 vue.js
    import Vue from './lib/Vue/vue.js' 这里是自己vue.js的路径
    然后,创建一个Vue实例
new Vue({
	el:'#app',
	components:{
		app:App  //这里用到了App子组件,所以要创建一个App子组件
	},
	template:'' 
});
  • 在根目录文件夹中创建一个 App.js ,在程序入口 main.js 中导入。import App from './App.js'

第三步

在 App.js 中导出

var app={
	template:`
		
我是app组件
`
}; //导出 export default app;

第四步

在创建的根目录下,用cmd方式打开。

  • 首先输入npm init -y 这时候根目录中会下载一个 package.json 文件。
  • 然后输入 npm i [email protected] -s 下载webpack。
  • 然后打开 package.js 这个文件进行配置。例如: "scripts": { "build": "webpack ./main.js ./build.js" }, 注:每个参数中间有空格
  • 最后仍在根目录下输入命令 npm run build 下载 build.js 文件。
    到这里所有的就结束了,之前没有的文件也通过命令行进行下载安装配置,打开自己的项目即可!

整体代码结构

在这里我附上 html、main.js、App.js 的整体代码块。中间的 cmd 命令行配置非常简单,按操作步骤进行即可。

// html 代码



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ESC6模块化title>
head>
<body>
    <div id="app">div>
    <script type="text/javascript" src="./build.js">script>
body>
html>
// main.js 代码


// 引入vue
import Vue from '../lib/Vue/vue';
// 导入App.js
import App from './App'; 

new Vue({
    el: '#app',
    components: {
        app: App
    },
    template: `
    
    `
});
// App.js 代码

var app = {
    template: `
    
我是app组件
`
} export default app; //App导出,跟上边导入 的大小写不用管

你可能感兴趣的:(前端,JavaScript,ECMAScript,6)