3

前言

这一篇,我们将接着上篇来完成创建项目文件、目录架构。

回顾

先回顾一下现在项目有哪些东西了:

.
├── app
│   ├── app.vue
│   ├── common
│   │   ├── img
│   │   ├── js
│   │   └── scss
│   ├── index.html
│   ├── index.js
│   ├── router
│   │   └── index.js
│   └── views
│       └── home
│           └── index.vue
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
└── webpack.config.js

开发

总体看一下创建了哪些东西:

.
├── app
│   ├── api // 放get/post接口
│   ├── app.vue // vue主文件
│   ├── common // 放公共静态资源
│   ├── components // 该项目都通用的公用组件
│   ├── componentsBase // 所有项目都通用的公用组件,之后可以做成npm
│   ├── directives // Vue的directives
│   ├── filters // Vue的filters
│   ├── index.html // 模板文件
│   ├── index.js // 入口文件
│   ├── mixins // Vue的mixins
│   ├── router // Vue的路由配置文件夹
│   ├── store // vue-redux的文件夹,暂时不用,因为并不是所有项目都需要redux的
│   └── views // 视图
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
└── webpack.config.js

这节要是一个一个放代码和步骤,会非常繁琐可以枯燥,所以我们可以直接看完整版的项目,代码非常简单,一眼扫完的那种,所以直接看项目比我这里详细地写会快很多很多,地址:戳这里>>

几乎所有的文件夹我都有建markdown文档,方便大家理解。另外,我也是建议,每个文件夹都配一份markdown说明文档,这真的很重要!!!

如果有什么问题可以评论,我看到会第一时间回复的。

总结

这篇主要是文件和目录架构的东西,读者务必运行一下完整的项目。

运行开发环境npm run dev的过程中,我们在调试器中会发现有一个接口错误,并带有'少年,是不是忘了npm run mock? '的警告。这是因为在首页,我们会有一个ajax请求,但我们这时候还没创建本地请求模拟数据接口的服务,所以报错了。

因此,下一篇,我们将通过koa实现本地数据接口模拟 - 从零开始做Vue前端架构(4)

项目完整代码

Vue前端架构-by 子咻


岁月是把杀猪刀
1.6k 声望1.4k 粉丝

もっと遠くにあるはずの、とこか、僕はそこに行きたいんだ