vue前端可视化开发工具

一、vue前端可视化开发工具

...vue之类的框架如何实现可视化拖拽室组件开发,效率比手写高很多倍...

1、找官网安装npminstallmint-ui-S-S表示--save引入mintUi的css和插件importMintfrommint-uiVue.use(Mint)；importmint-ui/lib/style.css看文档直接使用。

1、找官网安装npminstallmint-ui-S-S表示--save引入mintUi的css和插件importMintfrommint-uiVue.use(Mint)；importmint-ui/lib/style.css看文档直接使用。

2、与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

3、Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。

4、如果组件抽象得合理，这在很大程度上能减少重复开发，而且配合Vue.js的周边工具vue-loader，我们可以将一个组件的CSS、HTML和js都写在一个文件里，做到模块化的开发。

vue用什么开发工具好

1、HBuilderXHBuilderX是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。是HBuilder下一代版本，具有轻便、适合vue框架的特点。

1、HBuilderXHBuilderX是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。是HBuilder下一代版本，具有轻便、适合vue框架的特点。

2、总之，HBuilderX是一款强大的Vue0开发工具，它可以帮助我们快速构建出功能完善的Vue应用程序。

3、VUE开发的工具一般是visiostdiocode（vscode），稍微适应两天就可以熟练应用了。还是很强大的。但是vscode本身只是编辑器，开发编译类语言需要自己配编译环境，具体我没配过。

1、简称VScode，前端开发时期学习的第一款软件，当时学VScode的时候上的网课，老师用插件的时候一个没跟上，就跟不上了。总体感觉下来是插件库很丰富，而且内存占用不大，目前我身边用VScode的人是最多的。

2、HBuilder是专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。

3、Glitchhttps：//glitch.com好的，这不仅仅是一个工具，还是一个非常棒的编码平台以及一个很棒的技术社区。我可以在内置代码编辑器的帮助下托管我的项目。支持多种语言，但最适合NodeJS。

1、VueCLI是一个基于Vue.js进行快速开发的完整系统，提供：VueCLI致力于将Vue生态中的工具基础标准化。

2、Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

3、Vue.js是一套构建用户界面的渐进式框架，Vue采用自下向上增量开发的设计，其核心库只关注视图层，易于上手，同时vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

4、vue官网说：Vue.js（读音/vju/，类似于view）是一套构建用户界面的渐进式的JavaScript框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。

5、Vue是渐进式的JavaScript框架，也就是说，如果你已经有了现成的服务端应用，你可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。

二、vuejs在前端开发起到什么作用

jQuery的诸多局限性导致前端工程师的发展受到了很多的限制，只能做一些表面性的工作，并不能实现前后端分离开发。

而近期出现的Vue，它给前端带来了无限的可能和改变。

改变一：真正意义上的前端工程师

之前开发都是前端做静态页面，把页面给到后台程序员改成jsp、php、asp等等...一顿乱改，一顿塞变量，做完以后页面样式乱七八糟，最后你再调整css。说白了你会html，css就行了，基本没什么门槛，可以这么说。

有了Vue和Node的前端工程化以后，前端工程师能做的事情越来越多，后台人员只需要抛过来一个Api，剩下的就可以都交给前端了。

改变二：服务端渲染VS客户端渲染

传统的jsp、php或是模板渲染也好，都是服务端渲染，就是客户端一个请求，服务器直接把整个页面返回给你，简单粗暴。（Spring Boot是通过模板引擎，由服务端完成的渲染工作）

但是vue开发是前后端分离开发，通过api进行交互，客户端请求服务器返回json数据，由客户端进行渲染。

不仅减轻了服务器的压力速度更快而且渲染更加优雅，代码更容易维护。

jQuery是通过DOM来控制数据，不仅笨重而且渲染数据特别麻烦，而 Vue是通过数据来控制状态，通过控制数据来控制渲染，变量可以直接写在标签中，渲染更加优雅。

因为前端代码和后台代码都是分开的，所以项目更容易维护，开发效率更高。

改变四：项目工程化，结合npm直接安装第三方库

Vue让前端项目更加工程化，同时也规范了前端工程师的代码，而node和npm的加入才是vue能蓬勃发展的重要原因。

Node为Vue提供了本地server和模块化开发的思路，npm更能安装Vue项目需要的模块，配合Vue使用，比如Moment.js Element ui vuex等等，这些第三方库让Vue有了无限的可能。

敲黑板（补充下）：传统开发jQuery是命令式编程，现代框架开发是函数式编程。现代框架开发，可以使用Webpack（当然使用jQuery也可以使用Webpack），可以使用人家提供的现成的脚手架，比方说create-react-app，vue-cli。极大提高了开发的效率，并且可以使用最新的ES6、ES7语法进行开发，在编码体验上，就提高了一个档次。

知其然，知其所以然，没有最好的框架，只有最合适的框架！

三、Vue在前端开发中需要注意什么

这次给大家带来Vue在前端开发中需要注意什么，Vue在前端开发的注意事项有哪些，下面就是实战案例，一起来看一下。

组件名应该始终是多个单词的，根组件 App除外。

当在组件中使用 data属性的时候(除了 new Vue外的任何地方)，它的值必须是返回一个对象的函数。

