上一篇博文讲了怎么使用路由，这次主要讲讲怎么编写一个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开发（三）
原文地址：https://www.cnblogs.com/amiezhang/p/8317915.html