vue index .html渲染原理

最新推荐文章于 2021-11-17 10:08:48 发布

GSDS3143514

最新推荐文章于 2021-11-17 10:08:48 发布

阅读量308

点赞数

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/Sscholar/p/10059097.html

版权

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hsd</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'//导入组件
import router from './router'
Vue.config.productionTip = false
new Vue({//新建vue对象
  el: '#app',//vue实例挂载作用域
  router,
  components: { App },//注册组件
  template: '<App/>'//模板,使用<App></App>代表挂载元素的内容即index.html中的<div id="app"></div>中的内容
})

App.vue

<template>
  <div id="app">
      <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

用模板<App></App>代表挂载元素的内容后,app.vue组件以及其自组件中的内容就渲染在了index.html中

转载于:https://www.cnblogs.com/Sscholar/p/10059097.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

GSDS3143514

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue index .html渲染原理

index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title...
复制链接

扫一扫