vue-cli：渲染过程理解2（vue init webpack方式创建）

最新推荐文章于 2025-09-06 08:01:57 发布

转载最新推荐文章于 2025-09-06 08:01:57 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qq254980080/p/10423735.html

文章标签：

#javascript #webpack #ViewUI

本文详细介绍了使用Vue.js构建Web应用程序的过程，从main.js入口文件的配置到App.vue组件的搭建，再到HelloWorld.vue组件的引入与使用。解析了Vue项目的基本结构，包括组件注册、模板语法及组件间的数据传递。

main.js: 入口文件

import Vue from 'vue'    //引入node_modules中的vue
import App from './App'  //引入当前路径(src)下的App.vue并命名为App, .vue后缀省略

Vue.config.productionTip = false   //关闭浏览器console中, 开发环境转为生成环境提示

new Vue({
  el: '#app',    　　　　　　//作用域是index.html中的<div id="app"></div>
  components: { App },   　//将引入过来的App声明为局部组件App, {App: App}
  template: '<App/>'  　　 //创建template, 用App这个组件替换index.html中的<div id="app"></div>
})

index.html

<body>
    <div id="app"></div>
</body>

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>  //③模板中使用HelloWorld组件
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'    //①引入HelloWorld.vue

export default {     //将App.vue暴露出去
  name: 'App',       //name暂时没用
  components: {
    HelloWorld       //②将HelloWorld声明为局部组件 {HelloWorld: Helloworld}
  }
}
</script>

<style>
#app {
}
</style>