Vue项目结构及项目解读

一 使用@Vue/cli创建Vue项目

1.1 以管理员身份打开命令行，输入 vue create 项目名称 即可创建项目
1.2 项目创建成功后按照指示切换到项目后下，然后运行npm run serve命令即可运行该项目

二 Vue项目结构

2.1 node_modules

该文件夹下放的是项目所需要的依赖，都是通过npm install安装获取的

2.2 public

public目录为公用目录，里面是图标和模板页，开发时不会涉及该目录

2.3 src

项目的源码目录，项目的开发基本均在该目录下进行

• assets
  专门存放静态资源的，如图片等

• comments
  组件目录，一般用于存放较小的组件

• router
  路由的目录

• views
  页面目录，一般用于存放视图文件

• App.vue

  项目的首页，也是根组件，main.js渲染的便是该组件

• main.js
  整个项目的入口

2.4 .gitignore

git的忽略配置文件

2.5 babel.config.js

babel的配置文件，主要作用是将ES6的语法转换成ES5的语法，有些浏览器不支持ES6语法，开发中基本也不会涉及该文件

2.6 package.json

该文件为项目的配置文件，包括项目的名称、版本、依赖和开发依赖等等

2.7 README.md

项目的说明文件

三 Vue基础项目解读

main.js为项目的入口文件，文件中渲染了App.vue组件，App组件中展示了Home组件和About组件的切换，然后通过路由配置文件index.js配置了Home组件和About组件的路由信息，Home组件中又引入了子组件HelloWorld.vue

3.1 项目顺序

main.js --> App.vue --> index.js(router) --> Home.vue(views) --> HelloWorld.vue

3.2 main.js项目入口

main.js为项目的入口文件，在里面导入相关组件，在里面渲染了App组件

//import为ES6的语法，导入对应的一些组件
import Vue