Vue-Cli工程文件夹和文件的用处

Vue-Cli工程文件夹和文件的用处（结尾附带截图）

dist 文件夹

• 默认 npm run build 命令打包生成的静态资源文件，用于生产部署。
  
  

build文件夹

• webpack.base.conf.js：用于定义Webpack的基本配置，适用于开发和生产环境。
• build.js：用于构建生产版本的脚本，通过Webpack打包项目。
• webpack.prod.conf.js：扩展了基本配置，专为生产环境提供的Webpack配置。
• dev-client.js：用于热更新的插件，在开发过程中实时重新加载更改。
• dev-server.js：设置开发服务器，基于Express框架提供本地开发服务。
• vue-loader.conf.js：配置Vue文件的加载器，处理.vue文件中的模板、脚本和样式。
• utils.js：包含一些公共的Webpack配置函数。
  
  没有build文件夹的原因主要是因为Vue CLI 3对项目结构进行了优化，将打包后的文件放置在dist文件夹而不是传统的build文件夹。vue.config.js文件成为配置Webpack和其他构建选项的主要方式，替代了之前版本中繁琐的配置文件散落问题。
  
  

node_modules

• 存放通过npm安装的所有依赖模块，确保项目依赖的正确加载和管理。
  
  

public

• 主要存放项目的静态资源，如图标、图片和脚本等，这些资源不会被Webpack处理，而是直接复制到构建输出的目录中。
  
  public文件夹中的index.html是一个模板文件，用于生成项目的入口文件。在Webpack打包过程中，生成的JavaScript和CSS文件会自动注入到此模板中，从而形成最终加载到浏览器中的页面。用户访问项目时，浏览器会默认打开生成好的index.html文件。
  
  

src文件夹

• assets：存放静态资源，如共用的CSS文件、图片等，Webpack会将这些资源打包到JS文件中。
• components：存放各种Vue组件，这些组件可以被页面调用并重复使用。
• router:
      1. 路由配置：该文件夹包含路由的定义和相关配置，通常在router/index.js中定义。此文件设置了不同的路径及其对应的组件，从而实现单页面应用的导航功能。
      2. 路由守卫：除了基本路由配置外，router文件夹还可能包含路由守卫的配置，用于控制访问特定路由的权限。
      3. 模块化路由：对于大型项目，路由可能会被拆分成多个文件，以便于管理和扩展。这时，每个路由配置文件会被放置在相应的子文件夹中。
• store:
      1. 状态管理：Vuex是Vue用于状态管理的官方库，其核心概念包括state、mutation、action和getter。这些概念在store文件夹中的不同文件中实现，使得状态管理更加结构化。
      2. 模块化存储：store文件夹通常会包含多个模块，每个模块可以有自己的state、mutation和action。这样，状态管理可以按功能或组件进行划分，提高代码的可维护性。
      3. 全局状态：store文件夹中通常还会有一个index.js或store.js文件，用于创建和配置Store实例，并整合各个子模块。
• views：存放应用的页面组件。这些组件通常代表应用中的不同“页面”或“视图”，并且是与路由（router）紧密关联的。每个.vue 文件在 views 文件夹中通常代表一个独立的页面，这些页面通过Vue Router进行导航和渲染。
• App.vue：项目的入口组件，所有其他组件最终都会嵌套在这个组件中。
• main.js：项目的入口文件，加载Vue框架，初始化项目状态，挂载App组件到DOM中。
  
  

.gitignore

• 指定Git忽略的文件和文件夹，例如node_modules和dist文件夹，避免将它们纳入版本控制。

babel.config.js

• Babel的主要配置文件，用于定义Babel在转换JavaScript代码时的行为。

jsconfig.json

• JavaScript项目的配置文件，用于指定项目的根目录、编译选项和代码片段等。

package.json

• 记录项目的基本信息和依赖关系，包括版本号、作者、依赖库及脚本命令等。

package-lock.json

• 主要用于锁定依赖版本和确保安装一致性。

README.md

• 一个项目的文档，主要用于为项目提供详细的描述和使用说明。

vue.config.js

• 是一个可选的配置文件，用于自定义Vue项目的构建、开发和部署选项。

• 本文仅作为个人笔记使用，无商业用途。
• 若转载，请先声明来源。