前言
很早之前，就有开发一套vue组件库的想法，直到现在想法依旧只是想法。汗颜啊……
此篇文章将讲述如何开发vue组件库，虽然文章标题为《从零开始开发vue组件库》，实际上是从搭建vue项目工程开始讲起。至于如何搭建vue开发环境，就不在此篇文章赘述，这样的文章，网上一搜一大推。
使用脚手架创建vue项目
使用vue脚手架命令创建工程，工程使用vue2默认版本组合。
修正项目目录
目录说明
[components]目录是存放将来开发组件的代码目录；[examples]目录是项目工程的运行目录，也就是项目工程的入口，可以理解为普通vue工程的[src]目录。
由于修改的了vue工程的目录结构，所以要在vue.config.js文件中针对当前工程的目录，进行如下配置：
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
pages: {
index: {
entry: "examples/main.js"
}
}
})
开发组件
一个vue的文件，是由三部分组成，template区、script区和style区。template区放的是布局代码，script区放的是逻辑代码，style区放的是样式代码。使用过网上开源的组件库的小伙伴们，都知道组件既可以按需加载，又可以统一加载。为了达到这一要求，在开发组件的时候，就要把组件的样式单独存放在一个样式表中。所以在[components]目录中，就要新建两个目录，分别为[css]目录，存放组建的样式表；[lib]目录，存放组件的vue文件。
原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/%e4%bb%8e%e9%9b%b6%e5%bc%80%e5%a7%8b%e5%bc%80%e5%8f%91vue%e7%bb%84%e4%bb%b6%e5%ba%93.html
微信扫一扫 
支付宝扫一扫 