vue+vue-router+axios+element-ui构建vue实战项目之三(解读项目文件)

在上一篇《vue+vue-router+axios+element-ui构建vue实战项目之二(nodejs、vue-cli等环境安装)》中,我们通过安装 nodejs 系统环境,以及 vue-cli 脚手架工具,在执行完命令后,我们就已经将一个初始项目跑起来了。

那么这篇文章,我们就来认识下项目中的各文件夹及里面的文件,它们是什么,以及它们的作用。

话不多说,开干。

 

项目初始文件解读

 1 ├── node_modules                    # 项目依赖包文件夹
 2 ├── build                           # 编译配置文件,一般不用管
 3 │   ├── build.js
 4 │   ├── check-versions.js
 5 │   ├── logo.png
 6 │   ├── utils.js
 7 │   ├── vue-loader.conf.js
 8 │   ├── webpack.base.conf.js
 9 │   ├── webpack.dev.conf.js
10 │   └── webpack.prod.conf.js
11 ├── config                           # 项目基本设置文件夹
12 │   ├── dev.env.js                   # 开发配置文件
13 │   ├── index.js                     # 配置主文件
14 │   └── prod.env.js                  # 编译配置文件
15 ├── src                              # 项目源码编写文件
16 │   ├── App.vue                      # APP入口文件
17 │   ├── assets                       # 初始项目资源目录,回头删掉
18 │   │   └── logo.png
19 │   ├── components                   # 组件目录
20 │   │   └── Hello.vue                # 测试组件,回头删除
21 │   ├── main.js                      # 主配置文件
22 │   └── router                       # 路由配置文件夹
23 │       └── index.js                 # 路由配置文件
24 └── static                           # 资源放置目录
25 ├── index.html                       # 项目入口html模板
26 ├── package.json                     # 项目依赖包配置文件
27 ├── .babelrc                         # babel 配置
28 ├── .postcssrc.js                    # postcss 配置
29 ├── .editorconfig                    # editor 配置
30 └── README.md                        # 项目说明文档

好,以上就是项目完整的文件目录结构。

其实,我们开发的时候,主要就是操作 src 里面的文件,不过开发的时候,还需要我们重新整理下里面的文件。

另外 static 资源目录,我们也需要根据放置不同的资源,在这边构建不同的子文件夹。

 

配置src和static目录

现在配置 src 目录,也可以根据自己的实际需求配置目录:

 1 ├── api                           // 接口调用工具文件夹
 2 │   └── index.js                   
 3 ├── components                    // 组件文件夹
 4 │    ├── header.vue                
 5 │    └── footer.vue                  
 6 ├── config                        // 项目配置文件夹
 7 │   └── index.js                  // 项目配置文件
 8 ├── page                          // 页面文件夹
 9 │   ├── content.vue               // 内容页面
10 │   └── index.vue                 // 首页列表
11 ├── router                        // 路由配置文件夹
12 │   └── index.js                    
13 ├── style                         // scss 样式存放目录
14 │   └── style.scss                // 主样式文件,可以按分类创建多个文件夹
15 └── utils                         // 常用工具文件夹
16 │   └── index.js                    
17 ├── App.vue                       // APP入口文件
18 └── main.js                       // 项目配置文件

接下来,我们配置 static 目录,比较简单,适用于绝大多数项目:

1 ├── css               # 放第三方的样式文件
2 ├── font              # 放字体图标文件
3 ├── image             # 放图片文件,里面可以根据图片种类创建文件夹
4 └── js                # 放第三方的JS文件,比如datepicker

 

可能有人会疑惑,src 目录里面已经包含样式和JS,为什么还要在 static 文件里面放置呢?

因为,如果是放在 src 目录里面,则每次打包的时候,都需要打包的。但是 static里面的文件,我们一般是不会去修改的,也没必要 npm 安装,直接引用就好了。

好了,本篇文章就这么多,下节就开始实战吧!

 

vue+vue-router+axios+element-ui构建vue实战项目之三(解读项目文件)

上一篇:企业级仓库-Harbor


下一篇:You have 14 unapplied migration(s). Your project may not work properly。。。。报错!