# 若水前端ui框架-PC端\[dreoma-vue-ui-wap\]
## 項目設置
~~~
npm install
~~~
### 編譯和熱重新開發以進行開發
~~~
npm run serve
~~~
### 編譯并縮小生產
~~~
npm run build
~~~
### 運行測試
~~~
npm run test
~~~
### 提示和修復文件
~~~
npm run lint
~~~
### 自定義配置
See[配置參考](https://cli.vuejs.org/config/).
* * *
### Markdown
* [文檔](http://www.markdown.cn/)
* [菜鳥教程](https://www.runoob.com/markdown/md-tutorial.html)
* [GitHub](https://github.com/mzlogin/markdown-intro/blob/master/README.md)
### 依賴插件
* [ui組件庫-vant](https://youzan.github.io/vant/#/zh-CN/intro)
* [ajax使用-axios](http://www.axios-js.com/zh-cn/)
* [數據持久化(緩存)-js-cookie](https://github.com/js-cookie/js-cookie)
* [數字加載動畫](http://inorganik.github.io/countUp.js/)
* * *
## 框架規范
### css選擇器中避免使用標簽名
~~~
/* bad */
img {}
/* good */
.head-box {}
~~~
### id和class的命名
> CSS命名由小寫的英文單詞或組合命名，單詞與單詞之間通過“-”連接，不要用駝峰。
~~~
/* bad */
.logoImg {}
/* good */
.logo-img {}
/* 框架的樣式必須加上 vrs- 前綴 */
.vrs-logo-img {}
~~~
> CSS 文件命名規范
| name | 說明 |
| --- | --- |
| index | 一般用于首頁建立樣式 |
| head/header | 頭部樣式，當多個頁面頭部設計風格相同時使用 |
| foot/footer | 底部樣式，當多個頁面底部設計風格相同時使用 |
| base/global/common | 頁面樣式基礎，全局公用樣式，頁面中必須包含 |
| layout | 布局、版面樣式 |
| module | 模塊，用于產品類頁，也可與其它樣式配合使用 |
| master | 主要的樣式表 |
| columns | 專欄樣式 |
| themes | 主體樣式 |
| forms | 表單樣式 |
| mend | 補丁，基于已有樣式進行的私有化修補 |
> CSS 選擇器命名規范
| name | 說明 |
| --- | --- |
| logo | 標記網站logo標志 |
| page | 代表整個頁面，用于最外層 |
| container | 頁面外圍控制整體布局寬度 |
| wrap/wrapper/box | 外套，將所有元素包在一起的一個外圍包，用于最外層 |
| head/header | 頁頭區域，用于頭部 |
| foot/footer | 頁尾、頁腳。網站一些附加信息放置區域，（或命名為 copyright）用于底部 |
| main | 網站中的主要區域，主體內容 |
| column | 欄目 |
| sidebar | 側欄 |
| navbar, navigation, nav-wrapper | 導航條或導航包，代表橫向導航 |
| nav | 導航：top-nav 頂部導航、main-nav 主導航、 |
| sidebar | 邊導航：left-sidebar 左導航、right-sidebar 右導航 |
| menu | 菜單：links-menu 鏈接菜單 |
| drop | 下拉 |
| dorpmenu | 下拉菜單 |
| sub | 子級：sub-nav 子導航、sub-menu 子菜單、sub-page 二級頁面子頁面 |
| content | 內容，網站中最重要的內容區域 |
| title | 標題 |
| name | 名字 名稱 |
| summary | 摘要 |
| desc | 描述 |
| rich-text | 富文本 |
| banner/focus | 標語、廣告條、頂部廣告條 |
| bar | 條：login-bar 登錄條、search-bar 搜索條、tool-bar 工具條 |
| register | 注冊 |
| shop/store | 店鋪、商店 |
| icon | 圖標 |
| image/pic/photo | 圖片、照片 |
| label | 輸入框標題 |
| hot | 熱門熱點：hot-search 熱門搜索 |
| list | 列表：news-list 新聞列表 |
| item | 列表項： goods-item 商品項 |
| scroll | 滾動 |
| tab | 標簽頁 tab-bar 標簽欄 |
| tag | 標記 |
| sitemap | 網站地圖 |
| msg/message | 提示信息 |
| tips | 小技巧 |
| note | 注釋 |
| guild | 指南 |
| btn | 按鈕 |
| current/cur | 當前的 |
| on/active | 選中狀態 |
| joinus | 加入 |
| order | 訂單：buy-order 購物訂單 |
| status | 狀態 |
| arr/arrow | 箭頭 |
| service | 服務 |
| breadcrumb | 面包屑導航 (即頁面所處位置導航提示) |
| download | 下載 |
| vote | 投票 |
| site-info | 網站信息: site-info-credits 信譽、site-info-legal 法律信息 |
| partner | 合作伙伴 |
| friendlink | 友情鏈接 |
| copyright | 版權信息 |
| overlay | 遮罩層 |
| toast | 輕提示 |
| popup | 彈窗 |
| card | 卡片帶圓角的盒子 |
| cell | 單元格 |
### 合理的使用ID
~~~
/* bad */
#content .title {
font-size: 2em;
}
/* good */
.content .title {
font-size: 2em;
}
~~~
### 0后面不帶單位
~~~
/* bad */
.test {
padding-bottom: 0px;
margin: 0em;
}
/* good */
.test {
padding-bottom: 0;
margin: 0;
}
~~~
### css類名嵌套最多三層
~~~
/* bad */
.head-wrap .head .title .text img {}
/* good */
.head-wrap .text {}
~~~
### 屬性格式
* 盡量使用縮寫屬性
* 屬性名的冒號后使用一個空格。出于一致性的原因，屬性和值（但屬性和冒號之間沒有空格）的之間始終使用一個空格。
* 每個選擇器和屬性聲明總是使用新的一行。
* 屬性選擇器或屬性值用雙引號（””），而不是單引號（”）括起來。
* URI值（url()）不要使用引號。
### 組件的name必須添加-使用文件名
~~~
// bad
export default {
name: ''
}
// good
export default {
name: 'vrs-count-bar2'
}
~~~
### 文件名命名規范使用連字符的方式(kebab-case)
~~~
// bad
mycomponent.vue
myComponent.vue
MyComponent.vue
// good
my-component.vue
~~~
### 自閉合組件
> 在單文件組件中沒有內容的組件應該是自閉合的。
~~~
<!-- bad -->
<my-component></my-component>
<!-- good -->
<my-component />
~~~
### Prop 名大小寫
> 在聲明 prop 的時候，其命名應該始終使用 camelCase，而在模板中應該始終使用 kebab-case。
~~~
// bad
export default {
props: {
'greeting-text': String
}
}
// good
export default {
props: {
greetingText: String
}
}
~~~
~~~
<!-- bad -->
<welcome-message greetingText="hi" />
<!-- good -->
<welcome-message greeting-text="hi" />
~~~
### Props 換行
> 多個 Props 的元素應該分多行撰寫，每個 Props 一行，閉合標簽單起一行。
~~~
<!-- bad -->
<my-component foo="a" bar="b" baz="c" />
<!-- good -->
<my-component
foo="a"
bar="b"
baz="c"
/>
~~~
### 指令縮寫
> 指令縮寫，用`:`表示`v-bind:`，用`@`表示`v-on:`
~~~
<!-- bad -->
<input
v-bind:value="value"
v-on:input="onInput"
>
<!-- good -->
<input
:value="value"
@input="onInput"
>
~~~
### Props 順序
> 標簽的 Props 應該有統一的順序，依次為指令、屬性和事件。
~~~
<my-component
v-if="if"
v-show="show"
v-model="value"
ref="ref"
:key="key"
:text="text"
@input="onInput"
@change="onChange"
/>
~~~
### 組件選項的順序
> 組件選項應該有統一的順序。
~~~
export default {
name: '',
mixins: [],
components: {},
props: {},
data() {},
computed: {},
watch: {},
created() {},
mounted() {},
destroyed() {},
methods: {}
}
~~~
### 組件選項中的空行
> 組件選項較多時，建議在屬性之間添加空行。
~~~
export default {
computed: {
formattedValue() {
// ...
},
styles() {
// ...
}
},
methods: {
onInput() {
// ...
},
onChange() {
// ...
}
}
}
~~~
### 單文件組件頂級標簽的順序
> 單文件組件應該總是讓頂級標簽的順序保持一致，且標簽之間留有空行。
~~~
<template>
...
</template>
<script>
/* ... */
</script>
<style>
/* ... */
</style>
~~~
### 相關鏈接
* [vue風格指南](https://cn.vuejs.org/v2/style-guide/#%E8%A7%84%E5%88%99%E5%BD%92%E7%B1%BB)
* [vant風格指南](https://youzan.github.io/vant/#/zh-CN/style-guide#dan-wen-jian-zu-jian-ding-ji-biao-qian-de-shun-xu)
### 一個制表符等于2個空格
### 變量名和方法名使用小駝峰式命名法：首字母小寫 userInfo
> 變量名和方法名前綴表，get和set不推薦用作變量名的前綴
| 前綴 | 含義 | 返回值 |
| --- | --- | --- |
| can | 判斷是否可執行某個動作 (權限) | 函數返回一個布爾值。true：可執行；false：不可執行 |
| has | 判斷是否含有某個值 | 函數返回一個布爾值。true：含有此值；false：不含有此值 |
| is | 判斷是否為某個值 | 函數返回一個布爾值。true：為某個值；false：不為某個值 |
| get | 獲取某個值 | 函數返回一個非布爾值 |
| set | 設置某個值 | 無返回值、返回是否設置成功或者返回鏈式對象 |
~~~
// 是否可閱讀
function canRead(){
return true
}
// 獲取姓名
function getName{
return this.name
}
~~~
### 注釋規范參考[JSDoc](https://www.html.cn/doc/jsdoc/about-commandline.html)
~~~
// @author 作者
// @param 函數的參數
// @returns 返回值
/**
* 函數的描述
* @author 小煒 2019-07-30
* @param {String} attr - 參數key
* @returns {String} 參數值
*/
function(attr) {
return ''
}
~~~
### 標簽語義化(SEO)
> 語義化是指：根據元素其被創造出來時的初始意義來使用它。
> 意思就是用正確的標簽干正確的事，而不是只有div和span。
* 一個頁面中，可以定義多個`<header> <footer>`元素。
* 頁面頭部：`<header></header>`
* 頁面底部:`<footer></footer>`
* 導航：`<nav></nav>`
* 標題使用：`<h1></h1><h2></h2>`
* 一個頁面只能使用一個`<h1>`標簽
* 一個頁面有多個標題可以使用`<h2>`標簽
* 組件或者模塊：`<section></section>`
* 主體：`<main></main>`
* 文章：`<article></article>`
### js避免全局命名空間污染和嚴格模式`'use strict'`
> 防止全局命名空間被污染，將代碼包裹成一個[IIFE(Immediately-Invoked Function Expression)](https://developer.mozilla.org/zh-CN/docs/Glossary/%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F)，創建獨立隔絕的定義域。也使得內存在執行完后立即釋放。
> IIFE 還可確保你的代碼不會輕易被其它全局命名空間里的代碼所修改（i.e. 第三方庫，window 引用，被覆蓋的未定義的關鍵字等等）
> 嚴格模式應該在獨立的 IIFE 中應用它。避免在腳本第一行使用它而導致所有腳本都啟動了嚴格模式，這有可能會引發一些第三方類庫的問題。
##### bad
~~~
// x 和 y 變量是全局變量
var x = 10, y = 100
console.log(window.x + ' ' + window.y)
~~~
##### good
~~~
(function(log, w){
// 嚴格模式
'use strict'
var x = 10, y = 100
// 無法從外部訪問變量 x y 輸出 'true true'
log((w.x === undefined) + ' ' + (w.y === undefined))
}(window.console.log, window))
~~~
