前端模块化

Posted 2021-03-09 lovecode3000

前端模块化

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

1. 变量命名冲突
2. 代码复用

ES6中的导出export和导入import

export导出的三种用法

1. 直接定义变量/函数/类的时候前面就加exprot

2. 使用对象类型导出export

    export {变量名1,变量名2}

3. 如果导入的时候我想自己命名，就可以用default方法导入。
   • 导入时自定义命名时不用加大括号

   • 同一模块中default只能存在1个

       //导出default
       export default function(){}  
       //export default {} 导出对象
     
       //导入
       import myFun from './xxx.js'  

import导入

1. 默认导入方法

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

2. 全部以对象的方式导入

    import * as 自定义对象名 from './xxx.js'

   使用的时候以对象的方式使用 如 obj.name

commonJS中的导入和导出

导出

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

导入

1. const {变量名1,变量名2} = require(‘./xxx.js‘)
   
2. 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
      }
      })

进一步的模块化

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

总结

最后也就是说，我们创建了一个vue文件作为组件来使用。再在main.js中导入并注册，
利用template可以替换el模板的规则，同组件来替换当前模板

扩展

新建两个vue文件，vue文件默认导出，所以我们只需在另一文件中导入并注册，
在template中插入我们自定义标签即可