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.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)});挂载其他组件(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组件工程化实践
原文地址：https://www.cnblogs.com/iiiiiher/p/9063270.html