Vue CLI 3.x版本是Vue.js官方推出的一个项目脚手架工具，它可以帮助开发人员快速创建Vue.js项目，并提供了一些常用的配置选项和插件，使得开发更加便捷。下面我们来讲解一下Vue CLI 3.x版本创建项目时各个文件夹的功能和注意事项。
-
node_modules： 该文件夹存放了项目所依赖的所有npm包和模块。 -
public： 该文件夹存放了不需要打包处理的静态文件，例如index.html、favicon.ico等。该文件夹下的资源会被直接复制到构建后的文件夹中。 -
src： 该文件夹是项目的主要开发目录，包括了各种组件、路由、状态管理、工具函数等等。src/assets文件夹用于存放需要打包的静态资源，但是不应该存放太大的文件，因为这些文件会被打包到最终的 JavaScript 文件中，会影响页面加载速度。另外，还可以创建一个名为static的子文件夹，用于存放一些不需要被 Webpack 处理的静态资源，比如一些第三方库或者一些不需要被打包的图片等。src/components该文件夹存放了项目中的公共组件，例如头部、尾部、侧边栏等等，建议根据业务场景划分子文件夹，以便更好地组织代码。src/router文件夹用于存放路由配置文件，如果你不需要使用 Vue Router，可以不创建该文件夹。src/store文件夹用于存放 Vuex 状态管理文件，如果你不需要使用 Vuex，可以不创建该文件夹。src/views文件夹用于存放页面级别的 Vue 组件，建议根据业务场景划分子文件夹，以便更好地组织代码。main.js：Vue 应用程序的入口文件，包含了应用程序的启动逻辑。App.vue：Vue 应用程序的根组件，包含了应用程序的基本结构和布局。
-
assets： 该文件夹存放了项目中需要打包处理的静态资源，例如图片、字体等等。 -
plugins： 该文件夹存放了Vue.js插件。 -
utils： 该文件夹存放了项目中的工具函数、常量等。
注意：
components 文件夹是存放 Vue 组件的文件夹，其中的组件可以在项目中被复用。包含一些通用的 UI 组件，比如按钮、表单、列表等，例如：
common文件夹：存放应用程序的公共组件。pages文件夹：存放应用程序的页面组件。ui文件夹：存放应用程序的 UI 组件
关于根目录的resource文件夹
在一些 Vue 项目中还可能存在一个名为 resource 的文件夹，这个文件夹通常用于存放一些公共的资源文件，比如一些通用的样式表或者图片资源。在 resource 文件夹中，可以创建多个子文件夹，用于分类存放不同类型的资源文件。
需要注意的是，resource 文件夹并不是 Vue CLI 3.x 官方推荐的文件夹，它是一些团队或者个人根据自己的项目需求自行创建的。如果你认为在你的项目中需要一个 resource 文件夹来存放公共的资源文件，你可以自行创建。但是，在使用这个文件夹时，也需要注意不要与其他文件夹产生冲突，最好与其他文件夹有明显的区分。
public文件夹跟assets有什么不同
public 文件夹和 assets 文件夹都是用于存放静态资源的文件夹，但它们有着不同的作用和使用场景。
public 文件夹中的资源不会被 Webpack 处理，而是直接复制到输出目录。这些资源通常是你的应用程序的主 HTML 文件、favicon、图片、音频等等。在 Vue CLI 3.x 中，可以在 public 文件夹中创建 index.html 文件来作为应用程序的主 HTML 文件。这个 HTML 文件会被 Webpack 自动注入打包后的 JS 和 CSS 文件，从而创建出最终的页面。
assets 文件夹中的资源会被 Webpack 处理，主要用于存放应用程序的 CSS、图片、字体等静态资源，这些资源在应用程序的代码中被引用，并最终被打包成 JS 和 CSS 文件。
因此，一般来说，如果你的资源需要被 Webpack 处理，你应该将它们放在 assets 文件夹中。如果你的资源不需要被 Webpack 处理，比如 HTML 文件和一些静态文件，你可以将它们放在 public 文件夹中。
总之，public 文件夹和 assets 文件夹都是用于存放静态资源的文件夹，但它们的作用和使用场景不同，需要根据具体情况进行选择和使用。
在创建Vue CLI 3.x项目时，需要注意以下几点：
- 在安装Vue CLI 3.x之前需要先安装Node.js和npm，确保系统环境可以使用npm。
- 在创建项目时需要选择所需的配置项和插件，例如Babel、ESLint、TypeScript、Vue Router、Vuex等。
- 在项目开发中，需要遵循Vue.js的代码规范和开发风格，例如使用单文件组件、避免直接操作DOM等等。
- 在项目构建和打包时，需要遵循优化的原则，例如使用异步组件、代码分割、按需加载等等。
总之，Vue CLI 3.x提供了非常便捷的项目搭建和开发工具，但是在使用过程中也需要遵循Vue.js的开发规范和最佳实践，保证项目质量和性能。
