前端模块化

为什么要用模块化，因为可以解决两个问题

变量命名冲突
代码复用

ES6中的导出export和导入import

export导出的三种用法

直接定义变量/函数/类的时候前面就加exprot
使用对象类型导出export
```
 export {变量名1,变量名2}
```
如果导入的时候我想自己命名，就可以用default方法导入。
- 导入时自定义命名时不用加大括号
- 同一模块中default只能存在1个
```
  //导出default
  export default function(){}  
  //export default {} 导出对象

  //导入
  import myFun from './xxx.js'  
```

import导入

默认导入方法

 import{变量名1,变量名2} from './xxx.js'

全部以对象的方式导入
```
 import * as 自定义对象名 from './xxx.js'
```
使用的时候以对象的方式使用如 obj.name

commonJS中的导入和导出

导出

module.exports = {变量名1,变量名2}

导入

const {变量名1,变量名2} = require('./xxx.js')
const obj = require('./xxx.js')

el和template区别

真实开发中，不会频繁更改index.html中的代码，而是通过template的方式。
在实例中创建组件，并用组件的内容来替换当前挂载el的模板

在vue中，同时有el和template，template中的内容会替换掉挂载el的模板

new Vue({
  el:'#app',
  template:
    `<div>
      <h2>{{message}}</h2>
     </div>`
  })

template模板内容不建议写在vue内部

如何抽离template：

既然template中内容会替换el内容，我们可以在vue中注册组件，把自定义组件标签放到template中，然后替换el，
这样就实现了进行template抽离

    const App = {
      template:`<div>
          <h2>{{message}}</h2>
         </div>`,
         data(){return {
             message:'hello vue'
         }}
    }
    new Vue({
      el:'#app',
      template:'<App/>',
      components:{
          App
      }
      })

进一步的模块化

可以把抽离出的组件封装新的js文件，使用export导出，原文件中import导入，进一步的模块化
亦或则新建vue文件(文件开头第一字母大写，如App.vue)，vue文件中为我们提供更好的模板，其中包含template、script、style分类，
我们只需把抽离的组件分别放入，然后直接在main.js导入vue即可
使用vue需要安装相应loader，安装方法百度vue-loader或查看webpack-vue文件封装处理笔记