vue前端开发-代码片段 凯普顿vscode插件

iview 的代码片段，常用的代码片段

推荐插件：

cpt-hunter
EditorConfig for VS Code
HTML CSS Support 
JavaScript Atom grammar
Path Intellisense
Vetur
vscode-icons

Lodash
wt-snippets

配置：
{
  "workbench.iconTheme": "vscode-icons",
  "workbench.startupEditor": "newUntitledFile",
  // 目录映射:path-intellisense
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  // 目录映射:cpt-hunter
  "cpt-hunter.mappings": {
      "@": "${workspace}/src",
      "store": "${workspace}/src/store/modules"
  }
}


# 如果git找不到 可以添加配置：
{
    "git.enableSmartCommit": true,
    "git.path": "D:/Program Files/Git/bin/git.exe"
}

### ESLint-代码自动修复
# 1.安装插件 ESLint
# 2.安装插件 Prettier - Code formatter
# 修改配置 文件->首选项->设置 => (鼠标右侧点击"{}"符号 打开设置(json) {}
配置如下：

ESLint-代码自动修复 配置：

{
  "workbench.iconTheme": "vscode-icons",
  "workbench.startupEditor": "newUntitledFile",
  // 目录映射:path-intellisense
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  // 目录映射:cpt-hunter
  "cpt-hunter.mappings": {
      "@": "${workspace}/src",
      "store": "${workspace}/src/store/modules"
  },
  // 默认格式化 <script>
  //  - none: 禁用格式化
  //  - prettier: js formatter from prettier(默认)
  //  - prettier-eslint: prettier-eslint
  //  - vscode-typescript: js formatter from TypeScript
  "vetur.format.defaultFormatter.js": "prettier",
  // 默认格式化 <template>
  //  - none: 禁用格式化
  //  - prettyhtml: prettyhtml(默认)
  //  - js-beautify-html: html formatter of js-beautify
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "html", "autoFix": true },
    { "language": "vue", "autoFix": true }
  ],
  // 保存自动修复
  "eslint.autoFixOnSave": true,
  // jsx自动修复有问题，取消js的format
  "editor.formatOnSave": false,
  // Enable/disable default JavaScript formatter (For Prettier)
  "javascript.format.enable": false,
  "prettier.singleQuote": true,
  // 点击保存时，根据 eslint 规则自定修复，同时集成 prettier 到 eslint 中
  "prettier.eslintIntegration": true
}

推荐快捷键：

// 将键绑定放入此文件中以覆盖默认值
// Place your key bindings in this file to overwrite the defaults
[
  // ctrl+space 被切换输入法快捷键占用
  {
    "key": "ctrl+alt+space",
    "command": "editor.action.triggerSuggest",
    "when": "editorTextFocus"
  },
  // ctrl+d 删除一行
  {
    "key": "ctrl+d",
    "command": "editor.action.deleteLines",
    "when": "editorTextFocus"
  },
  // 与删除一行的快捷键互换
  {
    "key": "ctrl+shift+k",
    "command": "editor.action.addSelectionToNextFindMatch",
    "when": "editorFocus"
  },
  // ctrl+shift+/多行注释
  {
    "key": "ctrl+shift+/",
    "command": "editor.action.blockComment",
    "when": "editorTextFocus"
  },
  // 1.转换为大写
  {
    "key": "ctrl+shift+x",
    "command": "editor.action.transformToUppercase"
  },
  // 2.转换为小写
  {
    "key": "ctrl+shift+y",
    "command": "editor.action.transformToLowercase"
  }
]

更新日志

v0.1.6

js

1. trycl --> try { } catch (error) { console.error(error); }
2. 添加ESLint-代码自动修复插件安装 和 配置

v0.1.5

html

1. h-script --> <script type=\"text/javascript\">\r\n $1\r\n</script>
2. h-script:src --> <script type=\"text/javascript\" src=\"$1\"></script>
3. h-link --> link rel=\"stylesheet\" type=\"text/css\" href=\"$1\" />
4. h-style --> <style type=\"text/css\"> $1</style>

js

