Lin UI 是基於linui微信小程式原生語法 實現的元件庫。遵循簡潔、易用的設計規範。

【林間有風LinUI】

1.官方demo：http://face.cms.7yue.pro/

2.文件：http://doc.cms.7yue.pro/lin/client/

3.github：https://github.com/TaleLin/lin-cms-vue

4.JWT加密composer：https://packagist.org/packages/firebase/php-jwt

前端vue程式碼目錄結構：

├───public // 公共資源目錄，該目錄webpack原封打包
│    ├───icons // icon圖片存放目錄
│    │   favicon.ico // 本站favicon圖片
│    │   iconfont.css // 阿里iconfont檔案
│    │   index.html // template模板
│    │   robots.txt // Robots協議
├───script // 指令碼
├───src　　【下邊】
│    
│   babel.config.js // babel配置檔案
│   .browserslistrc // 適配瀏覽器版本
│   .eslintrc.js // eslint配置檔案
│   .gitignore // git上傳忽略檔案
 


【src檔案目錄】

├───assets // 靜態資原始檔存放目錄
│    ├───components // 佈局元件及業務基礎元件
│    │   ├───layout // layout佈局元件
│    │   ├───base // 通用基礎元件庫（包含element-ui二次封裝元件）
│    ├───config // config配置項
│    │   ├───stage // 路由配置檔案
│    │   │   error-code.js // 與服務端約定的錯誤狀態碼
│    │   │   index.js // 前端自定義配置項
│    ├───lin // Lin CMS核心庫
│    │   ├───directives // 全域性指令
│    │   ├───filter // 全域性過濾器
│    │   ├───mixin // 全域性mixin
│    │   ├───models // model層
│    │   ├───utils // 各種工具函式
│    ├───plugins // 外掛
│    ├───router // 前端路由
│    │   ├───modules // 每個業務模型的路由樹
│    │   │   home-router.js // 選單路由
│    │   │   index.js // vue-router入口檔案
│    │   │   routes.js // vue-router路由配置
│    ├───store // vuex狀態管理檔案
│    ├───views // 業務元件
│    │   App.vue // vue根元件
│    │   main.js // webpack打包入口

增加左側導航eg：會員卡

①：[src]->[config]->[stage]　　建立card.js　　　　並在同級目錄index.js,

②：import cardConfig from './card'   //  引入會員卡路由　　cardConfig

[views]->[card]->CardList.vue

路由配置：介面地址
[src]->[lin]->[models]->user.js

登陸路由獲取token並儲存

=================================================

1.分頁

<el-pagination
 
  :current-page="currentPage4"
  :page-sizes="[5, 10, 20, 30, 40,50,100]"
  :page-size="list_rows"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="onChangeListRows"
  @current-change="onChangePage"
/>

-----------

onChangeListRows(val) {

  this.per_page = val
  this.list_rows = val
  this.getAvatarListData()
  console.log(`每頁 ${val} 條`)
},

onChangePage(val) {

  this.page = val
  this.getAvatarListData()
  console.log(`當前頁: ${val}`)
},

<el-table-column
                        prop="tag"
                        label="分類"
                        width="150"
                        filter-placement="bottom-end"
                >
                    <template slot-scope="scope">
                        <el-tag
                                :type="scope.row.pid === '1' ? 'success' : 'primary'"
                                disable-transitions
                                @click="onClickStatus(scope.$index, scope.row)"
                        >{{ scope.row.pid>0?scope.row.permission.name:'————' }}
                        </el-tag>
                    </template>
                </el-table-column>

// 判斷增加的許可權
            for (let i = 0; i < addAuths.length; i++) {
              // eslint-disable-line
              for (let j = 0; j < this.cacheAuths.length; j++) {
                // eslint-disable-line
                if (addAuths[i] === this.cacheAuths[j]) {
                  addAuths.splice(i, 1)
                }
              }
            }

-----------
遍歷物件

for (let item in this.getAdminPermissionListAdmin) {
    console.log(item)
}

判斷第一種寫法：