Vue脚手架项目目录结构以及运行流程

最新推荐文章于 2024-05-17 11:40:43 发布

前端小白李小小

最新推荐文章于 2024-05-17 11:40:43 发布

阅读量215

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45902025/article/details/130853486

版权

一、Vue脚手架项目目录结构（图示）

二、项目的运行流程（通过main.js将App.vue渲染到index.html的指定区域中）

1. App.vue 用来编写带渲染的模板结构

<script>
export default {
    name: 'App',
    components: {
        HelloWorld
    }
}
</script>

2. index.html 中需要预留一个el容器区域

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

3. main.js 把App.vue 渲染到了index.html 所预留的区域中

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

三、组件结构

<!-- 模板，HTML结构 -->
<template>
    <!-- template模板中只能有一个根标签 -->
  <div id="app">

  </div>
</template>

<script>
// 行为，处理逻辑
export default {
    name: 'App',
    
}
</script>

<style>
/* 编写样式 */
</style>