创建项目文件 目录结构
优质
小牛编辑
147浏览
2023-12-01
前言
这一篇，我们将接着上篇来完成创建项目文件、目录结构。
回顾
先回顾一下现在项目有哪些东西了：
. ├── 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请求，但我们这时候还没创建本地请求模拟数据接口的服务，所以报错了。