文章目录
前言
一、vue.js目录结构
二、项目文件介绍
        1.src目录
        2.App.vue
        3.assets文件
        4.components文件
        5.views文件夹
        6.router文件(路由器及路由的配置)
        7.store文件夹
        8.public
        9.何时使用public 文件夹？

三、项目整体运行流程

前言

提示：这里可以添加本文要记录的大概内容： 用vue和ue-cli搭建的前端项目是很多企业项目的选择，所以了解项目的结构和项目如何运行是非常有必要的，会给我们平时的工作带来很大的帮助。

一、vue.js目录结构

vue3 echarts项目组织架构树 vue项目的组织架构_前端

二、项目文件介绍

1.src目录

  • main. js是我们的入口文件，整个项目工程入口，用于全局配置，主要作用是初始化vue实例并使用需要的插件。

vue3 echarts项目组织架构树 vue项目的组织架构_html_02

2.App.vue

  • App. vue是我们的根组件(使用标签渲染整个工程的.vue组件) ，所有页面都是在App. vue下进行切换的。其实你也可以理解为所有的路由也是App. vue的子组件。所以我们将router 标示为App. vue的子组件。

3.assets文件

  • assets放可能会变动的文件
  • assets目录中的文件，会被合并到一个文件中，然后进行压缩。多用来存放业务级的js、css等，如一些全局的scss样式文件、全局的工具类js文件等。
  • 拓展: assets目录中可以自己分化出不同地子目录，用来根据自己的需求存放文件。如assets/util/可以用来存放工具类js，assets/api/ 可以用来存放业务接口js等等。

2.App.vue

  • App. vue是我们的根组件(使用标签渲染整个工程的.vue组件) ，所有页面都是在App. vue下进行切换的。其实你也可以理解为所有的路由也是App. vue的子组件。所以我们将router 标示为App. vue的子组件。

3.assets文件

  • assets放可能会变动的文件
  • assets目录中的文件，会被合并到一个文件中，然后进行压缩。多用来存放业务级的js、css等，如一些全局的scss样式文件、全局的工具类js文件等。
  • 拓展: assets目录中可以自己分化出不同地子目录，用来根据自己的需求存放文件。如assets/util/可以用来存放工具类js，assets/api/ 可以用来存放业务接口js等等。
  • assets目录中的文件会被webpack处理解析为模块依赖，只支持对路径形式(例如，在( )。

 

vue3 echarts项目组织架构树 vue项目的组织架构_前端_03

4.components文件

  • components:目录里面放了一个组件文件，可以不用。通常建议将可重用的视图放置在src/ components目录中。诸如页眉， 页脚，广告，网格或任何自定义控件之类的示例，如样式化的文本框或按钮。可以在视图内部访问一个或多个组件。

5.views文件夹

  • vi ews文件夹用来存放“页面”。一个视图可以具有一个或多个组件，并且一个视图实际上打算由导航URL访问。它们通常放在src/views。

6.router文件(路由器及路由的配置)

在项目中使用vue-router管理路由，分为以下几步

  • 第一步:在终端(terminal)中安装vue-router
    npm install -g vue-router
  • 第二步:在src目录下创建一-个router文件夹，在这个文件夹下创建router. js ( 也可以和main. js平级，直接创建router. js)，在router. js文件中配置相应的信息
  • 第三步:入口文件main. js中引入路由实例router，然后在根实例中注册

 

vue3 echarts项目组织架构树 vue项目的组织架构_vue.js_04

7.store文件夹

  • store文件夹：存放\vue中的状态数据，用vuex集中管理

8.public

  • 该文件夹可以用来存放静态资源，存放在该文件夹的东西不会被打包影响，而是会原封不动的输出到dist文件夹中，和vuecli2中的static文件夹一样的。
  • pubilc/index.html是一个模板文件，index.html是一个总的入口文件，作用是生成项目的入口文件。
  • vue是单页面应用，挂在id为app的div下然后动态渲染路由模板，在index.html的body体中只有一个div标签， 其id为app,这个id将会连接到src/main. js内容，src中所有的编译打包后在publ ic下index.html中app里面，webpack打包的js, css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html

何时使用public 文件夹？

  • 你需要在构建输出中指定-一个文件的名字。
  • 你有上千个图片，需要动态引用它们的路径。
  • 有些库可能和webpack不兼容，这时你除了将其用一个独立的script标签引入没有别的选择。

3.项目整体运行流程

先后顺序
index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 >