首页 web前端 Vue.js vue开发工具有哪些

vue开发工具有哪些

Oct 27, 2021 pm 03:45 PM
vue 开发工具

vue开发工具有:1、Vue CLI;2、Vue Press;3、Vuex;4、Nuxt;5、Vuetify;6、Quasar;7、Storybook;8、Visual Studio Code;9、WebStorm等等。

vue开发工具有哪些

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

现在前端除了JavaScript外,还有react,vue,angular这三个框架在市场上用的比较多,可以说这三个框架很大程度上改变了前端的地位,相对于angular来说,vue同样拥有丰富的指令,并且都是典型的MVC框架,vue相对来说轻量级一些,

目前vue被很多开发人员所采用,也越来越热门,,因此它的生态环境也变得完善起来,相关的工具也很丰富,这主要是依靠vue的学习曲线和清晰的设计结构和使用文档,是让有经验的开发人员从其他框架方便入手。下面给大家介绍vue的开发工具有哪些?

Vue CLI

为了方便开发者快速的上手工作,他和奇特的框架一样,都是提供CLI类似的手脚架工具,VueCLI是一套功能齐全的工具,能用快速Vue开发,Vue将Vue生态中的工具基础标准化,确保了各种构建工具能够基于智能的默认配置平稳衔接,这样就可以专注在撰写应用上,而不必花好久的时间去纠结配置问题,例如在项目中能够很轻松的集成Babel,TypeScript, ESLint,PostCSS ,Jest,Mocha , Nightwatch和Cypress等插件。

Vue Press

VuePress是以Vue驱动的静态网站生成器,是由Vue, Vue Router和webpack驱动的单页应用,在VuePress中,可以使用Markdown编写文档,然后生成网页,每一个由VuePress生成的页面都有着预渲染好的HTML,也因此具有非常好的加载性能和搜索引擎优化,同时,一旦页面被加载,Vue将会接管这些内容,并把他转换成一个完整的单页应用,其他的页面则只会在用户浏览到的时候才需加载,

Vuex

在SPA单页组件的开发中Vue的vuex和React的React都是统称为同一状态管理,也可以叫全局状态管理,简单的理解就是你在state中定义了一个数据之后,就可以在所在项目中的任何一个组件里进行获取,进行修改,并且修改部分可以得到全局的响应变化,每一个Vuex应用的核心就是Store,store可当做一个容器,包含着应用中大部分状态。

Nuxt

Nuxt.js是一个基于Vue.js的轻量级应用框架,可用来创建服务端渲染应用,也可以充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

Vuetify

Vuetify目前是基于veu的最好的UI组件库之一,他提供了大量基于Material Design规范尽心制作的组件,可以满足任何应用程序的需求。

Quasar

Quasar是MIT许可的开元框架是基于Vue的,可以帮助Web开发人员创建响应式网站,PWA 通过Apacha Cordova构建移动APP,多平台应用程序 Quasar约需开发人员编写一次代码,然后使用相同的代码库同时部署为网站,PWA , Mobile APP和Electron App。使用最先进的CLI设计应用程序,并提供精心编写,是速度非常快的Quasar Web组件,

Storybook

对于前段来说,组件化技术已经是必修的一门课程了,这其中又以react和vue为主,但平时在开发组件,尤其是公共组件或第三方组件时会有些困扰,

  • 不能很好的管理组件,预览组件时不能一目了然,也不能很好的反应一个组件的不同状态,

  • 自动化交互测试可以使用enzyme,但很多时候还得手动测试,

  • 在写文档时 需要将组件预览和文档写在一起,并需要切换不同状态,

所以,storbook就是为了解决这些问题而出现,他能为组件搭建一个强大的开发环境,主要提供下面几点

  • 提供一个强大的UI组件管理页面,可以很便捷,清晰的分组,管理多个组件或一个组件的不同状态

  • 在自动化交互测试外,可以很方便的进行手动交互测试,并且可以动态改变组件参数,查看视图变化

  • 可以将组件预览导出为静态资源,这样就可以很方便查看组件的文档和不同参数对应的不同视图 还有一系列插件,更好的帮助我们完成开发 测试 优化组件工作。

