vue.js项目的目录结构

向右看齐 2022-12-15 11:24 249阅读 0赞

一、vue.js项目的目录结构  
参考：  
https://www.runoob.com/vue2/vue-directory-  
structure.html  
https://www.jianshu.com/p/1c83b49d73d8  
https://www.jianshu.com/p/da79b4b7cdec  
我们在 IDE（Eclipse、Atom等） 中打开目录，结构如下所示：  
![在这里插入图片描述][20201016135408138.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center]  
我们打开 APP.vue 文件，代码如下（解释在注释中）：  
src/APP.vue

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <hello></hello>
      </div>
    </template>
     
    <script>
    // 导入组件
    import Hello from './components/Hello'
     
    export default {
      name: 'app',
      components: {
        Hello
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

可以看出来，一个vue页面主要包括3个部分：

1.<template>界面展示代码</template>
    
    2.<script>业务实现代码</script>
    
    3.<style>界面布局代码</style>

重点部分是业务实现

<script>
    
    export default {
    
      name: "Home",
    
      data() {//数据定义
    
        return {};
    
      },
    
      methods: {
    
        // 组件的方法
    
      },
    
      watch: {
    
        // watch监听方法，擅长处理的场景：一个数据影响多个数据
    
      },
    
      computed: {
    
        // computed擅长处理的场景：一个数据受多个数据影响
    
      },
    
      beforeCreate: function() {
    
        // 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
    
      },
    
      created: function() {
    
        // 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
    
      },
    
      beforeMount: function() {
    
        // 在挂载开始之前被调用：相关的 render 函数首次被调用。
    
      },
    
      mounted: function() {
    
        // 编译好的HTML挂载到页面完成后执行的事件钩子
    
        // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
    
        // 此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
    
        console.log("Home done");
    
      },
    
      beforeUpdate: function() {
    
        // 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
    
      },
    
      updated: function() {
    
        // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    
        // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
    
        // 该钩子在服务器端渲染期间不被调用。
    
      },
    
      beforeDestroy: function() {
    
        // 实例销毁之前调用。在这一步，实例仍然完全可用。
    
      },
    
      destroyed: function() {
    
        // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
    
      }
    
    };
    
    </script>

[20201016135408138.png_pic_center]: /images/20221123/69f530782b4149e788b2f26e3785caeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/1f842bc26dd049aa89699e1536299756.png

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot项目目录结构

SpringBoot项目基础结构示例 JAP和Mybatis混合项目目录结构 catelog ├─.gitignore ├─pom.xml

柔情只为你懂/ 2023年10月06日 12:19/ 0 赞/ 28 阅读

相关【Dubbo】——项目目录结构

一、项目结构 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

ゝ一世哀愁。/ 2023年06月22日 13:51/ 0 赞/ 4 阅读

相关 SprinnBoot 项目目录结构

代码层结构根目录：com.example.myproject 配置类config：com.example.myproject.config 常量类co

一时失言乱红尘/ 2023年03月13日 15:25/ 0 赞/ 27 阅读

相关 JavaWeb项目的目录结构

![这里写图片描述][20160515195241832] 其中jsp文件存放在dhywebDemo目录下 [20160515195241832]: /images/2

谁践踏了优雅/ 2022年07月24日 06:14/ 0 赞/ 271 阅读

相关 rails项目的目录结构

appName/ app/ 用于存放模型、视图和控制器的文件 conifig/用于存放配置和数据库连接的参数 config.ru-Rack服务器配置 d

向右看齐/ 2022年07月15日 12:55/ 0 赞/ 264 阅读

相关项目的目录结构

项目中常见的目录结构有两种： 1.主目录按照业务分类，内容目录按照模块分类（即主目录按照MVC架构分类，内部根据项目模块分类）优点：相对比较快定位对应的业务；

分手后的思念是犯贱/ 2022年06月16日 23:42/ 0 赞/ 359 阅读

相关 IONIC--项目目录结构

原[https://blog.csdn.net/sinat\_28597179/article/details/79094235][https_blog.csdn.net_si

超、凢脫俗/ 2022年05月10日 05:10/ 0 赞/ 327 阅读

相关 Java项目的目录结构

一、Common包 Common用来封装一些常用的公共方法。二、Dao包 Dao主要用来封装对数据库的新增，删除，查询，修改。叫做数据访问层。三、Serv

末蓝、/ 2022年01月23日 14:27/ 0 赞/ 605 阅读

相关 Java Web项目的目录结构

Java Web项目要求按特定的目录结构组织文件，当我们在Eclipse中创建完毕一个新的Java Web项目，就可以在Eclipse的“包资源管理器”中看到这个Web项目的目

分手后的思念是犯贱/ 2021年09月18日 02:54/ 0 赞/ 487 阅读

相关 Vuejs基本知识(一)【项目文件夹基本结构】

Webpack下的Vuejs项目文件结构根据前面章节，我们安装了 `webpack, vue-cli`, 并运行成功，看到了Vuejs的第一个页面。那么首先，我们需

灰太狼/ 2021年06月26日 16:06/ 0 赞/ 646 阅读