码迷,mamicode.com
首页 > Web开发 > 详细

vue+webpack开发(三)

时间:2018-01-19 17:22:57      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:body   module   obj   等等   red   click   htm   span   jad   

上一篇博文讲了怎么使用路由,这次主要讲讲怎么编写一个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开发(三)

标签:body   module   obj   等等   red   click   htm   span   jad   

原文地址:https://www.cnblogs.com/amiezhang/p/8317915.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!