㈠ 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。