该工具使用开发人员能够独立于主应用程序组件,并在隔离的开发环境中已交互方式展示他们,而无需担心特定有应用程序的依赖关系和要求,方便开发人员,设计人员等多人参与项目。

Visual Studio Code

Visual Studio Code(简称“VS Code”)是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代Web和云应用的跨平台源代码编辑器,可在桌面上运行,并且可用于Windows,macOS和Linux。它具有对JavaScript,TypeScript和Node.js的内置支持,并具有丰富的其他语言(例如C++,C#,Java,Python,PHP,Go)和运行时(例如.NET和Unity)扩展的生态系统。

WebStorm

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

相关推荐:《vue.js教程

以上是vue开发工具有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue中echarts怎么用 vue中echarts怎么用 May 09, 2024 pm 04:24 PM

在 Vue 中使用 ECharts 可让应用程序轻松添加数据可视化功能。具体步骤包括:安装 ECharts 和 Vue ECharts 包、引入 ECharts、创建图表组件、配置选项、使用图表组件、实现图表与 Vue 数据的响应式、添加交互式功能,以及使用高级用法。

vue中的export default的作用 vue中的export default的作用 May 09, 2024 pm 06:48 PM

问题:Vue 中 export default 的作用是什么?详细描述:export default 定义组件的默认导出。导入时,将自动导入组件。简化导入过程,提高清晰度和防止冲突。常用于导出单个组件、同时使用命名导出和默认导出以及注册全局组件。

vue中map函数的用法 vue中map函数的用法 May 09, 2024 pm 06:54 PM

Vue.js map 函数是一个内置的高阶函数,用于创建一个新数组,其中每个元素都是原始数组中的每个元素转换后的结果。其语法为 map(callbackFn),其中 callbackFn 接收数组中的每个元素作为第一个参数,可选地接收索引作为第二个参数,并返回一个值。map 函数不会改变原始数组。

vue中event和$event区别 vue中event和$event区别 May 08, 2024 pm 04:42 PM

Vue.js 中,event 为原生 JavaScript 事件,由浏览器触发,而 $event 是 Vue 特定抽象事件对象,在 Vue 组件中使用。一般使用 $event 更方便,因为它经过格式化和增强,支持数据绑定。当需要访问原生事件对象特定功能时,使用 event。

vue中onmounted作用 vue中onmounted作用 May 09, 2024 pm 02:51 PM

onMounted 是 Vue 中的组件挂载生命周期钩子,其作用是在组件挂载到 DOM 后执行初始化操作,例如获取 DOM 元素的引用、设置数据、发送 HTTP 请求、注册事件监听器等。它在组件挂载时仅调用一次,如果需要在组件更新后或销毁前执行操作,可以使用其他生命周期钩子。

vue中export与export default区别 vue中export与export default区别 May 08, 2024 pm 05:27 PM

Vue.js 中导出模块的方式有两种:export 和 export default。export用于导出命名实体,需要使用花括号;export default用于导出默认实体,不需要花括号。导入时,export导出的实体需要使用其名称,而export default导出的实体可以隐式使用。建议对于需要被多次导入的模块使用export default,对于只导出一次的模块使用export。

vue中的钩子是什么 vue中的钩子是什么 May 09, 2024 pm 06:33 PM

Vue 钩子是可在特定事件或生命周期阶段执行操作的回调函数。它们包括生命周期钩子(如 beforeCreate、mounted、beforeDestroy)、事件处理钩子(如 click、input、keydown)和自定义钩子。钩子增强组件控制,响应组件生命周期,处理用户交互并提高组件重用性。使用钩子,定义钩子函数、执行逻辑并返回可选值即可。

vue中的事件修饰符可以用于哪些场景 vue中的事件修饰符可以用于哪些场景 May 09, 2024 pm 02:33 PM

Vue.js 事件修饰符用于添加特定行为,包括:阻止默认行为 (.prevent)停止事件冒泡 (.stop)一次性事件 (.once)捕获事件 (.capture)被动的事件监听 (.passive)自适应修饰符 (.self)关键修饰符 (.key)

See all articles