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 相关文章推荐
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
javascript常用经典算法详解
Jan 11 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
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
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php数据访问之查询关键字
2016/05/09 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
Vue函数式组件-你值得拥有
2019/05/09 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
numpy返回array中元素的index方法
2018/06/27 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
采购部主管岗位职责
2014/01/01 职场文书
物流仓储计划书
2014/01/10 职场文书
实习单位接收函
2014/01/11 职场文书
技校毕业生自荐书
2014/05/23 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
高中生物教学反思
2016/02/20 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python