vue

1. {test:/\.vue$/,loader:"babel!vue", exclude: "/node_modules/"},

   其中"babel!vue"中叹号"!"代表连接符，表示两个loader连续执行，执行顺序从有向左，即先执行vue loader再执行babel

1. entry:
   {
       "index":[__dirname+'/src/jssrc/index.js',,'webpack-dev-server/client?http://127.0.0.1:8080']
   },
   output: {
       publicPath: "http://127.0.0.1:8080/",
       path: __dirname+'/src/webapp/js',  //输出文件夹
       filename:'[name].js'   //最终打包生成的文件名(just 文件名，不带路径的哦)
   },

2. plugins:[
       new HtmlWebpackPlugin({
           // filename: __dirname+'/src/webapp/index.html',//目标文件
           filename:"index.html",//使用webpack-dev-server时配置
           template: __dirname+'/src/html/index.html',//模板文件
           inject:'body',
           hash:true,
           chunks:["index"]
       })
   ]

1. <style>
   #myage{color:red}
   
   </style>
   
   <template>
   
   <div id="myage"> my age is {}</div>
   
   </template>
   
   <script>
   
   export  default{
   
   data:()=>{
   
   return 
   
   }
   
   }
   
   </script>

2. <style>
   </style>
   
   <template>
   
   <div id="1name">
   
   my name is {}
   
   </div>
   
   </template>
   
   <script>
   
   export default{
   
   props: ['name']
       }
   &lt;/script&gt;</pre>
   
   

父子组件

1. <template>
       <div id="person">
           <myage v-bind:age="age"></myage>
           <myname v-bind:name="name"></myname>
       </div>
   </template>
   <style>
   </style>
   
   <script>
   
   import myage from './myage.vue';
   
   import myname from './myname.vue';
   
   export default{
   
   props:["name","age"],
   
   components:{
   
   'myage':myage,'myname':myname
       }
   }
   
   </script>

2. 注意：v-bind后面对应的变量是子变量的属性

1. {test:/\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,loader:"file" }