# vue-element-template

**Repository Path**: Xbaiss/vue-element-template

## Basic Information

- **Project Name**: vue-element-template
- **Description**: 基于vue-admin-template框架完善操作，如：菜单权限、按钮权限
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://github.com/PanJiaChen/vue-admin-template
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-04-03
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-admin-template

#### 介绍
基于vue-admin-template-master框架完善操作，如：菜单权限、按钮权限

https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#功能


#### 目录结构
    ├── build                               # 构建相关
    ├── mock                                # 项目mock 模拟数据
    ├── node_modules                        npm install 生成
    ├── public                              打包所需静态资源
        ├── index.html                          模板文件
        └── favicon.ico                         浏览器图标 
    ├── src
        ├── api                             AJAX请求
        ├── assets                          项目静态资源
            ├── fonts                           自定义图标资源
            ├── 404_images图片资源
            └── images                          图片资源
        ├── components                      公共组件
            ├── common                          页面公共组件（）
            ├── Breadcrumb                       面包屑组件（框架定的）
            ├── Hamburger                       菜单折叠的组件（框架定的）
            ├── SvgIcon                         svg图标组件（框架定的，左菜单中）
            ├── busines                         业务组件(日期组件)
        ├── directive                       自定义指令
        ├── icons                           # 项目所有 svg icons
        ├── layout                          # 全局 layout
        ├── router                          路由配置
            ├── index.js
            └── routers.js
        ├── store                           Vuex配置
            ├── modules                         不同模块vuex
            └── index.js                        vuex统一入口(存储LocalStorage)
        ├── styles                          公共样式文件
        ├── uitls                           封装工具函数
            ├── jsonStore                       HIS13壳本地存储工具（挂载到VUE）
            ├── tools                           所有自定义工具集合
            ├── util.js                         工具引入文件（挂载到VUE）
            └── request.js                      axios AJAX请求工具
        ├── views                           页面文件
        ├── App.vue                         入口页面
        └── main.js                         入口文件 加载组件 初始化等
        └── permission.js                   路由拦截 权限控制
        └── settings.js                     框架一些设置
    ├── tests                      # 测试
    ├── .env.xxx                   # 环境变量配置
    ├── .eslintrc.js               # eslint 配置项
    ├── .babelrc                   # babel-loader 配置
    ├── .travis.yml                # 自动化CI配置
    ├── vue.config.js              # vue-cli 配置
    ├── postcss.config.js          # postcss 配置
    ├── babel.config.js            # babel配置
    └── package.json               # package.json



#### 安装

    # 进入项目目录
    cd backoffice

    # 安装依赖
    npm install

    # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
    npm install --registry=https://registry.npm.taobao.org

    # 本地开发 启动项目
    npm run dev

#### 开发规范

1).  开发工具使用

    A.建议使用统一开发工具vscode
    B.vscode 使用插件建议 

        1 Chinese (Simplified) Language Pack for Visual Studio Code
        2 formate: CSS/LESS/SCSS formatter
        3 Vetur
        4 Vue Peek
        5 Vue VSCode Snippets
        6 vue-definition
        7 vue-format

    C.使用统一缩进，以tab缩进，一个tab大小为4个空格

