摘要：前言这一篇，我们将接着上篇来完成创建项目文件目录架构。总结这篇主要是文件和目录架构的东西，读者务必运行一下完整的项目。因此，下一篇，我们将通过实现本地数据接口模拟从零开始做前端架构项目完整代码前端架构子咻
前言
这一篇，我们将接着上篇来完成创建项目文件、目录架构。
回顾先回顾一下现在项目有哪些东西了：
. ├── 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 子咻
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/11809.html
摘要：前言这一篇，我们将接着上篇来完成配置。开发一配置我们采用的方式来创建。对了，前提我们需要全局安装。三配置创建文件，上配置配置总结这篇不多，就做了三件事，。下一篇我们将创建项目文件目录架构从零开始做前端架构项目完整代码前端架构子咻 前言 这一篇，我们将接着上篇来完成配置eslint、babel、postcss。 开发 一、配置eslint 我们采用eslint --init的方式来创建e...
摘要：前言这一篇，我们将接着上篇来完成配置。开发一配置我们采用的方式来创建。对了，前提我们需要全局安装。三配置创建文件，上配置配置总结这篇不多，就做了三件事，。下一篇我们将创建项目文件目录架构从零开始做前端架构项目完整代码前端架构子咻 前言 这一篇，我们将接着上篇来完成配置eslint、babel、postcss。 开发 一、配置eslint 我们采用eslint --init的方式来创建e...
摘要：前言上一篇我们遇到少年，是不是忘了的警告，这一篇我们就来解决这个问题。总结通过实现前后端分离，并且使用来更方便的模拟数据。下一篇，我们创建发布环境下的配置文件，并且看看怎么优化产出的代码的从零开始做前端架构项目完整代码前端架构子咻 前言 上一篇我们遇到少年，是不是忘了npm run mock?的警告，这一篇我们就来解决这个问题。 开发 一、安装包 安装koa和一系列的包（我们用的是ko...
摘要：那该怎么管理这两个不同的项目呢解决子模块用的的同学肯定一下子就想到子模块的知识了。最后，也希望有想法的同学还有大佬多多留言，给点建议原文地址从零开始做前端架构脚手架参考资料官方文档使用定制前端脚手架别人写的脚手架文件操作相关文档子模块 前言 相信很多人都用过vue-cli或create-react-app或者类似的脚手架。脚手架方便我们复制，粘贴，或者clone代码库，而且还可以更具用...
摘要：前言想想也已经做过不少架构的项目了，有基于，基于，基于，基于的。好了，介绍完毕，接下来，我就从零开始，一步一步建起前后端完全分离的前端架构了。 前言 想想也已经做过不少架构的项目了，有基于vue，基于react，基于thinkPHP，基于laravel的。 做多了，也就对现有的架构有各种想法，有好的，有坏的，总之，用起来还是不爽。vue-cli虽然可以很快地构建并使用，尤其是vue-c...
阅读 3627·2023-04-26 02:32
阅读 3903·2021-11-23 10:05
阅读 2290·2021-10-08 10:04
阅读 2710·2021-09-22 16:06
阅读 3611·2021-09-22 15:27
阅读 763·2019-08-30 15:54
阅读 1697·2019-08-30 13:50
阅读 2703·2019-08-29 13:56
