欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue常用项目结构封装分析及心得

程序员文章站 2022-03-07 21:50:07
下面我只把最常用的结构copy出来:components 文件夹 复用视图代码逻辑 (俗称组件)page 文件夹 页面 (组件的拼接组合)router.js 页面向导,相当于导向不同页面及组件的服务器api.js 与服务端交互时候的js业务逻辑store文件夹vuex 状态管理,其中modules部分很重要,多看看有利于你以后成为重量级前端JS逻辑层 文件夹 处理复用或重要逻辑package.json 各种第三方包库的名称 和 版本号* 懒加载 很重要,不懒......

下面我只把最常用的结构copy出来:

components 文件夹 复用视图代码逻辑 (俗称组件)

page 文件夹 页面 (组件的拼接组合)

router.js  页面向导,相当于导向不同页面及组件的服务器

api.js 与服务端交互时候的js业务逻辑

store文件夹 vuex 状态管理,其中modules部分很重要,多看看有利于你以后成为重量级前端

JS逻辑层 文件夹  处理复用或重要逻辑

package.json 各种第三方包库的名称 和 版本号

 

 

* 懒加载 很重要,不懒一个chunk,懒了多个chunk(看不懂,自行搜索懒加载的机制和理论)

* 逻辑JS文件夹 处理复用 重点JS逻辑的容器,利用面向对象和node模块化的封装思维,要封装!利于编程思维的养成和重复代码的循环使用

 

ps: 尤佬发布了vue3.0和vite大家可以自行搜索,略微改变了vue的使用方法和底层加载模式,很强大

跟上时代,争做编码前锋,

vite可以告别繁冗的webpack 操作,乐在其强大,悲在白学webpack了

(typescript也得学,集成JS化为强类语言,大型企业必用,近几年的大势所趋!)

自从模块化规范出来后,可以说前端正在后端的开发模式慢慢靠近 ------ MVC 永远滴神!(mvvm是框架模式,并非开发模式,要有所区分),看不懂的看我的项目结构分层,(模块化(Module)视图层(View),逻辑层(Controller))

完毕!

本文地址:https://blog.csdn.net/weixin_45314741/article/details/107493238

相关标签: 前端 vue js