2).  框架 / Vue

    1.项目目录结构规范 

    2.路由名与组件名
        为多个英文单词，并且用连接线（-）连接，避免与 HTML 标签冲突，并且结构更加清晰。
        示例：

        // 反例export default {name: 'item'}
        // 正例export default {name: 'page-article-item'}

    3.组件文件

    4.Prop
        定义 Prop 的时候应该始终以驼峰格式（camelCase）命名。这里遵循每个语言的特性，因为在 HTML 标记中对大小写是不敏感的，使用连接线更加友好；而在 JavaScript 中更自然的是驼峰命名。
        示例：

        // 反例
        props: {article-status: Boolean}
        // 正例
        props: {articleStatus: Boolean}


        Prop 的定义应该尽量详细的指定其类型、默认值和验证。
        示例：
        // 反例
        props: ['attrM', 'attrA', 'attrZ']
        // 正例
        props: {
            attrM: Number,
            attrA: {
                type: String,
                required: true
            },
            attrZ: {
                type: Object,
                // 数组/对象的默认值应该由一个工厂函数返回
                default: function () {
                    return {
                        msg: '成就你我'
                    }
                }
            },
            attrE: {
                type: String,
                validator: function (v) {
                    return !(['success', 'fail'].indexOf(v) === -1) 
                }
            }}

    5.v-for
        在执行 v-for 遍历的时候，总是应该带上 key 值使更新 DOM 时渲染效率更高。

        示例：
        // 反例
        <ul>
            <li v-for="item in list">
                {{ item.title }}
            </li>
        </ul>
        // 正例
        <ul>
            <li v-for="item in list" :key="item.id">
                {{ item.title }}
            </li>
        </ul>


        v-for 应该避免与 v-if 在同一个元素（例如：<li>）上使用，因为 v-for 的优先级比 v-if 更高，为了避免无效计算和渲染，应该尽量将 v-if 放到容器的父元素之上。


        示例：
        // 反例<ul>
            <li v-for="item in list" :key="item.id" v-if="showList">
                {{ item.title }}
            </li></ul>
        // 正例<ul v-if="showList">
            <li v-for="item in list" :key="item.id">
                {{ item.title }}
            </li></ul>


    6.指令缩写
        为了统一规范始终使用指令缩写，使用v-bind，v-on并没有什么不好，这里仅为了统一规范。
        示例：
        <input :value="mazeyUser" @click="verifyUser" />


    7.样式
        为了避免样式冲突，整个项目要么全都使用 scoped 特性，要么使用 BEM 约定。


    8.单文件组件的元素顺序

    9.VUEX使用规范
        (1)模板使用vuex-persistedstate默认localStorage来固化数据
        (2)基于1最好不要使用 Vuex,目前只是来管理APP和用户信息状态

        import createPersistedState from "vuex-persistedstate";

        const store = new Vuex.Store({
                state: {
                    //
                },
                mutations: {
                    //
                },
                actions: {

                },
                modules: {
                    app,
                    user
                },
                plugins: [createPersistedState()]
            });

            export default store;

    10.所有涉及AJAX接口的区域和按钮都要加上 Loading状态

    11.封装组件:
        11.1 有包含子组件的 要把子组件的方法和参数暴露出来供调用者使用（this.$refs.xxx()）,切误使用Bus.
        11.2 减少耦合性
        11.2.1 所谓低耦合，就是一个组件在多个环境，复杂的项目下，都可以运行，而不会出现不可用的情况
        11.2.2 应尽量减少使用全局变量
        11.2.3 不推荐在Js里修改样式，这样所有样式依然回归到css样式中
        11.2.4 尽量父组件处理事件
        11.2.5 不要依赖 Vuex，在写入数据庞大的 state 的时候，就会产生内存泄露
        11.2.6 不要在公共组件里写太多的业务逻辑
        11.3 尽量使用具名插槽

    12. 注释规范
        12.1 methods 
            //是否可阅读
            function canRead(){
                return true;
            }

            //获取姓名
            function getName{
                return this.name
            }
        12.2 data 变量名（尽量注释或者语义化）
            return {
                lazyCurrent: 1,   //懒加载当前页
                lazyCount: 0,     //懒加载总计
                loading: false    //是否加载中
            };
        12.3 common组件在本地文件目录写个README.md（包含API，方法，事件，插槽）
        12.4 utils工具 
            @param  参数名{类型}{描述信息}  
                示例：@param name{String}{传入名称}
            @return 返回类型{描述信息}
                示例：@return Boolean{true 可执行，false 不可执行}
            @author 作者{日期}
                示例：@author 张三{2020.02.06}
            完整示例：
                /**
                * 合并Grid的行
                * @param grid {Ext.Grid.Panel} 需要合并的Grid
                * @param cols {Array} 需要合并列的Index(序号)数组；从0开始计数，序号也包含。
                * @param isAllSome {Boolean} ：是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样
                * @return void
                * @author polk6 2015/07/21 
                */
        12.5 AJAX接口,写明当前接口作用
        12.6 template 代码块做好注释以方便查找
        12.7 当前页面公共方法参考12.4
    13. 公共接口放在api/common（如：动态字典，系统参数）
    14. 父组件不允许直接修改子组件data的值，如果一定要改可定义方法供父组件调用


