码迷,mamicode.com
首页 > 其他好文 > 详细

前端模块化

时间:2020-02-17 19:31:27      阅读:19      评论:0      收藏:0      [点我收藏+]

标签:ports   自定义对象   实例   定义变量   代码   web   fun   开发   import   

前端模块化

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

  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中插入我们自定义标签即可

前端模块化

标签:ports   自定义对象   实例   定义变量   代码   web   fun   开发   import   

原文地址:https://www.cnblogs.com/lovecode3000/p/12323068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!