码迷,mamicode.com
首页 > 其他好文 > 详细

手把手做一个基于vue-cli的组件库(上篇)

时间:2020-05-03 16:16:43      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:github   开源   运行   字段   resolve   组件   options   family   接收   

基于vue-cli4的ui组件库,先贴个最终效果吧,步骤有点多,准备分上下篇,上篇:如何做一个初步的组件。下篇:编写说明文档及页面优化。开工。
GitHub地址:
技术图片
一、组件库是基于vue-cli框架的的,用vue-cli创建项目
vue create sq-ui
二、修改目录,以及重新修改配置文件。
1、查看了很多的开源组件库的源码,都喜欢用packages目录存放组件,examples目录用来展示组件。所以在这个项目内,将src目录改为examples用来展示组件。同级别创建packages目录,用来存放组件。由于改了目录,所以需要重新新配置webpack,先在最外层创建vue.congfig.js。现在的目录结构如下:
技术图片
2、配置vue.config.js文件。重新运行项目成功即可。
const path = require(‘path‘)
module.exports = {
  // 修改 pages 入口
  pages: {
    index: {
      entry: ‘examples/main.js‘, // 入口
      template: ‘public/index.html‘, // 模板
      filename: ‘index.html‘ // 输出文件
    }
  },
  // 扩展 webpack 配置
  chainWebpack: config => {
    // @ 默认指向 src 目录,这里要改成 examples
    // 另外也可以新增一个 ~ 指向 packages
    config.resolve.alias
      .set(‘@‘, path.resolve(‘examples‘))
      .set(‘~‘, path.resolve(‘packages‘))
// 把 packages 和 examples 加入编译,因为新增的文件默认是不被 webpack 处理的
    config.module
      .rule(‘js‘)
      .include.add(/packages/)
      .end()
      .include.add(/examples/)
      .end()
      .use(‘babel‘)
      .loader(‘babel-loader‘)
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}
三、新建组件
1、在packages下面新建一个SqButton组件的文件夹,同时新建一个index.js文件,用来导出所有组件。目录结构如下:
技术图片技术图片

 

2、在SqButton.vue中编写组件
<template>
  <button class="testBtn">测试按钮</button>
</template>
<script>
export default {
  name: ‘SqButton‘ // 注意这个name是必须的
}
</script>
<style lang="scss" scoped>
.testBtn {
  width: 100px;
  height: 50px;
  margin: 0 10px;
  background-color: #fc297f;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
</style>
3、在SqButton/src/index.js中暴露组件
// 暴露组件
import SqButton from ‘./src/SqButton‘
SqButton.install = vue => {
  vue.component(SqButton.name, SqButton)
}
export default SqButton
4、最后在src/index.js中导出所有组件
import SqButton from ‘./SqButton‘

// 所有组件列表
const components = [SqButton]
// 定义install方法,接收Vue作为参数
const install = function(Vue) {
  // 判断是否安装,安装过就不继续往下执行
  if (install.installed) return
  install.installed = true
  // 遍历注册所有组件
  components.map(component => Vue.use(component))
}

// 检测到Vue才执行,毕竟我们是基于Vue的
if (typeof window !== ‘undefined‘ && window.Vue) {
  install(window.Vue)
}
console.log(components)
export default {
  install,
  // 所有组件,必须具有install,才能使用Vue.use()
  ...components
}
5、在项目中测试组件
在main.js中引入组件
// 引入组件
import squi from ‘../packages‘
Vue.use(squi)
在app.vue页面中调用
技术图片

 

最终效果
技术图片

 

四、发布组件进行测试
package.json的 scripts 字段中新增一下命令:
"lib": "vue-cli-service build --target lib --name kui --dest lib packages/index.js"
 
--target: 构建目标,默认为应用模式。这里修改为 lib 启用库模式。
--dest : 输出目录,默认 dist。这里我们改成 lib
[entry]: 最后一个参数为入口文件,默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。
注意修改成适合自己项目的,我的修改如下:
"lib": "vue-cli-service build --target lib --name sq-ui --dest lib packages/index.js"
2、执行命令
npm run lib
会发现目录下多了lib文件夹
package.json其他配置,配置如下
  "name": "sq-ui",
  "version": "0.1.6",
  "private": false,
  "description": "基于 vue-cli4 的组件库",
  "main": "lib/sq-ui.umd.min.js",
  "author": "sq",
  "keywords": [
    "sq-ui"
  ],
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name sq-ui --dest lib packages/index.js"
  },
3、添加.npmignore 文件,发布时,只有编译后的 lib 目录、package.json、README.md才需要被发布。所以通过配置.npmignore文件忽略不需要提交的目录和文件。
# 这是复制 .gitignore 里面的
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

# 以下是新增的
# 要忽略目录和指定文件
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html
4、发布到npm
现需要去npm官网注册账号
然后本地登录:npm login
最后发布到npm: npm publish
5、最后就可以测试了:
可以另起一个项目
npm i sq-ui
在main.js中引用
import squi from ‘sq-ui‘
import ‘sq-ui/lib/sq-ui.css‘
Vue.use(squi)
在app.vue中调用组件:
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
    <sq-button></sq-button>
  </div>
</template>
如果,出现下面这个结果,恭喜你成功了。但这样展示实在是太low了,在下篇中我们希望我们的组件库能像element那样进行展示,为组件添加说明文档,使其更像一个组建库。

 技术图片

手把手做一个基于vue-cli的组件库(上篇)

标签:github   开源   运行   字段   resolve   组件   options   family   接收   

原文地址:https://www.cnblogs.com/sq-blogs/p/12822206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!