1. vi-lodash --> `import _ from 'lodash';"
2. cl --> console.log($1);

添加常用插件 常用快捷键

v0.1.4

安装方式

1. 在vscode中 ctrl+p ext install cpt-vscode

iview 代码片段

Button

1. iv-btn --> Button(type="$1" size="$2" icon="$3") $2
2. iv-btn-default --> Button $1
3. iv-btn-primary --> Button(type="primary") $1
4. iv-btn-info --> Button(type="info") $1
5. iv-btn-success --> Button(type="success") $1
6. iv-btn-warning --> Button(type="warning") $1
7. iv-btn-error --> Button(type="error") $1

icon

1. iv-icon --> Icon(type="$1")
2. iv-icon-fontellon --> i.icon.icon$1

input

1. iv-input --> Input(v-model="$1")
2. iv-input-placeholder --> Input(v-model="$1" placeholder="${2:请输入...}")
3. iv-input-icon --> Input(v-model="$1" icon="${2:type...}")
4. iv-input-textarea --> Input(v-model="$1" type="textarea" placeholder="${2:请输入...}")
5. iv-input-slot -->

Input(v-model="$1")
	span(slot="prepend") $2
	span(slot="append") $3

6.iv-input-number --> Input-number(v-model="$1" :max="$2" :min="$3" )

radio

1. iv-radio --> Radio(v-model="${1:single}")
2. iv-radio-group -->

Radio-group(v-model="${1:phone}" ${4:vertical})
	Radio(label="${2:Apple}") "${2:Apple}"
	Radio(label="${3:Huawei}" ${5:disabled}) "${3:Huawei}"

3. iv-radio-group-button -->

Radio-group(v-model="${1:phone}" type="button")
	Radio(label="${2:Apple}") "${2:Apple}"
	Radio(label="${3:Huawei}" ${5:disabled}) "${3:Huawei}"

checkbox

1. iv-checkbox --> Checkbox(v-model="${1:single}")
2. iv-checkbox-group -->

Checkbox-group(v-model="$1")
  Checkbox(label="$2")

###switch

1. iv-switch --> i-switch(v-model="$1")
2. iv-switch-slot -->

i-switch(v-model="$1")
  span(slot="open") ${2:开}
  span(slot="close") ${3:关}

table

1. iv-table --> Table(ref="table" border :columns="${1:columns}" :data="${2:data}" v-grid-autosize="${3:10}")
2. iv-table-strip --> Table(ref="table" stripe :columns="${1:columns}" :data="${2:data}" v-grid-autosize="${3:10}")
3. iv-table-highlightrow --> Table(ref="table" border highlight-row :columns="${1:columns}" :data="${2:data}" v-grid-autosize="${3:10}")
4. iv-table-cpt --> custom-table(ref="table" :columns="${1:columns}" :data="${2:data}" v-grid-autosize="${3:70}")

select

1. iv-select -->

Select(v-model="$1")
  Option(v-for="item in $1" :value="item.$2" :key="item") {{item.$1}

2. iv-select-filterable-multiple -->

Select(v-model="$1" filterable multiple)
  Option(v-for="item in $1" :value="item.$2" :key="item") \{\{item.$3\}

slider

1. iv-slider --> Slider(v-model="$1" :tip-format="$2")
2. iv-slider-tipformat --> Slider(v-model="$1" :tip-format="$2")

date-picker

1. iv-datepicker --> Date-picker(type="date" :v-model="$1" format="${2:yyyy-MM-dd}" placeholder="${3:选择日期}")
2. iv-datepicker-range --> Date-picker(type="daterange" :v-model="$1" format="${2:yyyy-MM-dd}" placement="bottom-end" placeholder="${3:选择日期}")
3. iv-datepicker-time --> Date-picker(type="datetime" :v-model="$1" format="${2:yyyy-MM-dd HH:mm:ss}" placeholder="${3:选择日期时间}")
4. iv-datepicker-year --> Date-picker(type="year" :v-model="$1" placeholder="${3:选择年份}")
5. iv-datepicker-month --> Date-picker(type="month" :v-model="$1" format="${2:yyyy-MM}" placeholder="${3:选择月份}")

time-picker

1. Time-picker(type="time" :v-model="$1" format="${HH:mm:ss}" placeholder="${3:选择时间}")

cascader

级联选择

1. iv-cascader --> cascader(:data="${1:data}" v-model="$2")

transfer

穿梭框

1. iv-transfer --> Transfer(:data="${1:data}" target-keys="${2:targetKeys}" :operations="['源列表','目标列表']")
2. iv-transfer-filterable --> Transfer(:data="${1:data}" filterable target-keys="${2:targetKeys}" :operations="['源列表','目标列表']")

rate

评分

1. iv-rate --> Rate(allow-half v-model="$1")

upload

1. iv-upload -->

Upload(action="$1")
  Button(type="ghost" icon="ios-cloud-upload-outline" ${3:multiple}) ${2:上传文件}

form

1. iv-form --> Form(ref="form" :model="${1:model}" :rules="${2:rules}" :label-width="${3:100}")
2. iv-form-item -->

Form-item(label="$1" prop="$2")
  Input(type="${3:text}" v-model="$2")

3. iv-form-item-select -->

Form-item(label="$1" prop="$2")
  Select(v-model="$2")
	Option(v-for="item in $3" :value="item.${2}" :key="item") \{\{item.${4}\}

4. iv-form-item-blank --> Form-item(label="$1" prop="$2")

message

1. iv-message-info --> this.$Message.info(${1:消息})
2. iv-message-success --> this.$Message.success(${1:'消息'})
3. iv-message-warning --> this.$Message.warning(${1:'消息'})
4. iv-message-error --> this.$Message.error(${1:'消息'})
5. iv-message-loading --> this.$Message.loading(${1:'消息'})
6. iv-message-destory -->> this.$Message.destroy()

Notice

1. iv-notice-info --> this.$Notice.info(${1:消息})
2. iv-notice-success --> this.$Notice.success(${1:'消息'})
3. iv-notice-warning --> this.$Notice.warning(${1:'消息'})
4. iv-notice-error --> this.$Notice.error(${1:'消息'})
5. iv-notice-loading --> this.$Notice.loading(${1:'消息'})
6. iv-notice-destory -->> this.$Notice.destroy()
7. iv-notice-close -->> this.$Notice.close(${1:key})
8. iv-notice-open -->> this.$Notice.open(\{title:${1:'标题'},desc:${1:'描述'}\})

Modal

1. iv-modal --> Modal(v-model="visible" title="${1:标题}")
2. iv-modal-cpt -->

Modal(v-model="visible" title="${1:标题}" :mask-closable="false" )
  $3
  Button(type="text" slot="footer" @click="visible=false") 取消
  Button(type="primary" slot="footer" @click="visible=false") ${2:确定}

3. iv-modal-ext --> 可拖动，非模态，禁用ESC键的弹框

progress

1. iv-progress --> Progress(:percent="$1")
2. iv-progress-active --> Progress(:percent="$1" status="active")
3. iv-progress-wrong --> Progress(:percent="$1" status="wrong")

Badge

1. iv-badge -->

Badge(:count="${1:count}")
  $2

2. iv-badge-dot -->

Badge(dot)
  $1

tag

1. iv-tag --> Tag ${1:标签}
2. iv-tag-close --> Tag(closable color="blue") ${1:标签}
3. iv-tag-border --> Tag(closable type="border" color="blue") ${1:标签}

Tooltip 文字提示

1. iv-tooltip

Tooltip(content="$1" placement="top")
  $2

2. iv-tooltip-slot

Tooltip(content="$1" placement="top")
  div(slot="content")
	$2
  $3

Poptip 气泡提示

1. iv-poptip

Poptip(trigger="${1:hover}" title="$2" content="${3:内容}" placement="top")
	$4

Tabs 标签页

1. iv-tabs -->

Tabs(value="${1:tab}")
  Tab-pane(label="标签一" name="name1") 内容

2. iv-tabs-card -->

Tabs(value="${1:tab}" type="card")
  Tab-pane(label="标签一" name="name1") 内容

Page 分页

1. iv-page --> Page(:total="total" :page-size="pageSize" show-total placement="top" @on-change="pageChange")

凯普顿代码片段

1. cpt-page

普通页面模板

<template lang=\"pug\"> 
  app-layout.${1:${TM_FILENAME}} 
    $2 
</template> 
 
<script> 
import { SEARCH } from '$1'; 
import { mapGetters } from 'vuex'; 
export default { 
 
} 
</script> 
 
<style lang=\"less\"> 
.$1{ 
 
} 
</style>"

2. cpt-page-crud

具有增删改查的页面模板

<template lang="pug">
  app-layout.$1
    page-layout.page-layout-app.mt2
      div(slot="top-left")
        Button(@click="addHandler")
          i.icon.icon-doc-new
          span 添加
        Button.ml1(@click="editHandler")
          i.icon.icon-edit-1
          span 编辑
        Button.ml1(@click="removeHandler")
          i.icon.icon-trash-empty
          span 删除
      div(slot="top-right")
        Input(type="text" icon="search" v-model="key" style="width:200px;" placeholder="输入关键字查询..." @on-enter="search")
        Button.ml1(icon="refresh" @click="key=null,search()")
      Table.mt2(ref="table" border :columns="vcolumns" :data="data" v-grid-autosize="10")
      div.page-bottom.p2(slot="bottom")
        Page(:total="total" show-total @on-change="pageChange" :page-size="pageSize")
      edit(ref="edit" @on-saved="search")
</template>
<script>
import { SEARCH, GETTER_DATA, GETTER_COLUMNS, GETTER_TOTAL, REMOVE } from 'store/sjgl/cbf'
import pageMixin from '@/mixin/page';
import edit from './edit';
import { mapGetters } from 'vuex';

export default {
  mixins: [pageMixin],
  components: {
    edit
  },
  computed: {
    ...mapGetters({
      data: GETTER_DATA,
      columns: GETTER_COLUMNS,
      total: GETTER_TOTAL
    }),
    vcolumns() {
      let icols = this.addSelectionColumn(this.columns);
      icols.push({
        title: '操作',
        align: 'center',
        width: 220,
        render: (h, params) => {
          let evs = {
            on: {
              'on-ok': () => {
                this.$store.dispatch(REMOVE, [params.row.ID]).then(res => {
                  this.search();
                });
              }
            }
          }
          return <div>
            <i-button type="text" size="small" >查看</i-button>
            <i-button type="text" size="small" on-click={this.editHandler.bind(this, params.row.ID)}>编辑</i-button>
            <poptip confirm title="确认删除吗？" placement="top-end" width="200" {...evs} >
              <i-button type="text" size="small">删除</i-button>
            </poptip>
          </div>
        }
      })
      return icols;
    }
  },
  methods: {
    search() {
      this.$store.dispatch(SEARCH, { ...this.getPageParams() })
    },
    addHandler() {
      this.$refs.edit.show();
    },
    removeHandler() {
      let selection = this.getSelection('table');
      if (selection) {
        let ids = _.map(selection, item => item.userId);
        this.$Modal.confirm({
          title: '询问',
          content: '是否删除',
          onOk: () => {
            this.$store.dispatch(REMOVE, ids).then(res => {
              this.search();
            });
          }
        })
      }
    },
    editHandler(id) {
      if (!id) {
        id = _.get(this.getSelection('table')[0], 'ID');
      }
      id && this.$refs.edit.show(id);
    }
  }
}
</script>

<style lang="less">
.sjgl-cbf {}
</style>
</style>

3. cpt-edit

普通编辑模板

<template lang="pug">
  Modal.$1-edit(v-model="visible" title="$2" :mask-closable="false" )
    buss-form(ref="form" :initModel="model" :state="state")
    Button(slot="footer" type="text" @click="visible=false") 取消
    Button(slot="footer" type="primary" @click="okHandler" :loading="loading") 确定
</template>
<script>
import bussForm from './form';
import { GET_DEFAULTS, GETTER_MODEL, SAVE, SET_MODEL, GET } from 'store/$1';
import { mapGetters } from 'vuex';
import { FORM_STATUS } from '@/consts';
export default {
  components: {
    bussForm
  },
  data() {
    return {
      visible: false,
      state: FORM_STATUS.add,
      loading: false
    }
  },
  watch: {
    visible(nv) {
      if (nv === false) {
        this.$store.dispatch(GET_DEFAULTS);
        this.$refs.form.reset();
      }
    }
  },
  methods: {
    show(id) {
      this.visible = true;
      this.state = FORM_STATUS.add;
      if (id) {
        this.state = FORM_STATUS.edit;
        this.$store.dispatch(GET, id);
      }
    },
    async okHandler() {
      let model = await this.$refs.form.getModel();
      if (model) {
        this.loading = true;
        this.$store.dispatch(SAVE, model).then(res => {
          this.visible = false;
          this.loading = false;
          this.$emit('on-saved');
        });
      }
    }
  },
  computed: {
    ...mapGetters({
      model: GETTER_MODEL
    })
  }
}
</script>
<style lang="less">
.$1-edit {

}
</style>

4. cpt-form

普通表单模板

<template lang="pug">
  Form.$1-Form(ref="form" :rules="rules" :model="model" :labelWidth="80")
    Form-item(label="名称" prop="name")
      Input(type="text" v-model="model.name")
</template>
<script>
import {rules} from 'store/$1/model';
import _ from 'lodash';
export default {
  props: {
    initModel: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      rules: _.cloneDeep(rules),
      model: this.initModel
    }
  },
  methods: {
    getModel() {
      return new Promise(r => {
        this.$refs.form.validate(valid => {
          if (valid) {
            r(_.cloneDeep(this.model));
          } else {
            r(null);
          }
        });
      });
    },
    reset() {
      this.$refs.form.resetFields();
    }
  }
}
</script>
<style lang="less">
.$1-form{

}
</style>

5. cpt-store

普通数据业务层模板吧

import api from './api';
import _ from 'lodash';
import { columns, defaults } from './model';

const namespace = '${1:TM_TM_FILENAME}';
const r = ac => `${namespace}/${ac}`;
export const moduleName = namespace;
//actions
export const SEARCH = r('SEARCH');
//getters
export const GETTER_DATA = r('GETTER_DATA');
//mutations
const SETDATA = r('SETDATA');

export const module = function (api) {
  return {
    state: {
      data: [],
    },
    getters: {
      [GETTER_DATA]: state => _.cloneDeep(state.data),
    },
    mutations: {
      [SETDATA](true/state, { data, total }) {
        state.data = data;
        state.total = total;
      }
    },
    actions: {
      async[SEARCH](true/{ commit }, { key, page, pageSize }) {
        let res = await api.search(key, page, pageSize);
        res.success && commit(SETDATA, res);
        return res;
      }
    }
  }
}
export default module(api);

6. cpt-store-crud

具有增删改查数据业务层的模板

import api from './api';
import _ from 'lodash';
import { columns, defaults } from './model';

const namespace = '$1';
const r = ac => `${namespace}/${ac}`;
export const moduleName = namespace;
//actions
export const SEARCH = r('SEARCH');
export const GET_DEFAULTS = r('GET_DEFAULTS');
export const SAVE = r('SAVE');
export const REMOVE = r('REMOVE');
export const GET = r('GET');
//getters
export const GETTER_DATA = r('GETTER_DATA');
export const GETTER_COLUMNS = r('GETTER_COLUMNS');
export const GETTER_TOTAL = r('GETTER_TOTAL');
export const GETTER_MODEL = r('GETTER_MODEL');
//mutations
const SETDATA = r('setData');
export const SET_MODEL = r('SET_MODEL');

export const module = function (api) {
  return {
    state: {
      data: [],
      columns: _.cloneDeep(columns),
      total: 0,
      model: _.cloneDeep(defaults)
    },
    getters: {
      [GETTER_DATA]: state => _.cloneDeep(state.data),
      [GETTER_COLUMNS]: state => _.cloneDeep(state.columns),
      [GETTER_TOTAL]: state => state.total,
      [GETTER_MODEL]: state => _.cloneDeep(state.model)
    },
    mutations: {
      [SETDATA](true/state, { data, total }) {
        state.data = data;
        state.total = total;
      },
      [SET_MODEL](true/state, model) {
        state.model = model;
      }
    },
    actions: {
      async[SEARCH](true/{ commit }, { key, page, pageSize }) {
        let res = await api.search(key, page, pageSize);
        res.success && commit(SETDATA, res);
        return res;
      },
      [GET_DEFAULTS](true/{ commit }) {
        commit(SET_MODEL, _.cloneDeep(defaults));
      },
      [SAVE](true/ctx, model) {
        return api.save(model);
      },
      [REMOVE](true/ctx, ids) {
        return api.remove(ids);
      },
      async[GET](true/{ commit }, id) {
        let res = await api.get(id);
        commit(SET_MODEL, res.data);
        return res;
      }
    }
  }
}
export default module(api);

7. cpt-imp

import $1 from '$2';

8. cpt-imp-loadsh

引入lodash --> import _ from 'lodash';

9. cpt-imp-vuex

引入vuex --> import {mapGetters,${1:mapMutations},${2:mapState}} from 'lodash';

10. cpt-imp-api

引入api --> import api from './api';

11. cpt-imp-model

引入model --> import \{ columns, defaults \} from './model';

12. cpt-imp-comp

引入component --> import $1 from '@/components/$2'

13. cpt-exp

导出 export const $1 = $2

14. cpt-exp-storetype

导出数据层的actions,muations,getters --> export const $1 = r('$1');

15. cpt-exp-default

导出默认 --> export default {}

16. cpt-store-getters

[$1]:state=>_.cloneDeep(state.$2);

17. cpt-store-muac

  [$1](true/state, $2) {
    state.$2 = $2;
  },