vuecli3目录结构

Vue CLI是Vue.js的标准化工具，用于快速搭建Vue项目。在Vue CLI3中，我们可以使用一个命令来创建并初始化一个Vue项目的基础目录结构。VueCLI3的目录结构包括src、public、node_modules、babel.config.js、package-lock.json、package.json等文件，本文将从多个角度对VueCLI3的目录结构进行分析。

1. src目录

src目录包含了我们要编写业务逻辑和样式的所有内容，其中包括main.js、router、store、views和components等文件夹。

1.1. main.js

main.js是Vue的入口文件，它初始化了Vue实例，并在这个实例中挂载了组件、路由和Store。

1.2. router

router文件夹包含router.js文件，它定义了整个应用程序的路由规则。我们可以在router.js中配置所有的路由信息，包括路由的名称、路径、组件等。

1.3. store

store文件夹包含store.js文件，它定义了应用程序的全局状态管理。我们可以在store.js中定义所有我们需要用到的全局变量和方法，同时也可以定义一些我们需要的辅助方法。

1.4. views

views文件夹包含所有的视图组件。这些组件负责呈现我们的页面，并且可以使用我们引入的所有数据和方法。

1.5. components

components文件夹包含了所有的公共组件。这些组件可以在整个应用程序中进行重复使用，可以大大简化我们的开发工作。

2. public目录

public目录下放置的是静态资源，例如图片、字体、favicon.ico等。这些资源将直接被复制而不会进行打包处理。

3. node_modules目录

node_modules目录包含了应用程序中使用到的所有依赖。

4. babel.config.js

babel.config.js对Babel进行配置，以便我们在应用程序中使用最新的ES6+语法。

5. package-lock.json

package-lock.json是一个生成的文件，它记录了应用程序中安装的所有依赖项的确切版本和依赖关系。这个文件可以用来恢复包的状态。

6. package.json

package.json文件是整个应用程序的配置文件，其中包含了应用程序的名称、版本、依赖关系等信息。我们可以在这个文件中定义我们的应用程序的脚本命令、依赖项、作者等信息。