Vue2-从零搭建一个项目（项目基本结构介绍）

目录

一、脚手架安装

二、项目结构介绍

1、项目结构介绍

2、组件关系与脚手架入口内置关系

（1）组件关系

（2）脚手架入口内置关系

---

一、脚手架安装

在默认安装Node.js的前提下，需要进行两两步操作

直接参照下面的博客：

Vue（四）Vue脚手架——手把手教你安装和使用_安装vue脚手架-优快云博客

二、项目结构介绍

当下载好脚手架之后，可以得到如下项目目录：

1、项目结构介绍

①项目入口

main.js，控制App.vue组件，从而控制所有组件

②根页面

public文件夹下的index.html，用于存放根页面

③全局父组件

App.vue，用于管理其它所有组件，直接被main.js控制

④单页面组件存放区

components文件夹，用于存放其它所有组件，父组件除外

⑤项目配置文件

vue.config.js，用于配置个性化脚手架，比如项目入口、项目语法检查等等

⑥项目依赖

package.json，用于记录项目依赖情况

⑦项目包依赖管理

package-lock.json，用于记录项目的外部依赖包的版本和路径等等信息

⑧外部依赖包

node_modules文件夹，用于存放下载后的外部依赖包，vue框架位于其中node_modules\vue\dist\vue.js路径下

2、组件关系与脚手架入口内置关系

（1）组件关系

vue中组件是html、css、js资源一体化形成的vue文件。该文件可以通过export和import实现互相的调用，从而实现组件的嵌套。

在vue中，规定一个vue的实例用于控制一个全局父组件，这个全局父组件叫做App.vue，而全局父组件通过引入的方式嵌套其它的下属组件，从而实现一对多地控制其它组件。

（2）脚手架入口内置关系

vue框架的使用依赖于一个js文件，通过一个js文件创建一个vue的实例，从而控制全局父组件的行为，这就是脚手架入口与vue中组件的关系，这个js文件就是main.js