• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

Vue2+VueRouter2+Webpack+Axios 构建项目实战(三)认识项目所有文件

技术杂谈 勤劳的小蚂蚁 3个月前 (01-04) 98次浏览 已收录 0个评论 扫描二维码

这一篇介绍vue框架的所有文件,让你对vue框架有一个大概的认知,公众号已经准备了vue实战教程,如果您有需要,可以在公众号回复“vue”获取。
上一节中,我们通过安装 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// 资源放置目录
好,如上,就是我们的 vue 初始化后得到的一个项目的完整结构。其他大多数文件我们是不用管的。如果要管的话,我在后面的章节也会去详细说明。
我们绝大多数的操作,就是在 src 这个目录下面。默认的 src 结构比较简单,我们需要重新整理。
另外 static 资源目录,我们也需要根据放置不同的资源,在这边构建不同的子文件夹。
我们来配置 src 目录
先不要管这些文件的内容,我们先建立这些空的文件在这边。然后我们后面去完善它。
我们的这个项目是要做两个页面,一个是 cnodejs 的列表页面,一个是详情页面。
所以,我把项目文件夹整理成如下的结构
├── 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  // 常用工具文件
因为我们删除了一些默认的文件,所以这个时候项目一定是报错的,先不管他,我们根据我们的需求,新建如上的项目结构。这些都是在 src 目录里面的结构。
我们来配置 static 目录
这个目录比较简单,因为这个项目我们的资源不多,但是,为了我的这系列博文能够适合大多数的项目的开发,一般,我搞成下面这个样子:
├── css   // 放一些第三方的样式文件
├── font  // 放字体图标文件
├── image  // 放图片文件,如果是复杂项目,可以在这里面再分门别类
└── js   // 放一些第三方的JS文件,如 jquery
你可能很奇怪,我们不是把样式和 JS 都写到里面去么,为什么还要在这边放呢?
因为,如果是放在 src 目录里面,则每次打包的时候,都需要打包的。这回增加我们的打包项目的时间长度。而且,一些地方放的文件,我们一般是不会去修改的,也没必要 npm 安装,直接引用就好了。你可以根据自己的情况,对这些可以不进行打包而直接引用的文件提炼出来,放在资源目录里面直接调用,这样会大大的提高我们的项目的打包效率。
好,就这么搞,我们的文件架构就搞好了,下一张,我们来开始写代码了。

丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:Vue2+VueRouter2+Webpack+Axios 构建项目实战(三)认识项目所有文件
喜欢 (0)
[247507792@qq.com]
分享 (0)
勤劳的小蚂蚁
关于作者:
温馨提示:本文来源于网络,转载文章皆标明了出处,如果您发现侵权文章,请及时向站长反馈删除。

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00