首页 / VUE / Vue在前端开发中需要注意什么

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue在前端开发中需要注意什么，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10679字，纯文字阅读大概需要16分钟。

内容图文

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

基于Vue官方风格指南整理

一、强制

1. 组件名为多个单词

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

正例：

export default {
 name: 'TodoItem',
 // ...
}
反例：
export default {
 name: 'Todo',
 // ...
}

2. 组件数据

组件的 data 必须是一个函数。

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

正例：

// In a .vue file
export default {
 data () {
 return {
 foo: 'bar'
 }
 }
}
// 在一个 Vue 的根实例上直接使用对象是可以的，
// 因为只存在一个这样的实例。
new Vue({
 data: {
 foo: 'bar'
 }
})

反例：

export default {
 data: {
 foo: 'bar'
 }
}

3. Prop定义

Prop 定义应该尽量详细。

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

正例：

props: {
 status: String
}
// 更好的做法！
props: {
 status: {
 type: String,
 required: true,
 validator: function (value) {
 return [
 'syncing',
 'synced',
 'version-conflict',
 'error'
 ].indexOf(value) !== -1
 }
 }
}

反例：

// 这样做只有开发原型系统时可以接受
props: ['status']

4. 为v-for设置键值

总是用 key 配合 v-for。

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

正例：

<ul>
 <li
 v-for="todo in todos"
 :key="todo.id"
 >
 {{ todo.text }}
 </li>
</ul>

反例：

<ul>
 <li v-for="todo in todos">
 {{ todo.text }}
 </li>
</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">
 <li
 v-for="user in users"
 :key="user.id"
 >
 {{ user.name }}
 </li>
</ul>

反例：

<ul>
 <li
 v-for="user in users"
 v-if="shouldShowUsers"
 :key="user.id"
 >
 {{ user.name }}
 </li>
</ul>

6. 为组件样式设置作用域

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

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

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

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

正例：

<template>
 <button class="c-Button c-Button--close">X</button>
</template>
<!-- 使用 BEM 约定 -->
<style>
.c-Button {
 border: none;
 border-radius: 2px;
}
.c-Button--close {
 background-color: red;
}
</style>

反例：

<template>
 <button class="btn btn-close">X</button>
</template>
<style>
.btn-close {
 background-color: red;
}
</style>
<template>
 <button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
 border: none;
 border-radius: 2px;
}
.button-close {
 background-color: red;
}
</style>

二、强烈推荐（增强可读性）

1. 组件文件

只要有能够拼接文件的构建系统，就把每个组件单独分成文件。
当你需要编辑一个组件或查阅一个组件的用法时，可以更快速的找到它。

正例：

components/
|- TodoList.vue
|- TodoItem.vue

反例：

V
ue.component('TodoList', {
 // ...
})
Vue.component('TodoItem', {
 // ...
})

2. 单文件组件文件的大小写

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

正例：

components/
|- MyComponent.vue

反例：

components/
|- myComponent.vue
|- mycomponent.vue

3. 基础组件名

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

正例：

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

反例：

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

4. 单例组件名

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

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

正例：

components/
|- TheHeading.vue
|- TheSidebar.vue

反例：

components/
|- Heading.vue
|- MySidebar.vue

5. 紧密耦合的组件名

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

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

正例：

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

反例：

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

6. 组件名中的单词顺序

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

正例：

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

反例：

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

7. 模板中的组件名大小写

总是 PascalCase 的

正例：

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

反例：

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

8. 完整单词的组件名

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

正例：

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

反例：

components/
|- SdSettings.vue
|- UProfOpts.vue

9. 多个特性的元素

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

正例：

<img
 src="https://vuejs.org/images/logo.png"
 alt="Vue Logo"
>
<MyComponent
 foo="a"
 bar="b"
 baz="c"
/>

反例：

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>

10. 模板中简单的表达式

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

正例：

