webpack将app.vue(根节点)挂到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.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组件
});
原文地址:https://www.cnblogs.com/iiiiiher/p/9063270.html
时间: 2024-10-07 18:56:48