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 1.5最新版本的改进细节分析
Jan 19 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 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实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
Vue使用vue-cli创建项目
2017/09/01 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
python 控制语句
2011/11/03 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python 变量的创建过程详解
2019/09/02 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
python空元组在all中返回结果详解
2020/12/15 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
高中毕业生自我鉴定范文
2013/09/26 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
运动会致辞稿50字
2014/02/04 职场文书
一月红领巾广播稿
2014/02/11 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
低碳环保标语
2014/06/12 职场文书
领导干部作风建设总结
2014/10/23 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python