搭建環(huán)境
下載代碼
cd ~
mkdir k8s
cd k8s
git clone http://{ip}/xxx/front.git
項(xiàng)目用了 aid
執(zhí)行npm install aid-cli -g發(fā)現(xiàn)報(bào)錯(cuò) 加了sudo一樣報(bào)錯(cuò) 查看文檔發(fā)現(xiàn)是我的node版本太高 嘗試用nvm管理node版本
sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
執(zhí)行之后 需要退出iterm 然后再開 執(zhí)行 nvm 看到如下結(jié)果說明安裝成功
安裝node 6.9
nvm install 6.9
nvm use 6.9
再次嘗試安裝aid-cli 這次成功了
安裝項(xiàng)目依賴
cd front
npm intstall
啟動項(xiàng)目
aid dev
成功了
關(guān)于scoped
今天地鐵上看了極客時(shí)間唐金洲的vue教學(xué)視頻 他里面給style用了scoped 說是可以避免樣式污染 我試了一下 還是比較好用的
首先我創(chuàng)建了兩個(gè)組件 test.vue 和 test1.vue 然后分別在這兩個(gè)文件里寫了同名的樣式 一個(gè)字體藍(lán)色 一個(gè)字體紅色 效果測試開始
不寫scoped的情況
當(dāng)分別訪問兩個(gè)頁面的時(shí)候 沒有污染
當(dāng)兩個(gè)頁面作為子組件掛載在
home.vue里時(shí)test1的樣式會覆蓋test的樣式
寫scoped的情況
當(dāng)分別訪問兩個(gè)頁面的時(shí)候 沒有污染
當(dāng)兩個(gè)頁面作為子組件掛載在
home.vue里時(shí) 沒有污染
關(guān)于VUE風(fēng)格指南
之前開發(fā)的時(shí)候沒有好好看這部分 出現(xiàn)了很多迷惑行為 其實(shí)官網(wǎng)早就給出了相關(guān)的說明 這些規(guī)則會幫我們規(guī)避錯(cuò)誤 改善可讀性和開發(fā)體驗(yàn) 這里挑重點(diǎn)總結(jié)一下 具體大家可以參考官網(wǎng)
組件名應(yīng)該始終是多個(gè)單詞的
這樣做可以避免跟現(xiàn)有的以及未來的 HTML 元素相沖突 因?yàn)樗械?HTML 元素名稱都是單個(gè)單詞的
反例
Vue.component('todo', {
// ...
})
好例
Vue.component('todo-item', {
// ...
})
組件的 data 必須是一個(gè)函數(shù)
反例
export default {
data: {
foo: 'bar'
}
}
好例
export default {
data () {
return {
foo: 'bar'
}
}
}
Prop 定義應(yīng)該盡量詳細(xì)
至少需要指定其類型
反例
props: ['status']
好例
props: {
status: String
}
總是用 key 配合v-for
以便維護(hù)內(nèi)部組件及其子樹的狀態(tài)。甚至在元素上維護(hù)可預(yù)測的行為
反例
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
好例
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上
一般我們在兩種常見的情況下會傾向于這樣做
為了過濾一個(gè)列表中的項(xiàng)目
比如v-for="user in users" v-if="user.isActive"在這種情形下 請將users替換為一個(gè)計(jì)算屬性 (比如activeUsers) 讓其返回過濾后的列表為了避免渲染本應(yīng)該被隱藏的列表
v-for="user in users" v-if="shouldShowUsers"辑甜。這種情形下慨削，請將v-if移動至容器元素上 (比如ul,ol)
反例
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
好例
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
為組件樣式設(shè)置作用域
這條規(guī)則只和單文件組件有關(guān) 要使用 scoped 設(shè)置作用域也可以通過 CSS Modules，那是一個(gè)基于 class 的類似 BEM 的策略
反例
<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>
<template>
<button :class="[$style.button, $style.buttonClose]">X</button>
</template>
<!-- 使用 CSS Modules -->
<style module>
.button {
border: none;
border-radius: 2px;
}
.buttonClose {
background-color: red;
}
</style>
<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>
私有屬性名
使用模塊作用域保持不允許外部訪問的函數(shù)的私有性 如果無法做到這一點(diǎn) 就始終為插件 混入等不考慮作為對外公共 API 的自定義私有屬性使用 $_前綴 并附帶一個(gè)命名空間以回避和其它作者的沖突 (比如 $_yourPluginName_)
反例
var myGreatMixin = {
// ...
methods: {
_update: function () {
// ...
}
}
}
var myGreatMixin = {
// ...
methods: {
$_update: function () {
// ...
}
}
}
好例
var myGreatMixin = {
// ...
methods: {
$_myGreatMixin_update: function () {
// ...
}
}
}
只要有能夠拼接文件的構(gòu)建系統(tǒng) 就把每個(gè)組件單獨(dú)分成文件
單文件組件的文件名應(yīng)該要么始終是單詞大寫開頭 (PascalCase) 要么始終是橫線連接 (kebab-case)谎势。
應(yīng)用特定樣式和約定的基礎(chǔ)組件 (也就是展示類的菇曲、無邏輯的或無狀態(tài)的組件) 應(yīng)該全部以一個(gè)特定的前綴開頭 比如 Base App 或 V
只應(yīng)該擁有單個(gè)活躍實(shí)例的組件應(yīng)該以 The 前綴命名 以示其唯一性
這不意味著組件只可用于一個(gè)單頁面 而是每個(gè)頁面只使用一次 這些組件永遠(yuǎn)不接受任何 prop 因?yàn)樗鼈兪菫槟愕膽?yīng)用定制的 而不是它們在你的應(yīng)用中的上下文 如果你發(fā)現(xiàn)有必要添加 prop 那就表明這實(shí)際上是一個(gè)可復(fù)用的組件 只是目前在每個(gè)頁面里只使用一次
和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名
組件名應(yīng)該以高級別的 (通常是一般化描述的) 單詞開頭 以描述性的修飾詞結(jié)尾
組件名應(yīng)該傾向于完整單詞而不是縮寫
多個(gè)特性的元素應(yīng)該分多行撰寫 每個(gè)特性一行
關(guān)于父子組件通信
今天遇到一個(gè)場景 有五個(gè)頁面都需要一個(gè)相同的子組件 子組件是一個(gè)表單且包含一個(gè)查詢按鈕 點(diǎn)擊查詢按鈕查詢接口并且在父組件展現(xiàn)數(shù)據(jù) 這就涉及到父子組件交互的問題了
簡單分析一下 就是需要在子組件點(diǎn)擊查詢的時(shí)候講子組件的表單數(shù)據(jù)一同傳遞給父組件 并且五個(gè)頁面 肯定是不同的方法 初步設(shè)想是父組件將需要調(diào)用的方法傳遞到子組件 子組件點(diǎn)擊時(shí)再回傳給父組件 這樣子組件只做下透傳 真實(shí)的方法還是寫在父組件里 但是感覺效率很低 因此嘗試了其他方法 現(xiàn)在總結(jié)如下
第一個(gè)
index.vue (父)
這四個(gè)變量主要來接受子組件傳遞過來的查詢條件 其實(shí)可以不設(shè)置 但是父組件有分頁 分頁的時(shí)候需要調(diào)用相同的查詢方法 入?yún)⒈仨氂羞@幾項(xiàng) 因此只能在子組件點(diǎn)擊查詢的時(shí)候?qū)鬟f過來的參數(shù)賦給這幾個(gè)變量 然后在父組件點(diǎn)擊分頁的時(shí)候才能得到這幾個(gè)參數(shù)
condition.vue (子)
這個(gè)方法的主要思路是在子組件和父組件都引入bus.js作為事件總線 子組件通過bus.$emit()將參數(shù)傳遞到父組件 再有父組件通過bus.$on()接受這個(gè)傳遞過來的方法和參數(shù) 然后調(diào)用父組件自身的方法來處理
第二個(gè)
index.vue (父)
condition.vue (子)
這個(gè)方法的主要思路是在父組件定義好用來接收子組件參數(shù)的方法getTableData() 然后在子組件直接通過this.$parent.getTableData()來調(diào)用父組件的方法
第三個(gè)
index.vue (父)
condition.vue (子)
這個(gè)方法的主要思路是將父組件的方法通過props傳遞到子組件里 然后子組件在點(diǎn)擊查詢按鈕的時(shí)候再將參數(shù)傳遞到這個(gè)方法里
關(guān)于不同目錄父組件Import不同目錄但同名子組件或者vue.component()同名問題
在開發(fā)時(shí) 復(fù)制了同事的組件 稍作修改但組件名稱一樣 處于不同目錄 于是詭異的事情出現(xiàn)了 我在A頁面應(yīng)用我的組件a 同事在B頁面引用組件b 我從A頁面切到B頁面再切回A頁面的時(shí)候 我引用的組件變成了b
就是這兩個(gè)組件 初步懷疑就是因?yàn)橐玫臅r(shí)候用了相同的組件名 在vue注冊的時(shí)候沖突 導(dǎo)致前一個(gè)被頂?shù)?但是如果是被頂?shù)?我又從B切回了A 按理說我的a應(yīng)該會再次頂?shù)鬮 但是沒有 所以在這里留下一個(gè)問題 等待以后找到答案吧 最終的解決方法是我把我引入的組件命名改了就好了
