vue+webpack開發(三)
阿新 • • 發佈:2018-01-19
font efault pat port ebp 定義 round obj 文件
上一篇博文講了怎麽使用路由,這次主要講講怎麽編寫一個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開發(三)