当前位置：首页 > news >正文

[Vue]App.vue讲解

news 来源：原创 2025/5/10 0:10:20

页面中可以看见的内容不再在index.html中进行编辑，而是在App.vue中进行编辑。

组件化开发

在传统的html开发中，一个页面的资源往往都写在同一个html文件中。这种模式在开发小规模、样式简单的项目时会相当便捷，但当项目规模越来越大，一个页面中统括的代码量越来越多，此时传统的开发模式会对日后的测试和维护造成极大不便。

就同后端编程中分entity、datasoure等包的思想一样，组件化开发是将一个页面中的不同区域的内容分成一个个组件，每个组件都有自己的结构、样式、行为。最后在统括到一起。这样便于代码复用提高开发效率，也便于维护降低运维成本。

组件也分根组件和普通组件，普通组件可以有很多个，但根组件只能有一个（根组件只能有一个的限制只在vue2有，vue3的更新解除了这个限制）

App.vue

下面是App.vue中的主要部分分别分为三个：<template>、<script>、<style>

<template>：

结构，相当于原html中的<head><body><footer>部分。原本的index.html现在只做一个容器，在Vue中，所有的元素的编写最后都会集成在根组件中，再渲染进html容器中。

在Vue中，<template>中根盒子<div>只能有一个，而Vue3则没有这个限制。

<script>：

编写js逻辑，原本在Vue对象中编写的data、watch、methods（事件）、钩子函数等属性和行为也在这里面写。

<script>
//意味导出当前组件的配置项
//在这里面写原本在Vue对象中编写的data、watch、methods（事件）、钩子函数等属性和行为
export default {
  created() {
  },
  methods: {
    fn(){
      alert("点击了盒子");
    }
  }
}
</script>

<style>：

样式，可支持less，需要装包less和less-loader（yarn add less lessloader -D）。

默认不支持less，需要我们写个lang="less"来声明使用less