㈠ 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 Moles，那是一个基于 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
|- .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="htorg/images/logo.png"
alt="Vue Logo"
>
<MyComponent
foo="a"
bar="b"
baz="c"
/>
反例：
<img src="h/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>
10. 模板中简单的表达式
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。
㈡ 如何使用vue.js构造modal组件
弹出型的组件，无论是 Dialog、Notification、Toast 还是其它的，都有一些共通的问题需要解决：
1. 多个弹层同时出现时，z-index 的顺序
2. 多个弹层同时出现时，共享遮罩层
3. 是否可以自我管理，典型的，定时或者点击遮罩层关闭弹层。
4. 有些弹层需要保留状态，比如你编辑某篇文章，不小心点叉了，再打开还在；而有些需要每次打开都是新的，比如后台中创建某个条目的弹出式表单，你创建过一个条目，下一次再开这个弹层，不应该保留上一个条目的信息
5. 组件放在哪，是否单例，这个和第4点放一起说
6. 如何支持快捷方式，比如喜闻乐见的挂在一个全局方法上，用时创建一个，关闭后销毁
7. 模态，阻止滚动
这些都是之前自己写组件库时遇到的问题，分享一点自己的实践~
1. z-index 的管理
通过设置 position 为 fixed 或 absolute 的方式制作弹层，多个弹层同时打开时，默认是以 dom 树中的位置来确定遮照次序的。当然，我们可以手动设置 z-index，但这麻烦不说，还容易出错。
我的做法是设置一个弹层基类组件，比如叫 Popup，更上层的 Dialog、Toast 之类都是基于它开发的。这个 Popup 组件保持一个单例计数器，比如这样
<script lang="coffe">
$count = 0
mole.exports =
props:
# 控制打开还是关闭
open:
type: Boolean
default: false
mounted: ->
# 装载时递增
if @open
$count++
@zIndex = $count
watch:
open: (open) ->
# open 变化时，如果是打开就递增，否则递减
if open
$count++
@zIndex = $count
else
$count--
</script>
这样一来所有基于 Popup 的组件的 z-index 都是自动计算的，后打开的总是在前面。
2. 共享遮罩层
如果所有对话框实例都有自己的半透明遮照，同时打开后层层叠加会很难看（不过，也许有的设计师就喜欢这种效果？）。为了解决这个问题，可以在 Popup 上设置一个单例遮照层。也就是说，若两个以上 Dialog 打开时，Popup 判断已经有一个遮罩层了，那么自动将后面 Dialog 的透明度设为 0。
这里需要注意的是，并不是所有基于 Popup 的弹层式组件都有相同的透明度（比如有的是0.4，有的是 0.8），这里应该设置一个单例变量 maxOpacity，记录并设置为最深的遮照。
3. 外部触发与自我触发的折中
拿最常见的需求来说，Dialog 需要能够点击遮罩层关闭。Vue 1.0 中通过 sync 修饰符很容易做到内外部共享状态，但 2.0 中已经取消了 sync，可能是为了更清晰的状态变化管理，但我觉得 sync 在一些特殊场合确实很有用。
那么现在，一个典型的做法是完全交由外部来控制 Dialog 的开关，比如父组件通过 prop 设置一个布尔值 open，Dialog 发觉遮照被点击时，可以向上抛出个 click-mask 事件，由父组件来决定是否可以关闭。
其实通过 v-model 也可以实现类似 sync 的功效，我不确定语义上是否一定准确，点击遮照关闭对话框也算是用户输入，触发一个 input 事件是合理的，但类似 Toast 2 秒后关闭，这可能说不通。但是共享状态后，内外部都可以控制，实在是很方便，这个可以权衡？
4. 弹层每次打开，是否应该重绘。
我的做法是暴露一个 prop 布尔值 auto-reset 让使用者决定。如果需要每次都重回，就将 open 绑在 v-if 上，否则绑在 v-show 上：
<template lang="jade">
.soil-popup(
v-if="reset? open: true",
v-show="open"
)
slot
</template>
5. 组件放在哪，是否单例
这个根据弹层的功能需求决定。比如后台运营系统里，点击条目列表弹出个条目编辑框，这种天然高内聚的需求，可以与条目列表放在一个条目管理者组件中。而像 AlertDialog、ConfirmDialog 之类则适合放在全局位置。
单例也是看需求，像模态化的 AlertDialog 就一个出口，你肯定得先关闭一个再打开另一个，只需单例。其他需要同时存在的弹层类型，就要考虑多个了。这也是我不喜欢用声明式的写法去调用弹层的原因，看第6点。
6. 挂一个快捷方法，用时创建一个弹层，用完销毁。
很多弹层需要几个同时存在是不确定的（ Notification、Toast 等 ），而且对于通用型的弹层，会在很多疙瘩角落里调用…… 我觉得虽然快捷方法违反 Vue 状态化管理组件的特性，但特殊需求还是应该特殊对待。
所以我会设置一个全局 alert 方法（ CoffeeScript ）：
Constructor = require './AlertDialog.vue'
VueComponent = Vue.extend Constructor
alert = (message, onOK) ->
vm = new VueComponent().$mount()
vm.message = message
vm.$on 'ok', onOK if onOK
vm.$on 'ok', ->
vm.open = false
document.body.removeChild(vm.$el)
setTimeout (-> vm.$destroy()), 0
document.body.appendChild(vm.$el)
vm.open = true
记得销毁实例前要设置 open = false，因为要通知那个全局 z-index 计数器去递减
7. 模态，阻止滚动
㈢ 号称目前最火的前端框架Vue，它有什么显着特点呢
1、Vue是什么- Vue.js 是目前最火的一个前端框架，除了可以开发网站，还可以开发手机App。
- Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架。
- Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
- Vue.js 是一套用于构建用户界面的渐进式框架。
- 遵循 MVVM 模式
- 编码简洁，体积小，运行效率高，适合移动/PC 端开发
- 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目
总结一句话：不要在想着怎么操作DOM，而是想着如何操作数据!!
㈣ 如何创建自己vue 组件库
可以用以下几种方式：
Vue.component('component-a',{ template:'<div>component-a content</div>' });
或是单文件组件
<template> <div class="app-container"> </div></template> <script> </script> <style> </style>
㈤ 怎么样做一个完整的前端VUE项目
想看看别人是怎么做都吧！可以上掘金或者简书上看别人写的例子，然后上慕课网买点实战课程，基本上就可以入门了！
㈥ 为什么vue的组件库结构都很复杂
这跟vue没什么关系，这是业务本身就很复杂，换react，ag，jq来写，只要业务本身不变，就不会有什么本质的区别。
市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。
vue的组件库常用的解决方案：
COPY：你可能会说我讲究速度，复制之前的组件到新项目中，慢慢的你会发现随着你的项目的增加代码量在成倍上升，重复工作浪费了你很多时间。
子模块：我可以抽离出所有公共的组件放入一个子模块（git submole）中，这种方式虽然解决了重复工作，但对目录结构以及使用者的要求比较多，不够灵活，还是不满意。
使用开源组件库：这可能是一个好的选择，但是，一用才发现很多并不是我们想要的，尤其是移动端组件库：
C端产品定制化需求多。组件库风格与产品不符。适配方案不同rem/px/vw等。针对以上痛点，写一个通用组件库是较优的方案。内容分为两部分。组件库的两个核心思想的实现：全局引用和按需引用。从使用者和开发者两个角度看问题。
㈦ vuecli搭建前端，nodejs怎么搭建后端
1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像，所以先安装cnpm（因为速度和稳定性都比较好）
2、在目标文件夹下打开终端
3、执行cnpm install vue-cli -g 全局安装
运行vue查看安装是否成功
4、运行vue init webpack(注：模板名称) sell2(注：项目名称)
5、进入项目文件夹下执行 cnpm install 来安装下载到模板中的package.json中的依赖，安装完成后会在项目文件夹下自动生成node-mole文件来存放安装的依赖文件
6、由于依赖项非常的多编辑器在检索mole文件时会非常的耗内存，所以在用webstorm编辑器启动项目的时候我们往往会在node-mole文件夹右键去阻止检索该文件
注：webstorm一打开就卡死了，没办法操作文件夹这种情况的解决方法为，首先在文件夹形式下打开删除node-moles文件夹，然后进行阻止检索的方法，然后在重新cnpm install就好*（这种方法需要安装完依赖项先运行一次然后删除node_moles子文件，webstorm打开项目，禁止检索node_ mole文件夹，然后在删除该文件夹，重新安装即可）
7、运行项目执行 npm run dev (注：此时不能用cnpm来运行，必须是npm)
8、将需要的资源放进项目
9、我们需要用到路由功能 所以需要安装vue-router
安装方法：vnpm install vuve-router --save
10、在build/devs-erver.js下编写自定义变量和路由功能
这样在运行项目下就可以得到自己想要的json数据，
这样路由就配置成功，并且得到了自己想要的数据
11、在写代码之前现在html文件下引入初始化样式（保持样式的统一和美观）
12、调用组件的方式
㈧ 如何搭建前端组件平台
web前端js框架 可以用vue来写，vue的最好用的就是组件复用
㈨ 如何通过 Vue+Webpack 来做通用的前端组件化架构设计
angular:
我觉得angularjs的学习上手周期比较长，可能遇到问题，都无法立刻解决，而且编码的质量明显的很差，如果团队没有制定规范，那写出来的代码就没法看。对于一个选用angularjs的团队来说，我认为编码规范是很重要的，否则对编码能力是没有提升的。
avalon:
avalonjs文档资料没有那么全，我感觉一些开源支持的力量不够多。不过，如果有项目需求，需要去做IE浏览器的支持话，我建议选择avalonjs
vue：
vuejs 文档比较齐全，vue吸取了angularjs
的一些优点，规避了一些缺点，至少编码规范上有了一个质的飞跃，学习上手的周期比较短。vue起初只是一个轻量级的类库，用来做类似于react的事情，
同时vue也是可以拿来做前端架构设计的，比如：vueify + vue-router （spa框架）。
vue学习地址：http://cn.vuejs.org/
以上说了那么多没用的，下面就来点干活了！
我的前端组件化架构设计，目录如下：
项目架构用到的知识点，还是挺多的，知识清单如下：
［1］: gulp + webpack 构建打包工具， 使用了一系列的loader，比如：vue-loader, sass-loader, babel-loader , 以及 postcss，postcss-custom-properties，等等
[2] : postcss-custom-properties : 用来做样式全局化, 只需要通过变量去维护，通过编译变量既可以换肤。
[3] : vue-loader （vue文件组件化）:用来去编译处理 *.vue 的文件，一个vue 文件就是一个单独的组件，vue组件开发具有高独立且易维护。组件的划分可大可小，一个页面也可以看作成由多个vue 组件构成的，一个页面也可以是一个vue组件, vue 文件结构如下：
[4] ： babel-loader ：实现对vue文件中 es6 语法的编译解析
[5] ： vue-router ：用来做路由分发，而且文档非常的齐全（学习地址:http://vuejs.github.io/vue-router/zh-cn/index.html）。
[6] ： vue （插件式方式）：vue本身提供了一个install 方式用来注入，我们可以注入一些全局的(属性、方法、以及通用的ui组件)。
下面说说文件夹的含义：
common 文件夹: 是用来存一些通用的东西，比如样式，以及全局的js等等
components 文件夹：用来放独立的组件，我打算后期做细分，ui 组件，以及page 组件等等，这里面就是团队的心血，以后就能做成独立的组件库了。
filters 文件夹：用来放通用的过滤器操作。
plugins 文件夹：用来放 Vue.use 注入到Vue全局的插件库，比如：请求加载、弹框、分页、ui组件 等等。plugins 只是把 componets 组件暴露给 Vue全局。
views 文件夹: 用来存放页面模块
app.vue 文件：第一次启动的主程序模块
app.js 文件：启动前的加载，注入，实例化
router.config.js 文件：路由模块
目前该架构在前后台的SPA架构都适用，可能还是有很多不完善，不过我还很年轻，vue也还狠年轻，望各位道友多给我们年轻人一些机会。
㈩ 怎么搭建vue.js的本地环境
先安装node.js, 然后再安装全局vue-cli脚手架、webpack.
命令输入
1.(npm)cnpm install -g vue-cli //全局安装vue-cli
2.(npm)cnpm install -g webpack //全局安装webpack
(npm)npm install -g webpack-dev-server //安装webpack的本地webserver
安装完成后，vue-cli脚手架其实就已经把vue也装掉了，所以只需输入vue -V 和 webpack -v 等等就可以查看安装成功与否。上面的 cnpm是因为我使用淘宝的加速镜像，如果你没有使用此镜像，请替换回括号内的npm。