vue+webpack开发（三）

上一篇博文讲了怎么使用路由，这次主要讲讲怎么编写一个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" scoped>
  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">

值得注意的是在style上的scoped，这表明这里的样式是私有的，不会影响到外面其他地方的样式

我们当然我们需要在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、tsc等等帮我们编译，不需要我们再去webpack.config那配置。