webpack將app.vue(根節點)掛到html

- 安裝
npm i --save-dev vue-loader@13 vue-template-complier@2
// vue-loader: 1.解析.vue文件 2.會自動調用 vue-template-complier


- webpack.config.js
{test: /\.vue$/, use: 'vue-loader'},

- app.vue
1.render函數
    app.vue的本質:
        1.一個對象(組件,vNode)
        2,render接收一個組件
        3,render將其渲染成真實dom
        
<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
    export default {
        data() {
            return {msg: 'maotai22'}
        },
    }
</script>


- main.js
import Vue from 'vue'; // 1,導入的僅是runtime 2, vue = compliler(此處render解決)+runtime
import App from "./App.vue";

new Vue({
    el: "#app",
    render: (h) => h(App)
});
 

掛載其他組件(vue-router)

思路: 先寫2個子組件--註冊到app.vue根節點.

- ./components/home.vue
<template>
    <div>主頁</div>
</template>

- ./components/list.vue
<template>
    <div>列表頁</div>
</template>

- app.vue
<template>
    <div>
        {{msg}}
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {msg: 'maotai22'}
        },
    }
</script>


- main.js
import Vue from 'vue';
import App from "./App.vue";

// 0,導入路由
import VueRouter from "vue-router";
Vue.use(VueRouter); //將router-view註冊為全局組件

//1.導入組件
import home from './components/home.vue';
import list from './components/list.vue';

// 2.寫路由
let router = new VueRouter({
    routes: [
        {path: '/home', component: home},
        {path: '/list', component: list},
    ]
});

// 3,註冊路由
new Vue({
    el: "#app",
    router,
    render: (h) => h(App) //渲染app.vue組件
});
 

[vue]webpack&vue組件工程化實踐