模組化和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>

 

 

 

 
Tags:

VirMach 便宜 VPS