//在一个 Vue的根实例上直接使用对象是可以的，

在你提交的代码中，prop的定义应该尽量详细，至少需要指定其类型。

//这样做只有开发原型系统时可以接受

props: ['status']4.为v-for设置键值

在组件上_总是_必须用 key配合 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化(object constancy)，也是一种好的做法。

<li v-for="todo in todos">

</ul>5.避免 v-if和 v-for用在一起

永远不要把 v-if和 v-for同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做：

为了过滤一个列表中的项目(比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users替换为一个计算属性(比如 activeUsers)，让其返回过滤后的列表。

为了避免渲染本应该被隐藏的列表(比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if移动至容器元素上(比如 ul, ol)。

<ul v-if="shouldShowUsers">

</ul>6.为组件样式设置作用域

对于应用来说，顶级 App组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。

这条规则只和单文件组件有关。你不一定要使用 scoped特性。设置作用域也可以通过 CSS Modules，那是一个基于 class的类似 BEM的策略，当然你也可以使用其它的库或约定。

不管怎样，对于组件库，我们应该更倾向于选用基于 class的策略而不是 scoped特性。

这让覆写内部样式更容易：使用了常人可理解的 class名称且没有太高的选择器优先级，而且不太会导致冲突。

<button class="c-Button c-Button--close">X</button>

<button class="btn btn-close">X</button>

<button class="button button-close">X</button>

<!--使用 `scoped`特性-->

</style>二、强烈推荐（增强可读性）1.组件文件

只要有能够拼接文件的构建系统，就把每个组件单独分成文件。

当你需要编辑一个组件或查阅一个组件的用法时，可以更快速的找到它。

ue.component('TodoList',{

Vue.component('TodoItem',{

单文件组件的文件名应该要么始终是单词大写开头(PascalCase)

|- mycomponent.vue3.基础组件名

应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态的组件)应该全部以一个特定的前缀开头，比如 Base、App或 V。

只应该拥有单个活跃实例的组件应该以 The前缀命名，以示其唯一性。

这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。

|- MySidebar.vue5.紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

|- SearchSidebarNavigation.vue反例：

|- NavigationForSearchSidebar.vue6.组件名中的单词顺序

组件名应该以高级别的(通常是一般化描述的)单词开头，以描述性的修饰词结尾。

|- SettingsCheckboxLaunchOnStartup.vue反例：

|- LaunchOnStartupCheckbox.vue

|- TermsCheckbox.vue7.模板中的组件名大小写

<!--在单文件组件和字符串模板中-->

<!--在单文件组件和字符串模板中-->

<!--在单文件组件和字符串模板中-->

<myComponent/>8.完整单词的组件名

组件名应该倾向于完整单词而不是缩写。

|- StudentDashboardSettings.vue

|- UserProfileOptions.vue反例：

|- UProfOpts.vue9.多个特性的元素

多个特性的元素应该分多行撰写，每个特性一行。

src=""

<img src="" alt="Vue Logo">

<MyComponent foo="a" bar="b" baz="c"/>10.模板中简单的表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。

//复杂表达式已经移入一个计算属性

normalizedFullName: function(){

return this.fullName.split('').map(function(word){

return word[0].toUpperCase()+ word.slice(1)

fullName.split('').map(function(word){

return word[0].toUpperCase()+ word.slice(1)

return this.manufactureCost/(1- this.profitMargin)

return this.basePrice*(this.discountPercent|| 0)

return this.basePrice- this.discount

var basePrice= this.manufactureCost/(1- this.profitMargin)

basePrice*(this.discountPercent|| 0)

非空 HTML特性值应该始终带引号(单引号或双引号，选你 JS里不用的那个)。

在 HTML中不带空格的特性值是可以没有引号的，但这样做常常导致带空格的特征值被回避，导致其可读性变差。

<AppSidebar:style="{ width: sidebarWidth+'px'}">反例：

<AppSidebar:style={width:sidebarWidth+'px'}>13.指令缩写

都用指令缩写(用:表示 v-bind:和用@表示 v-on:)

:placeholder="newTodoInstructions"

>三、推荐1.单文件组件的顶级元素的顺序

单文件组件应该总是让<script>、<template>和<style>标签的顺序保持一致。且<style>要放在最后，因为另外两个标签至少要有一个。

<template>...</template>

<script>/*...*/</script>

<style>/*...*/</style>四、谨慎使用(有潜在危险的模式)1.没有在 v-if/v-if-else/v-else中使用 key

如果一组 v-if+ v-else的元素类型相同，最好使用 key(比如两个<p>元素)。

</p>2. scoped中的元素选择器

元素选择器应该避免在 scoped中出现。

在 scoped样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

<button class="btn btn-close">X</button>

<button>X</button>

</style>3.隐性的父子组件通信

应该优先通过 prop和事件进行父子组件之间的通信，而不是 this.$parent或改变 prop。

Vue.component('TodoItem',{

@input="$emit('input',$event.target.value)"

Vue.component('TodoItem',{

vm.$parent.todos= vm.$parent.todos.filter(function(todo){

<button@click="removeTodo">

应该优先通过 Vuex管理全局状态，而不是通过 this.$root或一个全局事件总线。

state.list= state.list.filter(todo=> todo.id!== todoId)