前端-vue项目结构文件介绍及项目运行流程

一、前言

要想学会一门框架，并用来进行开发，则需要了解其对应的项目结构，组成，以及如何运行，是非常重要的，会给我们的学习和工作以及未来的发展带来很大的帮助的。

二、创建 vue 项目

npm install -g vue-cli 
vue init webpack vue_demo 
cd vue_demo 
npm install 
npm run dev 
访问: http://localhost:8080/

三、vue.js目录结构

1.node_modules：安装的依赖包
2.public：公共的静态资源
3.src：放的是核心的开发组件和文件
3.1.assets：放一些静态资源，例如图片、图标、字体、less文件
3.2.components：公共组件
3.3.router：路由相关配置
3.4.store：vuex相关配置，存放\vue中的状态数据
3.5.views：路由对应的文件
3.6.App.vue：路由组件的顶层路由
3.7.main.js：vue入口文件
4. .editorconfig：是帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式规范的工具
5. .env：Vue项目中，.env文件是运行项目时的环境配置文件。但是在实际开发过程中，有本地开发环境、测试环境、生产环境等，不同环境对应的配置会不一样。
因此，需要通过不同的.env文件实现差异化配置。
6. .gitignore：就是git软件要忽略的文件列表. 如果要忽略某些文件,在Git工作区的根目录下创建一个特殊的.gitignore文件,然后把要忽略的文件名填进去,Git就会自动忽略这些文件。
7. .gitlab-ci.yml：将.gitlab-ci.yml文件添加到存储库的根目录，并将GitLab项目配置为使用Runner，则每次提交或推送都会触发CI 管道。该.gitlab-ci.yml文件是您配置CI如何处理项目的位置。它位于存储库的根目录中。在对存储库进行任何推送时，GitLab都会查找该.gitlab-ci.yml 文件，并根据该文件的内容在Runners上启动作业。
8.babel.config.js：Babel是一个JS编译器，主要作用是将ECMAScript 2015+ 版本的代码，转换为向后兼容的JS语法，以便能够运行在当前和旧版本的浏览器或其它环境中。
9.ecp-vue.iml：iml是配置文件,存着当前project的一些配置信息。
10. index.html：主页面文件
11. package.json：应用包配置文件
12. README.md: 应用描述说明的 readme 文件
13.vue.config.js：vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

四、项目文件介绍

1.src目录

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

import { crearteApp } from 'vue';
import App from './App';
crearteApp(App).mount('#app'); //挂载方法，将vue的根实例挂载到id为'#app'的空间里去，从而实现数据双向绑定

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处理解析为模块依赖，只支持绝对路径形式。

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，然后在根实例中注册

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标签引入没有别的选择。

六.项目整体运行流程

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