甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
在开发组件时，我们可能会期望一类组件放在同一个代码仓库下，就像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 ` ).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/
作为组件库中的组件，需要更多的考虑其通用性和易用性。不能为了通用而加入很多的属性，而使其失去易用性；同样也不能为了易用，而使其过于简单，使用范围过于局限。
对于每一个属性、每个抛出去的方法，都需要认真考虑其必要性。
唯一不同的地方可能需要注意的是导出的方式。
一种是直接导出组件，这种形式在使用时需要引入，并且在components中声明，也就是局部注册。
另一种是添加install方法后导出。这种形式需要调用vue.use方法，相当于全局注册。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。