zoukankan      html  css  js  c++  java
  • 模块化和webpack模块化打包

    模块化和webpack模块化打包:

    一、❀ 模块化 [导入import-----导出export]

    1、为什么需要模块化?

    JavaScript 发展初期,代码简单地堆积在一起,只要能顺利地从上往下一次执行即可。但随着网站越来越复杂,造成了很多问题:全局变量冲突、函数命名冲突、引入js文件顺序等等

     二、webapck中配置Vue(安装vue依赖)和Vue组件化开发引入:

    (1)webpack模块化vue(安装vue依赖):

      步骤一:通过npm安装Vue : npm install vue --save

      步骤二:在webpack.config.js中添加上 resolve(Vue runtime-compiler版本)

          注意:去vue官网找安装命令和配置代码

     

    (2)Vue组件化开发引入:

    1) 需要安装:安装vue-loader、 vue-template-compiler和修改webpack.config.js的配置文件
    2)Vue组件化开发引入的好处:

    ■ 对比cpn组件(js文件)和cpn组件(Vue文件),显然Vue文件的结构更加清晰

    3)代码对比:
    js文件的Vue组件【可以看到模板template,属于html的,跟Vue(js)混在一起】:
    //将模板以默认(匿名)对象的方式导出
    export default{
      template: `
        <div>
        <button @click="btnClick">点w</button>
        <input type="text" />
        <h1>{{message}}</h1>
        </div>
      `,
      data(){
        return {
          message: '配置Vue啦~'
        }
      },
      methods: {
        btnClick(){
          console.log('感谢你点我哈~');
        }
      }
    }
    ② Vue文件的Vue组件【html、css、js代码分离,结构清晰】:
    <template>
      <div>
        <button class="btnColor" @click="btnClick">小儿子</button>
        <h5>{{message}}</h5>
      </div>
    </template>
    
    <script>
    export default {
      name: "cpn",
      data(){
        return {
          message: '配置Vue啦~'
        }
      },
      methods: {
        btnClick(){
          console.log('感谢你点我哈~');
        }
      }
    }
    </script>
    
    <style scoped>
    .btnColor{
      background-color: greenyellow;
    }
    </style>
     

    本文来自博客园,作者:一乐乐,转载请注明原文链接:https://www.cnblogs.com/shan333/p/15730075.html

  • 相关阅读:
    英语常用口语
    单词记忆(3)
    电视制式及声音制式的划分
    单词记忆(2)
    单词记忆(1)
    低调做人 高调做事
    分析数据库死锁原因的方法
    详细查看数据库SQL执行计划
    如果查看数据库链接数
    刷新所有视图
  • 原文地址:https://www.cnblogs.com/shan333/p/15730075.html
Copyright © 2011-2022 走看看