webpack-创建Vue时el和template的关系

webpack-创建Vue时el和template的关系

之前写vue的html代码，都是在html代码写挂载的样式，

 	<div id="app">
        <h2>{{message}}</h2>
    </div>

但是真正开发时不会这么写，html代码就不要随便加东西。如果在实例vue中，在template下写的样式会直接复制到html挂载的根盒子里，
HTML:

 <div id="app">
    </div>

main.js代码：

import Vue from 'vue'
new Vue({
    el:'#app',
    template:`
        <div>
            <h2>{{message}}</h2>
        </div>
    `,
    data:{
        message:'hello world'
    }
})

.vue文件

真正项目开发时，要vue封装到一个vue文件中。
新建一个App.vue文件：

<template>
<!-- //模板相关东西放到这里 -->
    <div>
        <h2 class="title">{{message}}</h2>
        <button @click='btnClick'>按钮</button>
        <h2>{{name}}</h2>
    </div>
</template>

<script>
//脚本相关东西放到这里面
export default {
    name:"App",
    data(){
        return{
            message:'Hello world',
            name:'lingling'
        }
    },
    methods:{
    btnClick(){
    }
}
}
</script>
 
<style scoped>
/* 样式 */
 .title{
     color:red;
 }
</style>

main.js文件：

import Vue from 'vue'
// import App from './vue/app'
import App from './vue/App.vue'

new Vue({
    el:'#app',
    template:`<App/>`,
    components:{
        App
    }
})

此时.vue文件不能被加载，需要下载 vue-loader 和vue-template-compiler

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

再修改webpack.config.js配置：
在rules下添加以下内容：

{
              test:/\.vue$/,
              use:['vue-loader']
            }

最后打包

npm run build