Vue学习不知道多少天之（Es6转Es5/点Vue文件）

　　Es6语法并没有转换成Es5所以一些浏览器可能不支持，于是下载babel：

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

　　还是到官网把配置复制粘贴到config中。

        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['es2015']
              }
            }
        }

　　exclude功能：这些文件夹排除在外不需要转化。再打bundle一看语法已经改变了 没有const了。

　　Vue的使用：

　　先通过命令安装：

npm install --save vue

　　然后在mainjs中导入：

//vue 开发
import Vue from 'vue'

const app = new Vue({
    el:'#app',
    data:{
        message:'hello webpack'
    }
})

　　通过再webpack config文件中module同级后面增加resolve来控制vue

    resolve:{
      //别名
      alias:{
        'vue$':'vue/dist/vue.esm.js'
      }
    }

　　真实的开发中我们不会在index.html加入冗余的代码，基本上可以说不改，那应该怎么做呢？

　　当el指定了目标后，如果存在template模版内容，则将template模版内容与目标内容直接替换。也就是说index中el目标的内容被完完全全替换成template中的内容了。

　　到了使用点Vue文件的时候了。我们通过写App.Vue文件的格式来使得代码更加具有扩展性：

<template>
    <div>
        <title>标题</title>
        <h2>{{message}}</h2>
        <button @click="btnClick">按钮</button>
        <h2>{{name}}</h2>
    </div>
</template>

<script>
    export default{
        name:'App',
        data(){
            return{
                message:'hello webpack',
                name:'Frank'
            }
        },
        methods:{
            btnClick(){
                console.log("btnClick!!!")
        }
    }
    }
</script>

<style scoped>
    .title{
        color:green;
    }
</style>

　　这样我们在main.js中通过一句话来直接使用它：

import App from './vue/App.vue'

　　但是我们依旧需要下载loader，都是开发时候使用所以--save-dev

npm install vue-loader vue-template-compiler --save-dev

　　build之后还是报错了，原因是版本不兼容的问题，在package.json中改一下Vue-loader的版本为13+，然后重新npm install一下就可以build了。

 

 　　我们可以看到

<h2 class='title'>{{message}}</h2>

　　和定义的样式：

<style scoped>
    .title{
        color:green;
    }
</style>

　　在index中已经生效了，说明代码已经有效了。