VUE3（四）目录结构

更好的了解项目的目录结构，能更好的去开发项目：

当前展示的目录结构是基于vite搭建的项目。

目录结构如下图所示：

111.png

我的代码是托管在我自己的git服务器上边的，默认安装的时候是不存在的。

1：dist目录

存放打包之后的代码文件

2：node_modules

存放项目依赖的包目录

3：public

存放公共文件目录

4：src

存放代码的主要目录

222.png

（1）：assets

我这里存放了每个页面对应的css、js以及图片文件

（2）：components

存放项目使用的公共组件

（3）：router

存放vue-router相关的文件

（4）：types

存放typescript 支持vue文件的相关配置文件

（5）：views

存放页面文件（.vue）

（6）：App.vue

根组件文件

（7）：main.ts

入口文件ts文件

// 引入vue3中vue框架的createApp这个方法，创建一个实例
import { createApp } from "vue";
import App from "/@/App.vue";
// 创建实例
const app = createApp(App);
// 将示例挂载至节点
app.mount("#app");

5：.gitignore

Git相关文件，配置不上传至git库的文件，了解更多，请移步：《Git 忽略提交 .gitignore》

6：index.html

项目入口文件

7：package.json

存放依赖包管理及命令管理信息文件

（1）：scripts

"scripts": {
    "dev": "vite",
    "build": "vite build"
  },

这里是命令配置,我的项目时采用vite创建的，因此命令有vite

yarn dev
yarn build

（2）：开发环境及生产环境

Dependencies：生产环境
devDependencies：开发环境

8：readme.md

使用markdown编写的文档文件

9：ts.config.json

Typescript的配置文件

10：vite.config.ts

项目配置文件

11：yarn.locak

使用yarn包管理生成的文件，由yarn自动生成，自动管理。不需要管。

|-node_modules      -- 项目依赖包的目录
|-public            -- 项目公用文件
  |--favicon.ico    -- 网站地址栏前面的小图标
|-src               -- 源文件目录，程序员主要工作的地方
  |-assets          -- 静态文件目录，图片图标，比如网站logo
  |-components      -- Vue3.x的自定义组件目录
  |--App.vue        -- 项目的根组件，单页应用都需要的
  |--index.css      -- 一般项目的通用CSS样式写在这里，main.js引入
  |--main.js        -- 项目入口文件，SPA单页应用都需要入口文件
|--.gitignore       -- git的管理配置文件，设置那些目录或文件不管理
|-- index.html      -- 项目的默认首页，Vue的组件需要挂载到这个文件上
|-- package-lock.json --项目包的锁定文件，用于防止包版本不一样导致的错误
|-- package.json    -- 项目配置文件，包管理、项目名称、版本和命令

有好的建议，请在下方输入你的评论；

欢迎访问个人博客
https://guanchao.site