<!-- 在模板中 -->
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {
 normalizedFullName: function () {
 return this.fullName.split(' ').map(function (word) {
 return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
 }
}

反例：

{{
 fullName.split(' ').map(function (word) {
 return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
}}

11. 简单的计算属性

正例：

computed: {
 basePrice: function () {
 return this.manufactureCost / (1 - this.profitMargin)
 },
 discount: function () {
 return this.basePrice * (this.discountPercent || 0)
 },
 finalPrice: function () {
 return this.basePrice - this.discount
 }
}

反例：

computed: {
 price: function () {
 var basePrice = this.manufactureCost / (1 - this.profitMargin)
 return (
 basePrice -
 basePrice * (this.discountPercent || 0)
 )
 }
}

12. 带引号的特性值

非空 HTML 特性值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。
在 HTML 中不带空格的特性值是可以没有引号的，但这样做常常导致带空格的特征值被回避，导致其可读性变差。

正例：

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

反例：

<AppSidebar :style={width:sidebarWidth+'px'}>

13. 指令缩写

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

正例：

<input
 @input="onInput"
 @focus="onFocus"
>

反例：

<input
 v-bind:value="newTodoText"
 :placeholder="newTodoInstructions"
>

三、推荐

1. 单文件组件的顶级元素的顺序

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

正例：

<!-- ComponentA.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

四、谨慎使用 (有潜在危险的模式)

1. 没有在 v-if/v-if-else/v-else 中使用 key

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

正例：

<p
 v-if="error"
 key="search-status"
>
 错误：{{ error }}
</p>
<p
 v-else
 key="search-results"
>
 {{ results }}
</p>
反例：
<p v-if="error">
 错误：{{ error }}
</p>
<p v-else>
 {{ results }}
</p>

2. scoped 中的元素选择器

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

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

正例：

<template>
 <button class="btn btn-close">X</button>
</template>
<style scoped>
.btn-close {
 background-color: red;
}
</style>

反例：

<template>
 <button>X</button>
</template>
<style scoped>
button {
 background-color: red;
}
</style>

3. 隐性的父子组件通信

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

正例：

Vue.component('TodoItem', {
 props: {
 todo: {
 type: Object,
 required: true
 }
 },
 template: `
 <input
 :value="todo.text"
 @input="$emit('input', $event.target.value)"
 >
 `
})

反例：

Vue.component('TodoItem', {
 props: {
 todo: {
 type: Object,
 required: true
 }
 },
 methods: {
 removeTodo () {
 var vm = this
 vm.$parent.todos = vm.$parent.todos.filter(function (todo) {
 return todo.id !== vm.todo.id
 })
 }
 },
 template: `
 <span>
 {{ todo.text }}
 <button @click="removeTodo">
 X
 </button>
 </span>
 `
})

4. 非 Flux 的全局状态管理

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

正例：

// store/modules/todos.js
export default {
 state: {
 list: []
 },
 mutations: {
 REMOVE_TODO (state, todoId) {
 state.list = state.list.filter(todo => todo.id !== todoId)
 }
 },
 actions: {
 removeTodo ({ commit, state }, todo) {
 commit('REMOVE_TODO', todo.id)
 }
 }
}
<!-- TodoItem.vue -->
<template>
 <span>
 {{ todo.text }}
 <button @click="removeTodo(todo)">
 X
 </button>
 </span>
</template>
<script>
import { mapActions } from 'vuex'
export default {
 props: {
 todo: {
 type: Object,
 required: true
 }
 },
 methods: mapActions(['removeTodo'])
}
</script>

反例：

// main.js
new Vue({
 data: {
 todos: []
 },
 created: function () {
 this.$on('remove-todo', this.removeTodo)
 },
 methods: {
 removeTodo: function (todo) {
 var todoIdToRemove = todo.id
 this.todos = this.todos.filter(function (todo) {
 return todo.id !== todoIdToRemove
 })
 }
 }
})

附录

1. 推荐使用vs code进行前端编码，规定Tab大小为2个空格

vs code配置

{
 "editor.tabSize": 2,
 "workbench.startupEditor": "newUntitledFile",
 "workbench.iconTheme": "vscode-icons",
 // 以下为stylus配置
 "stylusSupremacy.insertColons": false, // 是否插入冒号
 "stylusSupremacy.insertSemicolons": false, // 是否插入分好
 "stylusSupremacy.insertBraces": false, // 是否插入大括号
 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
 "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 "eslint.autoFixOnSave": true,
 "eslint.validate": [
 "javascript",
 {
 "language": "html",
 "autoFix": true
 },
 {
 "language": "vue",
 "autoFix": true
 },
 "javascriptreact",
 "html",
 "vue"
 ],
 "eslint.options": { "plugins": ["html"] },
 "prettier.singleQuote": true,
 "prettier.semi": false,
 "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
 "vetur.format.js.InsertSpaceBeforeFunctionParenthesis": false,
 "vetur.format.defaultFormatter.js": "prettier",
 // "prettier.eslintIntegration": true
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的Vue在前端开发中需要注意什么全部内容，希望文章能够帮你解决Vue在前端开发中需要注意什么所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/291315.html

来源：【匿名】

【上一篇】vue移动端实现下拉刷新步骤详解【下一篇】php怎么返回数据给vue

更多 ►

【Vue在前端开发中需要注意什么】教程文章相关的互联网学习教程文章

vue : 在vuex里写一个数组首尾元素互换的方法【代码】

不着急上代码，先想几个问题。vuex里怎么写方法？　　mutation里写vuex方法，组件中用commit调用。数组首尾元素怎么互换？　　arr.splice(0, 0, arr[arr.length - 1]) 　　arr.pop()怎样让这个方法是可复用的？　　组件中commit的时候提交想改的数组名字，并在vuex方法中进行检测。需要检测啥？　　1 state中是否存在这个变量　　2 这个变量是不是一个符合要求（length > 1）的数组？怎样检测是否存在这个变量？　　Object.keys(st...

【Vue 学习笔记一、Vue开发环境搭建】【代码】【图】

搭建Vue的开发环境　　1.首先安装Nodejs （因为我的系统是Windows的所以就选择第一个了，这个看个人的开发环境）　　　　下载好后，然后一路确定，如果有更改安装目录的需求，就自己切换安装目录，由于是从网吧写的这篇博客，所以就无所谓了　　　　打开cmd 输入 node --version　　　　　出现nodejs 的版本就成功了！然后下一步安装 cnpm （安装这目的主要是使用淘宝的国内进行，安装的比较块）　　　　　　　安装方法，从...

使用Vue.js初次真正项目开发-2018/07/14【代码】

一、组件化使用Vue.js进行开发，按照MVVM模式，围绕数据为核心，进行开发。开发过程根据业务和功能组件化，组件化一方面让我们开发思路更加清晰，另一方面对于数据的处理和控制变得更加简单，毕竟一个大功能交给一个组件去实现，总是会显得很复杂，但是将大功能进行细分，交给多个人，每个人负责不同的小功能，就会变得清晰简单。1. 父子组件数据交互通过prop和事件来实现双向数据绑定。父组件传递到子组件的prop数据，需要在子组件...

vuejs devtools 插件安装【图】

1.下载地址：https://chromecj.com/web-development/2019-09/2955/download.html 20200202174823chromecj.com.crx 后缀改为zip，解压到文件夹A 2.谷歌浏览器打开：chrome://extensions/ 添加扩展程序，选择文件夹A 原文：https://www.cnblogs.com/ligenyun/p/12253032.html

angular和vue双向数据绑定【代码】【图】

angular和vue双向数据绑定的原理(重点是vue的双向绑定)我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值.访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用gette...

强烈推荐，超详细，实操零失误：node.js安装 + npm安装教程 + Vue开发环境搭建【非原创，但是用生命推荐的转载】

node.js安装 + npm安装教程 + Vue开发环境搭建强烈推荐，超详细，实操零失误【非原创，但是用生命推荐的转载】原博客园地址：https://www.cnblogs.com/lgx5/p/10732016.html 原文：https://www.cnblogs.com/jane-panyiyun/p/12113539.html

vue全面介绍--全家桶、项目实例【图】

简介“简单却不失优雅，小巧而不乏大匠”。 2016年最火的前端框架当属Vue.js了，很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。授予了这么高的评价的vue.js，也是开源世界华人的骄傲，因为它的作者是位中国人–尤雨溪（Evan You）。 Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于...

vue-cli@3.x初体验之前篇-回顾vue-cli@2.x创建项目的流程【代码】

模拟实际工作中的操作，假如新开启了一个vue项目，可以先看看上篇博文中的git操作,新建空仓库vue-demo，并拉取到本地，创建本地dev分支后1. 全局安装vue-cliyarn global add vue-cli // 检查是否已安装成功 vue -V // 2.9.62. 使用vue init 创建项目，官方提供了6种模板,对于大多数人而言，工作中选择webpack模板// 使用vue init 创建项目(.指当前目录) vue init webpack .? Generate project in current directory? (Y/n) // 是否...

vue大文件上传组件选哪个好?

需求：项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在500M内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以501M来进行限制。第一步：前端修改由于项目使用的是BJUI前端框架，并没有使用框架本身的文件上传控件，而使用的基于jQuery的Uploadify文件上传组件，在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分，这部分代码封装在bjui-all.js文件中，在bjui-all.js文件中的全...

MongoVue 破解治标不治本

MongoVue 破解治标不治本---------解决燃眉之急注册表中查找B1159E65-821C3-21C5-CE21-34A484D54444中的子项4FF78130 ，删除其下的三个子项即可。这样剩余时间又会回到15天前原文：http://www.cnblogs.com/zlp520/p/4075470.html

vue生命周期函数【代码】

<template><div id="life">生命周期函数的演示 ---{{msg}}<br><button @click="setMsg()">执行方法改变msg</button></div></template><script>/*生命周期函数/生命周期钩子：组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法这些方法就叫做生命周期函数 */export default{data(){return{msg:‘msg‘}},methods:{setMsg(){this.msg="我是改变后的数据"}}, beforeCreat...

VUE小案例--简易计算器【代码】

这个小案例主要时练习v-model的使用，功能并不完善<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script></head><body><div id="app"><input type="text" v-model="n1"><select v-model="opt"><option value="+">+</o...

Vue.2.0.5-Vue 实例【代码】【图】

构造器每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的：var vm = new Vue({// 选项 })虽然没有完全遵循 MVVM 模式， Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档中查看。可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器...

springboot shiro和freemarker、vuejs/element-ui集成之控制按钮权限完全参考手册

本文主要考虑单点登录场景，登录由其他系统负责，业务子系统只使用shiro进行菜单和功能权限校验，登录信息通过token从redis取得，这样登录验证和授权就相互解耦了。用户、角色、权限进行集中式管理。参考：https://blog.csdn.net/qq_26321411/article/details/79557264https://blog.csdn.net/weixin_38132621/article/details/80216056https://blog.csdn.net/u013615903/article/details/78781166/http://shiro.apache.org/https:/...

Laravel Vuejs 实战：开发知乎（2）用户注册【代码】

1.本节需要发送验证邮件2.教程使用SendCloud发送邮件【我使用的是mailtrap】3. 1 composer require laravel/ui安装完成后 1 php artisan ui vue –auth4.RegisterController中create方法内实现用户创建的默认值配置 1 class RegisterController extends Controller2 {3 /*4 |--------------------------------------------------------------------------5 | Register Controller6 |------------------------...

VUE - 技术教程分类

Vue.js 教程 Vue.js 安装 Vue.js 目录结构 Vue.js 起步 Vue.js 模板语法 Vue.js 条件语句 Vue.js 计算属性 Vue.js 监听属性 Vue.js 样式绑定 Vue.js 事件处理器 Vue.js 表单 Vue.js 组件 Vue.js 自定义指令 Vue.js 路由 Vue.js 过渡 & 动画 Vue.js 混入 Vue.js Ajax(axios) Vue.js Ajax(vue-resource) Vue.js 实例 vue 全部

VUE - 最热教程

vue权限问题的完美解决方案通过使用vue制作滑动堆叠组件（详细教程...vue渲染页面后div的滚动条保持在最底部...vue中格式化时间戳 vue里面父组件修改子组件样式的方法 vue判断input输入内容全是空格的方法解决vue中对象属性改变视图不更新的问题微信小程序第三方框架对比之 wepy / m...在使用vue中打包项目后刷新碰到404的问...vue实现鼠标移入移出事件代码实例

首页 / VUE / Vue在前端开发中需要注意什么

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

内容导读

内容图文

一、强制

二、强烈推荐（增强可读性）

三、推荐

四、谨慎使用 (有潜在危险的模式)

内容总结

内容备注

内容手机端

【Vue在前端开发中需要注意什么】教程文章相关的互联网学习教程文章

vue : 在vuex里写一个数组首尾元素互换的方法【代码】

【Vue 学习笔记一、Vue开发环境搭建】【代码】【图】

使用Vue.js初次真正项目开发-2018/07/14【代码】

vuejs devtools 插件安装【图】

angular和vue双向数据绑定【代码】【图】

强烈推荐，超详细，实操零失误：node.js安装 + npm安装教程 + Vue开发环境搭建【非原创，但是用生命推荐的转载】

vue全面介绍--全家桶、项目实例【图】

vue-cli@3.x初体验之前篇-回顾vue-cli@2.x创建项目的流程【代码】

vue大文件上传组件选哪个好?

MongoVue 破解治标不治本

vue生命周期函数【代码】

VUE小案例--简易计算器【代码】

Vue.2.0.5-Vue 实例【代码】【图】

springboot shiro和freemarker、vuejs/element-ui集成之控制按钮权限完全参考手册

Laravel Vuejs 实战：开发知乎（2）用户注册【代码】

VUE - 相关标签

开发 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程