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中已經生效了，說明代碼已經有效了。