Vue多组件仓库开发与发布详解


Posted in Javascript onFebruary 28, 2019

在开发组件时,我们可能会期望一类组件放在同一个代码仓库下,就像element那样,我们可以使用element提供的脚手架,也可以使用vue cli 3创建一个更‘新'的项目。

项目创建

通过vue cli 3创建项目,创建文件夹packages用于存放组件。

单个组件目录

在packages下就是每一个组件,每个组件和单独项目一样,会有package.json、README.md、src、dist等文件及目录。

如何演示/调试组件

在组件开发过称中,我们需要对组件进行展示,所以创建了examples文件夹,用于存放每个组件示例。

通过一个列表展示出所有的组件,点击选择当前开发的组件,进入对应的example。

路由的根就是一个导航列表,然后每个组件对应一个路由,通过一个配置文件的components.js来生成这个路由。

// 路由
import Navigation from "./Navigation";
import components from "./components";

let routes = components.map(component => ({
 path: `/${component.name}`,
 component: () => import(`../examples/${component.name}`)
}));

routes.unshift({
 path: "",
 component: Navigation
});

export default routes;

自动化脚本

创建/编译/发布

创建新的组件,需要修改components.js配置文件,在examples和packages下创建对应目录。

编译/发布组件,因为仓库下会有多个组件,如果一次发布多个,就需要进入每个文件夹下执行命令。

上面过程实现自动化,有很多种方式,比如可以通过npm run <script>,可以直接通过node命令等。这里我参考element,采用了Makefile。

创建script文件夹,其中包括创建脚本new.js和构建脚本build.js。

创建脚本

创建脚本主要就是目录的创建与文件的写入,其中可能需要注意的可能就是格式问题。

一种方式是在``之间,按照规范格式去完成写入内容,这样做比较麻烦,而且可能面临格式化要求修改问题。

另一种方式是在脚本中引入eslint,脚本中的eslint.CLIEngine可以根据配置文件(比如.eslintrc.js)格式化文件。需要注意的是需要比命令行中配置需要多添加fix: true配置, 如下

const CLIEngine = eslint.CLIEngine;
const cli = new CLIEngine({ ...require("../.eslintrc.js"), fix: true });

eslint在脚本中的使用方法,更具体的可以参考eslint文档中Node.js API部分。

// scripts/new.js部分
...

components.push({
 label: newName,
 name: newName
})

const updateConfig = function(path, components) {
 writeFile(path, `module.exports = ${JSON.stringify(components)}`).then(() => {
  console.log("完成components.js")
  // 格式化
  CLIEngine.outputFixes(cli.executeOnFiles([configPath]))
 })
}

const createPackages = function(componentName) {
 try {
  const dir = path.resolve(__dirname, `../packages/${componentName}/`)
  // 创建文件夹
  if (!fs.existsSync(dir)) {
   fs.mkdirSync(dir)
   console.log(`完成创建packages/${componentName}文件夹`)
  }
  // 写入README
  if (!fs.existsSync(`${dir}/README.md`)) {
   writeFile(
    `${dir}/README.md`,
    `## ${componentName}
 
 ### 使用说明
      `
   ).then(() => {
    console.log("完成创建README")
   })
  }
  // 写入package.json
  if (!fs.existsSync(`${dir}/package.json`)) {
   writeFile(
    `${dir}/package.json`,
    `{
 "name": "@hy/${componentName}",
 "version": "1.0.0",
 "description": "${componentName}",
 "main": "./dist/hy-${componentName}.umd.min.js",
 "keywords": [
  "${componentName}",
  "vue"
 ],
 "author": "",
 "license": "ISC"
}
    `
   ).then(() => {
    console.log("完成创建package.json")
   })
  }
  // 创建index.js
  if (!fs.existsSync(`${dir}/index.js`)) {
   writeFile(`${dir}/index.js`, `export {}`).then(() => {
    console.log("完成创建index.js")
    CLIEngine.outputFixes(cli.executeOnFiles([`${dir}/index.js`]))
   })
  }
 } catch (err) {
  console.error(err)
 }
}

