上一篇博文講了怎麽使用路由，這次主要講講怎麽編寫一個vue組件

vue定義了一種“單文件組件”後綴為‘.vue’的文件，大概長這樣子：

<template>
  <div>
    <div v-for="n in obj" :class="msg" @click="say(n)">
      {{n}}
    </div>
  </div>
</template>

<script>
    export default {
      data: ()=>{
        return{
          msg: 
 
‘大家好~我是渣渣輝‘,
          obj : {
            name: ‘zhangxiaomie‘,
            age: 22
          }
        }
      },
      methods:{
        say(n){
          alert(n)
        }
      }
    }
</script>

<style lang="scss">
  html{
    background: red;
    a{
      font-weight: 600;
    }
  }
  div
 
{
    font-weight: bold;
  }
</style>

可見Vue文件一分為三，成為了我們以前常見的html+js+css了，對應了三個大標簽<template> <script> <style>。

令人驚喜的是它們上面都可以加上lang屬性來決定用哪種預編譯語言，例如：<template lang="jade"> <script lang="typescript"> <style lang="scss">

我們當然我們需要在webpack.config.js上加上vue-loader

module:{
    loaders:[
      {
        test: /\.vue$/,
        loader: ‘vue-loader‘,
        include: path.resolve(__dirname,‘src‘)
      }
    ]
  }
 

面對lang，vue-loader會主動尋找node_module下有沒有對應的如scss-loader、jade-loader、typescript-loader等等loader幫我們編譯，我需要我們再去webpack.config那配置。

vue+webpack開發（三）