正文
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那配置。
