Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
2017-12-02 22:08
591 查看
nodejs系统环境,以及
vue-cli脚手架工具,在执行完命令后,我们就已经将一个初始项目跑起来了。
但是,我们的项目代码,还一个都没有看到。因此,这个章节,我们来认识一下所有的文件。
初始文件解析
├── README.md // 项目说明文档 ├── node_modules // 项目依赖包文件夹 ├── build // 编译配置文件,一般不用管 │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config // 项目基本设置文件夹 │ ├── dev.env.js // 开发配置文件 │ ├── index.js // 配置主文件 │ └── prod.env.js // 编译配置文件 ├── index.html // 项目入口文件 ├── package-lock.json // npm5 新增文件,优化性能 ├── package.json // 项目依赖包配置文件 ├── src // 我们的项目的源码编写文件 │ ├── App.vue // APP入口文件 │ ├── assets // 初始项目资源目录,回头删掉 │ │ └── logo.png │ ├── components // 组件目录 │ │ └── Hello.vue // 测试组件,回头删除 │ ├── main.js // 主配置文件 │ └── router // 路由配置文件夹 │ └── index.js // 路由配置文件 └── static // 资源放置目录1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
好,如上,就是我们的
vue初始化后得到的一个项目的完整结构。其他大多数文件我们是不用管的。如果要管的话,我在后面的章节也会去详细说明。
我们绝大多数的操作,就是在
src这个目录下面。默认的
src结构比较简单,我们需要重新整理。
另外
static资源目录,我们也需要根据放置不同的资源,在这边构建不同的子文件夹。
我们来配置 src 目录
先不要管这些文件的内容,我们先建立这些空的文件在这边。然后我们后面去完善它。我们的这个项目是要做两个页面,一个是
cnodejs的列表页面,一个是详情页面。
所以,我把项
d21a
目文件夹整理成如下的结构
├── App.vue // APP入口文件 ├── api // 接口调用工具文件夹 │ └── index.js // 接口调用工具 ├── components // 组件文件夹,目前为空 ├── config // 项目配置文件夹 │ └── index.js // 项目配置文件 ├── frame // 子路由文件夹 │ └── frame.vue // 默认子路由文件 ├── main.js // 项目配置文件 ├── page // 我们的页面组件文件夹 │ ├── content.vue // 准备些 cnodejs 的内容页面 │ └── index.vue // 准备些 cnodejs 的列表页面 ├── router // 路由配置文件夹 │ └── index.js // 路由配置文件 ├── style // scss 样式存放目录 │ ├── base // 基础样式存放目录 │ │ ├── _base.scss // 基础样式文件 │ │ ├── _color.scss // 项目颜色配置变量文件 │ │ ├── _mixin.scss // scss 混入文件 │ │ └── _reset.scss // 浏览器初始化文件 │ ├── scss // 页面样式文件夹 │ │ ├── _content.scss // 内容页面样式文件 │ │ └── _index.scss // 列表样式文件 │ └── style.scss // 主样式文件 └── utils // 常用工具文件夹 └── index.js // 常用工具文件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
因为我们删除了一些默认的文件,所以这个时候项目一定是报错的,先不管他,我们根据我们的需求,新建如上的项目结构。这些都是在
src目录里面的结构。
我们来配置 static 目录
这个目录比较简单,因为这个项目我们的资源不多,但是,为了我的这系列博文能够适合大多数的项目的开发,一般,我搞成下面这个样子:├── css // 放一些第三方的样式文件 ├── font // 放字体图标文件 ├── image // 放图片文件,如果是复杂项目,可以在这里面再分门别类 └── js // 放一些第三方的JS文件,如 jquery1
2
3
4
你可能很奇怪,我们不是把样式和
JS都写到里面去么,为什么还要在这边放呢?
因为,如果是放在
src目录里面,则每次打包的时候,都需要打包的。这回增加我们的打包项目的时间长度。而且,一些地方放的文件,我们一般是不会去修改的,也没必要
npm安装,直接引用就好了。你可以根据自己的情况,对这些可以不进行打包而直接引用的文件提炼出来,放在资源目录里面直接调用,这样会大大的提高我们的项目的打包效率。
好,就这么搞,我们的文件架构就搞好了,下一张,我们来开始写代码了。
如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。
本文由 FungLeo 原创,点击-首发链接。
相关文章推荐
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战(三)认识项目所有文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十三)集成 UEditor 百度富文本编辑器
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目
- 考勤打卡项目所有的配置文件
- Android studio 项目构建五|合并多个清单文件
- 第13周-项目1-小玩文件-将文本文件中的所有行加上行号后写到新文件中
- 【Android开发-3】认识认识项目文件结构和作用
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理
- es6文件监听,项目构建测试
- 创建第一个Android应用项目并认识项目的文件结构
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery
- 删除项目所有文件和数据库
- Android导入开源库及jar等文件到基于Android Studio构建的项目中