VueCli4.0 + Less实现私人移动端UI库---(1)项目搭建

2020-01-10 1,403 阅读2分钟

本文梳理如何搭建和构建基于vue + less的前端组件库

github地址: github.com/suweishen

安装
首先安装node作为前端从业者这是必须的，我们就直接来安装vue/cli吧.

npm install -D @vue/cli (局部安装)
使用vue create projectName 来初始化项目

经过一系列的选择后,这些选择项可以根据自己喜好来自定义。
我们来看下目录结构

我们来分析一下目录结构：首先我们新建了一个packages文件夹，里面是存放我们写的组件的源码，examples文件夹是我们的原src文件夹。最重要的是我们需要自己手动来新建一个vue.config.js文件

修改vue.config.js的配置

修改vue.config.js配置的主要目的是：
1. 使Demo可访问，实现对src目录的编译处理
2. 提供对packages的编译、构建处理

做出以下两项修改

修改项目入口
添加对packages目录的编译处理

  // vue.config.js
  const path = require('path')

  module.exports = {
    // 配置入口
    pages: {
      index: {
        // page的入口
        entry: 'examples/main.js',
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html输出
        filename: 'index.html'
      }
    },
    // 拓展webpack配置
    chainWebpack: config => {
      // 配置别名
      config.resolve.alias
        .set('@', path.resolve('examples'))
        .set('~', path.resolve('packages'))
      config.module
        .rule('js')
        .include.add(/packages/).end()
        .include.add(/examples/).end()
        .use('babel')
        .loader('babel-loader')
        .tap(options => {
            return options
        })
    }
  }

对外暴露(install & Vue.use)
- 在 packages目录下，所有的单个组件都以文件夹的形式存储，这里创建一个目录 Button 文件夹
- 在 Button/ 目录下创建 component/ 目录存储组件源码，目录下创建index.vue以及index.less文件(因为我选择了less来作为css预处理器)，所有 Button 依赖的除第三方资源都存放与该目录下
- 在 /Button目录下创建 index.js 文件对外提供对组件的引用
```
    目录结构
    |---packages
    |     Button
    |       component
    |          index.vue
    |          index.less
    |       index.js
```

示例代码

        // Button/index.js
        
        import Button from './component/index.vue'
        /*
         * 暴露组件，对外提供应用
        */
        Button.install = Vue => {
          // 定义组件
          Vue.component(Button.name, Button) // Button.name就是实例的name属性
        }
        
        export default Button

导出packages组件库

    // packages/index.js
    
    /*
     * 整合所有组件，全局install
     */
    import Button from './Button'
    
    // 存储组建列表
    const components = [
      Button
    ]
    
    // 定义install方法，接收Vue作为参数
    const install = Vue => {
      // 判断是否安装
      if (install.installed) return 
      install.installed = true
    
      // 遍历注册全局组件
      components.map(component => {
        Vue.use(component)
      })
    
      // 检测到Vue才会执行
      if (typeof window !== 'undefined' && window.Vue) {
        install(window.Vue)
      }
    
      // Vue.prototype.$message = message;
    }
    
    export default {
      install,
      ...components
    }

NPM发布

 以库模式打包(本地安装的vue/cli需加上npx)
    vue-cli-service build --target lib --name chicagoUI --dest lib packages/index.js
    
    在lib下创建package.json
    {
        "name": "xxx-ui",
        "version": "0.1.0",
        "main": "xxx.umd.js"   // xxx根据实际目录下的
    }
    
    > 在保证自己当前的包管理是npm后，cd到lib文件夹下，执行 npm publish
    > 这里如果报错401
    > Code 401
    Unauthorized - PUT http://registry.npmjs.org/zr_test_demo - You must be logged in to publish packages.
    > 则执行 npm login 并输入你的npm账号密码
    > 登录之后执行 npm publish

感谢njit_peiyuan的分享，原文地址： blog.csdn.net/weixin_3416…