3).  JavaScript

    1.var / let / const
        建议不再使用 var，而使用 let / const，优先使用 const。任何一个变量的使用都要提前申明，除了 function 定义的函数可以随便放在任何位置。

    2.对象  ---
        建议使用扩展运算符拷贝对象而不是 Object.assign(target, ...sources)。
        示例：
        // 错误const foo = {a: 0, b: 1}const bar = Object.assign(foo, {c: 2})
        // 反例const foo = {a: 0, b: 1}const bar = Object.assign({}, foo)
        // 正例const foo = {a: 0, b: 1}const bar = JSON.parse(JSON.stringify(foo))
        // 极好const foo = {a: 0, b: 1}const bar = {...foo, c: 2}
        // 更好const foo = {a: 0, b: 1}const bar = _.merge({}, foo, {a:2,c:{a:1}});

        对象尽量静态化，添加新属性使用 Object.assign(target, ...sources)。
        示例：
        // 反例const foo = {a: 3}
        foo.b = 4
        // 正例const foo = {a: 3}
        Object.assign(foo, {b: 4})
        若有遍历对象的需求，优先使用 Map 结构。
        示例：
            // 反例const myMap = {
                foo: 0,
                bar: 1}for (let key in myMap) {
                // ...}
            // 正例const myMap = new Map([])for (let [key, value] of myMap.entries()) {
                // ...}

    3.模块
        统一使用 import / export 的方式管理项目的模块。
        示例：
            // lib.jsexport default {}
            // app.jsimport app from './lib'

            import 统一放在文件顶部。
            如果模块只有一个输出值，使用 export default，否则不用。
    4.循环
        for (var i = 0; i < arr.length; i++) {} >这样的方式遍历不是很好，尤其当 arr 是 Dom 对象的时候，这样就会一直在访问 Dom 层，
        访问 Dom 层的代价是很大的。for (var i = 0, j=arr.length; i < j; i++) {} >这样的方式去用循环是比较好的，
        只会访问一次 Dom 层（不适用于 Dom 节点会动态更新的场景）。
    5.eval
        避免使用 eval，如要进行字符串转化为对象，最好使用浏览器的内置方法来解析 JSON 数据，以确保代码的安全性和数据的合法性。
        如果浏览器不支持 JSON.parse()，你可以使用 JSON.org 所提供的库。如果不得不使用 eval()，可以尝试用 new Function() 来代替，
        在 new Function() 中运行的代码会在一个局部函数作用域内执行，因此源码中定义的变量不会自动变成全局变量。

    6.函数/方法，要添加功能注释
    7.函数/方法要保持功能单一，一个方法只做一件事情，复杂的功能要进行拆分
    8.来自于接口返回的数据，和来自于本地存储的数据使用之前要做容错处理，保证程序健壮性
    9.该用switch 的时候用switch，滥用if/else会使程序的可读性变差
    10.在一票否决的情况下，可以采用写法如if(x)return 减少代码块嵌套深度

####  指令使用说明

    1.v-hotkey 快捷键指令

        eg:

         <div class="margin-bottom-20" v-hotkey="keyMap" data-hotkey-enable="true">
            请尝试： F4;   ALT+Enter
        </div>
        <script>
            export default {
                computed: {
                    keyMap() {
                    return [
                        {
                        keyVal: "F4",
                        callBack: this.handleF4
                        },
                        {
                        keyVal: "alt+enter",
                        callBack: this.handleAltEnter
                        }
                    ];
                    }
                },
                methods: {
                    handleF4(){
                        alert("F4")
                    },
                    handleAltEnter(){
                        alert("ALT+Enter")
                    }
                }
            }
        </script>

    优先级：
            1. 在vuex中建一个modules（app） state变量是 hotkeyPriority，提供一个mutations（updateHotkeyPriority）
            2. 人工判断是否存在冲突，目前主框架快捷键（F1~F9），
                配置文件（保存  CTRL+S，打印  CTRL+P，查询/刷新  CTRL+R，全选  CTRL+A）存在被修改可能
            3. 引用的子组件或弹窗内容在不显示直接销毁（v-if="false"）
            4. 默认加上 data-hotkey-enable="true"

    2.v-defaultval 控制下拉框 禁止默认数据删除 
        defaultValSet 的数据必须是 {
            // options 下拉选项
            // defaultValue 默认值判断值
        }
        :disabled="item.optKey ==defaultValSet.defaultValue"  //让这个选项 的值不能有任何操作
        eg：

            <el-select
                    style="width:300px"
                    v-model="hospitalValue"
                    multiple
                    v-defaultval="defaultValSet"
                    @change="hospitalChange"
                    placeholder="请选择所属院区"
                >
                    <el-option
                        v-for="item in hospitalOptions"
                        :key="item.optKey"
                        :disabled="item.optKey ==defaultValSet.defaultValue"  
                        :label="item.optValue"
                        :value="item.optKey"
                    ></el-option>
                </el-select>   
        data() {
		    return {
                hospitalValue:[]//选中的值
                hospitalOptions:[]//下拉框的所有值

            }
        }

    3.v-permissionBtn 按钮权限控制  （当前用户没有权限时，组件上使用了该指令则会被隐藏）

        v-permissionBtn="['account_btn']" 这个值是跟后端定好的，在获取路由的时候就有了 
        eg:

       <el-button
            style="margin-bottom:12px"
            class="filter-item el-button--other"
            type="primary"
            @click="batchAudit('one')"
            v-permissionBtn="['account_btn']"
        >一键审核</el-button>