const createExample = function(componentName) {
 try {
  const dir = path.resolve(__dirname, `../examples/${componentName}/`)
  // 创建文件夹
  if (!fs.existsSync(dir)) {
   fs.mkdirSync(dir)
   console.log(`完成创建examples/${componentName}文件夹`)
  }
  // 写入index.vue
  if (!fs.existsSync(`${dir}/index.vue`)) {
   writeFile(
    `${dir}/index.vue`,
    `<template>

</template>

<script>
import { } from '../../packages/${componentName}/index'

export default {
 components: {}
}

</script>
   `
   ).then(() => {
    console.log(`完成创建examples/${componentName}/index.vue文件`)
    // 格式化index.vue
    CLIEngine.outputFixes(cli.executeOnFiles([`${dir}/index.vue`]))
   })
  }
 } catch (err) {
  console.error(err)
 }
}

...

构建脚本

// build.js
...

async function build() {
 for (let i = 0, len = components.length; i < len; i++) {
  const name = components[i].name
  await buildService.run(
   "build",
   {
    _: ["build", `${root}/packages/${name}/src/index.js`],
    target: "lib",
    name: `hy-${name}`,
    dest: `${root}/packages/${name}/dist`,
    // 生成格式: umd格式会同时成功demo.html commonjs,umd,umd-min
    formats: "commonjs,umd-min"
    // clean: false
   },
   ["--target=all", `./packages/${name}/src/index.js`]
  )
 }
}

...

Lerna

lerna是一个多包仓库管理的工具,可以帮助创建、管理、发布多包仓库中的包。

关于lerna我也没有太深入得使用,只是用到了发布。首先在项目下执行init初始化了项目,在每次commit之后,可以执行publish。lerna会对应代码库打tag,并发布到npm仓库。

项目版本问题

0.0.1为不规范版本号,最小应该从1.0.0开始。npm publish无法发布,但是lerna publish可以发布。

导致结果安装为固定版本号,而不是以^开头的版本号范围。outdate可以检测到有更新,无法通过update升级。

组件开发

组件开发主要是在packages/<component name>/src目录下进行,在example/<component name>/目录下可以引入该组件src下的源文件,用一些数据来进行开发测试。组件开发和项目中的组件开发基本相同。

作为组件库中的组件,需要更多的考虑其通用性和易用性。不能为了通用而加入很多的属性,而使其失去易用性;同样也不能为了易用,而使其过于简单,使用范围过于局限。

对于每一个属性、每个抛出去的方法,都需要认真考虑其必要性。

唯一不同的地方可能需要注意的是导出的方式。

一种是直接导出组件,这种形式在使用时需要引入,并且在components中声明,也就是局部注册。

另一种是添加install方法后导出。这种形式需要调用vue.use方法,相当于全局注册。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中ajax学习笔记3
Oct 16 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
如何提高Dom访问速度
Jan 05 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 #Javascript
vue-cli3+typescript初体验小结
Feb 28 #Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 #Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 #Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 #Javascript
详解写好JS条件语句的5条守则
Feb 28 #Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 #Javascript
You might like
动易数据转成dedecms的php程序
2007/04/07 PHP
用PHP实现维护文件代码
2007/06/14 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php中使用sftp教程
2015/03/30 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
js确定对象类型方法
2012/03/30 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
Python实现测试磁盘性能的方法
2015/03/12 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
如何获取某个日期是当月的最后一天
2013/12/05 面试题
财务人员个人自荐信范文
2013/09/26 职场文书
怎样写演讲稿
2014/01/04 职场文书
促销活动策划方案
2014/01/12 职场文书
公司承诺书范文
2014/05/19 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
初中差生评语
2014/12/29 职场文书