首页天道酬勤前端vue是什么意思,大型vue项目目录结构

前端vue是什么意思,大型vue项目目录结构

admin 05-05 18:34 183次浏览

当正文结构进入前端时,一个项目中的文件夹非常多。 和Vue官网上的简单demo非常不同。 这也是关于前端项目文件配置和一些大模块的介绍。 文末有几条不成文的规定。 本文的目录项目代码配置前端的几个大模块项目创建规范项目代码配置与前端项目分开,结合后端项目来看。 项目不仅仅是文件,重要的思想来自模块化和团队合作编程中的模块化,从将不同功能的代码分类后放入不同的文件中,根据需要进行导入,从而连接适当的功能的观点出发另外,分层的文件夹为了与他人合作,需要分离不同的功能。 并行开发会减少不同功能之间的耦合性。 项目结构是为了可持续开发,而不是随便写一个文件。 虽然在功能上实现了,但在维护上非常头疼。 为了考虑到易于维护和今后功能的扩展,项目结构是如此复杂的重要因素的项目结构的普遍特征通常是在底层创建的。 如果有放在最里面的文件,却很少分担任务,那么给定的代码通常在一个小文件中不知道项目结构就可以完成功能,但知道了之后,除了自己的功能文件夹之外,还有总理这样的文件管理所有功能的前端项目构成vue、react、angular三个主要前端框架的结构各有不同的vue开源项目结构

React开源项目结构

Angular开源项目结构

作为前端项目一部分的src目录是source资源的缩写。 该文件夹是主要描述功能的位置的static目录,是存储静止图像、静态图像、即html页面或图像等的静态文件夹。 gitignore文件用于git,并用于选择哪个文件不受git控制自述. MD文件。 根据GitHub的仓库介绍,它是用markdown格式编写的,GitHub将此文件放在目录下,展示package.json文件。 此文件包含整个项目依赖关系库的信息和npm的一些设置,该文件被认为是整个项目最基本的配置文件package-lock.json文件。 此文件是package.json辅助文件,用于记录更详细的从属库版本以及库与库之间的关系,并结合使用Vue前端项目结构

的几大模块1. npm npm是前端库的管理工具,与许多语言的软件包管理工具一样,功能相似。 通常,包含所有库的npm是nodejs的一部分,而nodejs与javascript之间的关系nodejs是解释器。 也可以将其视为javascript的运行环境。 浏览器附带解释器。 解释器因浏览器而异。 chrome谷歌浏览器使用的是V8引擎。 nodejs基于V8进行了扩展,放弃了对浏览器的操作,添加了后端处理功能的nodejs必须安装在电脑上才能使用2. Typescript。 ES6 Javascript typescript是一种扩展的面向对象的javascript语言,可以使用typescript编译器将typescript翻译为javascript代码。 实际上是javascript,但只是改变了创建ES6的方式,全名是ECMAScript6。确切地说,javascript是ECMAScript的别名。 因为ECMAScript是更官方的,所以如果有兴趣的话就可以知道js和ES的起源。 目前主流的JavaScript是ES5,ES6是ES5的升级版本,目前主流的框架是基于ES6开发的,但ES6很先进,许多浏览器还不支持。 因此,必须在Babel库中进行翻译。 将ES6代码翻译为ES5并在浏览器中运行ES6是JavaScript的重大更新。 如果您感兴趣,我们建议您继续了解ES6语法3. webpack并观看视频。 有了前端基础,您很快就会发现webpack是为了解决文件部署过多的问题。 且无法编程控制引入的库问题的原因是,以前需要编写多个脚本标记来部署js文件,而引入css文件需要编写多个style标记。 通过使用webpack将多个js和css文件打包到一个文件中,在html页面上部署一个文件当然不仅如此。 需要亲自学习的4. eslint eslint是一种代码样式检查工具,能够在团队合作时规范不同人员的代码编写,强制控制代码结构。5. babel babel是为了解决与es6浏览器不兼容的问题而诞生的使代码和浏览器能够支持6. css的库lesssess两者都改造了css,使css能够使用变量、流控制语句等,像编程一样编写css。 除了与css相关的配置文件之外,它们还有各自的配置文件,学习它们需要很多基础,如果基础扎实,可以走得更远

项目制定的规范在这里。 eslint需要重点强调。 如果不是,eslint会从四面八方提醒你,让你给某一行添加空间,因为eslint的主要功能很痛苦

比javasript更严格的语法检查使用代码样式(如各种标点符号、空格和缩进)的检查插件来控制不同前端框架的特定语法,这很恶心。 如何关闭它并直接在文件开头使用评论? 当eslint看到这个评论时,它会坦率地绕道查看详细信息,然后全局设置YourProject/bui

ld/webpack.base.conf.js 中找到搜索 config.dev.useEslint, 将这行注释
同理,在YourProject/config/index.js 下,有一个useEslint参数,将其改为 false
[外链图片转存失败在Yourproject/.eslintignore 文件中,在此文件中增加忽略的文件或文件夹 如何设置规则 如果你觉得不想关闭eslint,又不想被报错困扰,不如就学习一下eslint吧eslint 的规则包括两种,一种基本的一些配置,另一种是各种框架特有的配置 vue, react, angular 等框架特有的配置 在 Yourproject/.eslintrc.js 中,找到plugins这一项,填写合适的插件名 https://s2.ax1x.com/2019/07/04/ZNHJc4.jpg 然后需要不同插件的官网查询详细的规则 Vue 插件React 插件Angular 插件 推荐模式和基础模式 使用 vue/base 和 vue/recommanded 来替代 vue这一项详情请访问官网查询 eslint 基础的一些规则 eslint 规则官网在上图的位置,rules这一项里面填写即可,不需要的可以直接注释掉 "off"或者0 //关闭规则关闭"warn"或者1 //在打开的规则作为警告(不影响退出代码)"error"或者2 //把规则作为一个错误(退出代码触发时为1) eslint 规则基础使用
深入浅出RxJava+Retrofit+OkHttp网络请求CP云内存 Redis5.0版本新功能介绍 UMem Redis文件存储-创建文件系统 UFS(附源码)计算机毕业设计黄淮学院二手物品交易平台为什么onClick呈现时会激活?SwiftUIiteratingthroughdictionarywithForEach
vue全家桶实战 小米,vue文件目录结构 vue目录命名,vue文件目录结构
相关内容