zl-auto-login v1.0.0

zl_dev

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

打包组件

npm run lib

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

介绍

1. App.vue为开发入口，
2. main.js是开发时候的配置
3. packages目录是组件目录，我们开发的组件就存放在这里

需求

1. 采用npm组件的方式打包vue文件成js，然后直接引入的方式用于项目使用，而不是通过npm安装的方式

实现

1. 利用脚手架创建项目 vue create demo
2. 创建好之后在目录新建一个packages目录用于存放组件，当然也可以在src中创建一个目录存放
3. 由于创建了packages目录在src外部，脚手架不会对该目录编译，因此需要配置webpack进行编译，在vue.config.js文件中配置

// vue.config.js
module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          return options
        })
  }
}

4. 创建组件目录和组件入口，先在packages目录下创建一个zlDemo文件和一个index.js文件，用来配置该目录下的组件

// packages/index.js
import zlDemo from './zlDemo'

// 存储组件列表
const components = [
  zlDemo
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  zlDemo
}

5. 创建组件，在packages/zlDemo目录下创建index.js和index.vue组件文件，代码如下

// packages/zlDemo/index.js
import zlToast from './index.vue'

zlToast.install = function (Vue) {
  Vue.component(zlToast.name, zlToast)
}

export default zlToast

// packages/zlDemo/index.vue
<template>
  <div class="zl-demo ceshi">
    这是一个demo
  </div>
</template>

<script>
export default {
  name: 'zlDemo'
}
</script>

<style>
</style>

6. 配置打包命令，在package.json文件中添加lib命令用于打包

// package.json
"scripts": { // 配置打包命令
    "lib": "vue-cli-service build --target lib --name  zlDemo1 --dest lib packages/index.js"
  }
  "name": "zlDemo", // 组件名称
  "version": "0.1.0", // 版本号

7. 测试数据,attribute表示传递到item的props数据，里面的每一项都用对象表示，对象包含7项extendData（额外数据，比如选择器的静态数据等），key（键名），label（该属性的名称），type（属性的类型），value（属性值值）,valueType（值类型），属性类型（attributeType）。 7.1 属性类型： 1） 基础属性（basicAttr） 2） 布尔属性（booleanAttr） 3） 校验属性（ruleAttr） 4） 选择属性（selectAttr）

{
    "attribute": {
        "modelValue": {
            "attributeType": "basicAttr",
            "extendData": null,
            "key": "modelValue",
            "label": "默认值",
            "type": "number",
            "valueType": "number",
            "value": 20
        },
        "maxVal": {
            "attributeType": "basicAttr",
            "extendData": null,
            "key": "maxVal",
            "label": "最大值",
            "type": "number",
            "valueType": "number",
            "value": 100
        },
        "sliderColor": {
            "attributeType": "basicAttr",
            "extendData": null,
            "key": "sliderColor",
            "label": "进度颜色",
            "type": "ElInput",
            "valueType": "number",
            "value": "#000"
        }
    }
}

/**

• modelValue、ArrayModelValue和ObjectModelValue用其中一个来存储双向绑定的值
• 所有对象的type属性取值有，number、ElInput、textArea、ArrayGoTopMenu、radioGroupStaticData、select */

8. 正则配置规则

"rules": {
    "attributeType": "basicAttr",
    "extendData": {"rightName":[{"required":true,"message":"请输入权限中文名1","trigger":"blur"},{"min":1,"max":100,"message":"长度在 1 到 100 个字符","trigger":"blur"}],"rightENName":{"ruleReg":{"reg":"[^a-zA-Z0-9-_.]","min":1,"max":100,"require":true},"trigger":"blur"}},
    "key": "rules",
    "label": "检验规则",
    "type": "string",
    "valueType": "string",
    "value": ""
},
// 有两种方式配置rule校验规则
// 1. 固定形式（跟elementUI）默认规则一致
"rightName":[{"required":true,"message":"请输入权限中文名1","trigger":"blur"},{"min":1,"max":100,"message":"长度在 1 到 100 个字符","trigger":"blur"}]
// 2. 自定义规则
"rightENName": // 校验名称
    {
        "ruleReg": // 自定义规则
            {"reg":"[^a-zA-Z0-9-_.]",// 正则
            "min":1, // 最小
            "max":100, // 最大
            "require":true // 是否必填，默认false
            },
        "trigger":"blur" // 触发校验时机（跟ElementUI相同名称）
    }}