在《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目》中,我们通过安装 nodejs
系统环境,以及 vue-cli
脚手架工具,在执行完命令后,我们就已经将一个初始项目跑起来了。
但是,我们的项目代码,还一个都没有看到。因此,这个章节,我们来认识一下所有的文件。
初始文件解析
- 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
的列表页面,一个是详情页面。
所以,我把项目文件夹整理成如下的结构
- 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 目录
这个目录比较简单,因为这个项目我们的资源不多,但是,为了我的这系列博文能够适合大多数的项目的开发,一般,我搞成下面这个样子:
- 1
- 2
- 3
- 4
你可能很奇怪,我们不是把样式和 JS
都写到里面去么,为什么还要在这边放呢?
因为,如果是放在 src
目录里面,则每次打包的时候,都需要打包的。这回增加我们的打包项目的时间长度。而且,一些地方放的文件,我们一般是不会去修改的,也没必要 npm
安装,直接引用就好了。你可以根据自己的情况,对这些可以不进行打包而直接引用的文件提炼出来,放在资源目录里面直接调用,这样会大大的提高我们的项目的打包效率。
好,就这么搞,我们的文件架构就搞好了,下一张,我们来开始写代码了。
如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。
本文由 FungLeo 原创,点击-首发链接。