Vue+webpack Development (III)

The last blog post tells you how to use routing, this time to talk about how to write a Vue component

Vue defines a file with a "single-file component" suffix of '. Vue ' that looks like this:

<Template>  <Div>    <Divv-for= "N in obj": Class= "MSG"@click= "Say (n)">{{n}}</Div>  </Div></Template><Script>Exportdefault{data: ()={        return{msg:'Hello, I'm slag-shining.', obj: {name:'Zhangxiaomie', Age: A}}, methods:{say (n) {alert (n) }}}</Script><styleLang= "Scss">HTML{background:Red;a{font-weight: -;    }} div{Font-weight:Bold;  }</style>

The visible Vue file is divided into three, which became our usual html+js+css, corresponding to three large tags <template> <script> <style>.

Surprisingly, they can be added with the lang attribute to determine which precompiled language to use, for example: <template lang= "Jade" > <script lang= "typescript" > <style lang= " Scss ">

Of course we need to add vue-loader to the webpack.config.js.

module:{    loaders:[      {        test:/\.vue$/,        loader: ' Vue-loader ',        include:path.resolve (__dirname, ' src ')      }    ]  }

Face Lang,vue-loader will actively look for node_module under there is no corresponding such as Scss-loader, Jade-loader, Typescript-loader and so on loader help us compile, I need us to go webpack.config that configuration again.

Vue+webpack Development (III)