树形多选框

最近把项目的打包方式从rollup替换成了webpack记录一下webpack打包和诸多配置，以及npm发布包等。顺便把项目里的简单的树形结构提出来当个轮子，仅提供给有需要的人，具体实现比较简单，看看源码应该懂了。

项目结构

基于Vue框架开发，使用scss扩展语言 使用Webpack进行打包，做了eslint，babel和prettier的扩展，用yarn管理依赖

1.安装webpack
yarn add -D webpack webpack-cli

2.安装vue解析器、图片解析器及css解析器
yarn add -D vue-loader vue-template-compiler
yarn add -D file-loader url-loader
yarn add -D style-loader css-loader

在webpack.config.js中的配置

const { VueLoaderPlugin } = require('vue-loader')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }, {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10 * 1024, // 对图片的大小做限制，10kb
              name: 'assets/[name].[hash:8].[ext]',
              esModule: false
            }
          }
        ],
        type: 'javascript/auto'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin()
  ],
...

3.安装eslint、babel和prettier
yarn add -D eslint eslint-loader babel-eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue
yarn add -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime
yarn add -D prettier

在webpack.config.js中的配置

module: {
  rules: [
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [{
          loader: 'babel-loader',    
          options: {
            presets: [
              '@babel/preset-env'
            ]
          }
        }, "eslint-loader"]
      }
  ]
},

相关其他配置详情见对应文件 .babelrc为babel规则 .eslintignore为eslint不生效的文件夹 .eslintrc.js为eslint规则 .prettierrc.js为prettier规则

4.其他内容 删除上一次打包的目录下的所有文件
yarn add -D clean-webpack-plugin

git提交模板
yarn add -D commitizen

校验的文件后缀集合,例如import aa from './index'，会去校验index.js和index.vue

resolve: {
  extensions: ['.js', '.vue']
}

打出来的包是否是压缩的
mode: 'production',mode: 'development',

用Lerna实现多包管理。
这个树就没有发布到npm服务上,因为没写样式的可配置,ui太丑了，有需要的下源码改吧。

树使用

treeData: [
  {
    id: 1,
    name: 1,
    parentId: null,
  },
  {
    id: 2,
    name: 2,
    parentId: 1,
  },
  {
    id: 3,
    name: 3,
    parentId: null,
  },
  {
    id: 4,
    name: 4,
    parentId: 1,
  }
]

id和name一定要。目前制作了扁平化数组的解析。全部使用到的参数如下

id: item.id, // id
parentId: item.parentId, // 父id
name: item.name, // 节点名
listorder: item.listorder || 1, // 排序级别
isShow: item.isShow ?? true, // 是否显示
isExpand: !!item.isExpand, // 是否展开
isSelected: !!item.isSelected, // 是否选中
halfSelected: false, // 半选,初始化在ItemMoudel渲染的时候去定义值
children: [] // 子节点集合

支持一个回调函数change,返回值为当前选中的所有节点IDs,新添加的节点IDs,删除的节点IDs

Tree地址

MoTree