[Vue]webpack&vue Component Engineering Practice

Webpack hook App.vue (root node) to HTML

- 安装npm i --save-dev [email protected] [email protected]// vue-loader: 1.解析.vue文件 2.会自动调用 vue-template-complier- webpack.config.js{test: /\.vue$/, use: 'vue-loader'},- app.vue1.render函数    app.vue的本质:        1.一个对象(组件,vNode)        2,render接收一个组件        3,render将其渲染成真实dom        <template>    <div>        {{msg}}    </div></template><script>    export default {        data() {            return {msg: 'maotai22'}        },    }</script>- main.jsimport Vue from 'vue'; // 1,导入的仅是runtime 2, vue = compliler(此处render解决)+runtimeimport App from "./App.vue";new Vue({    el: "#app",    render: (h) => h(App)});

Mounting other components (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.jsimport 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 Component Engineering practice

]