前言

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

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue.js目录结构

二、项目文件介绍

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

3.项目整体运行流程

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

vue项目结构文件介绍及项目运行流程相关推荐

vue项目结构目录介绍
一:目录结构介绍二:项目介绍 build 文件夹及子目录这里面是一些webpack的配置,主要用于项目打包时的一些设置.这里不去更详细的深入,相关的文件及配置会在后面用到时在详细的介绍. co ...
idea软件下载安装及项目结构操作介绍
01.idea开发工具(下载安装) idea概述: 是用于Java语言开发的集成环境,它是业界公认的目前用于Java程序开发最好的工具. 集成环境:把代码编写,编译,执行,调试等多种综合到一起的开发工 ...
Android入门（建立项目与项目结构简要介绍）
内容概要: 1 如何建立项目附带简要介绍 2 对项目结构进行简要介绍 1.如何建立Android项目 (1)进入Android studio " File ->New-> ...
boot sprint 项目结构_京淘项目03 08.28
JSP动态web资源,打war包 ##spring boot整合JSP 创建项目 spring SpringBoot整合web资源,, 在main文件下,新建webapp文件夹,,把WEBINF目录粘 ...
项目结构_组织结构对项目影响系列课程---项目式组织结构
在前面的几篇文章中我们分别介绍了,系统型(简单型),职能型,弱矩阵,平衡矩阵,强矩阵结构的优点和缺点及它们带给项目的影响.今天我们介绍项目式组织结构的优点和缺点及其可能产生的影响. 从结构图不难发现, ...
黑马头条移动项目(一)：项目介绍、项目技术点介绍、项目包介绍
1. 项目介绍黑马头条移动端是一个IT资讯移动web应用,有着和今日头条类似的资讯浏览体验. 主要功能:资讯列表.标签页切换,文章举报,频道管理.文章详情.关注功能.点赞功能.评论功能.搜索功能.登 ...
多项目结构_[网红项目]碳云大厦
周坚荣高成结构顾问中心副总工程师设计总监高级工程师从事建筑结构设计工作11年,代表作:碳云大厦项目.平安金融中心南塔.深圳民治第三工业区更新项目.广东潭洲会展中心二期.广东省第十四届省运会主体 ...
dajngo3,vue3前端项目搭建,vue项目结构的介绍
前端项目搭建查看当前node版本 [dalaojun@localhost django_luichun]$ node -v v14.15.0 查看npm版本 [dalaojun@localhost ...
03-官方种子项目,目录,文件介绍
SSM框架项目各文件内容及项目实践
本文发表于2016年6月,写于作者学生时期.文中使用到的技术和框架可能不是当下最佳实践,甚至很不"优雅".但对于刚接触JavaEE和Spring的同学来说,还是能有很多收获的,大牛 ...

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

文章目录

前言